精华内容
下载资源
问答
  • 后端返回文件流前端需要对返回的文件处理进行文件下载 先是发送请求的时候声明返回blob格式 url: '',(你的地址) method: 'post', data: params, responseType: 'blob' (这里很重要) 然后将返回的数据传...

    后端返回文件流,前端需要对返回的文件流处理进行文件下载
    先是发送请求的时候声明返回blob格式

    url: '',(你的地址)
    method: 'post',
    data: params,
    responseType: 'blob'  (这里很重要)
    

    然后将返回的数据传给downLoadXls方法里,第二个形参是文件名称,然后系统就开始自动下载了~

    function downLoadXls(data, filename) {
            //var blob = new Blob([data], {type: 'application/vnd.ms-excel'})接收的是blob,若接收的是文件流,需要转化一下
        if (typeof window.chrome !== 'undefined') {
            // Chrome version
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(data);
            link.download = filename;
            link.click();
        } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
            // IE version
            var blob = new Blob([data], { type: 'application/force-download' });
            window.navigator.msSaveBlob(blob, filename);
        } else {
            // Firefox version
            var file = new File([data], filename, { type: 'application/force-download' });
            window.open(URL.createObjectURL(file));
        }
    }
    
    展开全文
  • 后端返回文件流前端post请求接收并下载
    fetch('<接口地址>', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: '<请求参数:json字符串>',
    })
    .then(res => res.blob())
    .then(data => {
      let blobUrl = window.URL.createObjectURL(data);
      download(blobUrl);
    });
    
    function download(blobUrl) {
      const a = document.createElement('a');
      a.style.display = 'none';
      a.download = '导出的文件名';
      a.href = blobUrl;
      a.click();
      document.body.removeChild(a);
    }
    展开全文
  • 后端返回文件流格式前端应该如何处理? 如何将后端返回的文件格式转换为Excel文件,并下载Excel文件? 带着这些问题看文章,希望对你有所帮助! 1. 应用场景 2. 代码块分析 3. 具体代码实现 1.应用场景 当后端...

    当后端返回文件流格式前端应该如何处理?
    如何将后端返回的文件流格式转换为Excel文件,并下载Excel文件?
    带着这些问题看文章,希望对你有所帮助!

    1. 应用场景
    2. 代码块分析
    3. 具体代码实现

    1.应用场景

    当后端返回的是文件流形式,前端应当如何处理?
    如何利用blob方法将文件流转换成正常的Excel文件格式?

    2.代码块分析

     downloadFileExcel(res, fileName) {//自定义blob方法,导出Excel文件
            let blob = new Blob([res.data]);
            if (!fileName) {//如果后台返回文件名称
            //注意一定要和后端协调好返回的数据格式,不然会出现中文乱码问题
              fileName = res.headers['content-disposition'].split('filename=').pop();
            }
            if ('msSaveOrOpenBlob' in navigator) {
              window.navigator.msSaveOrOpenBlob(blob, fileName);
            } else {
              const elink = document.createElement('a');
              elink.download = fileName;
              elink.style.display = 'none';
              elink.href = URL.createObjectURL(blob);
              document.body.appendChild(elink);
              elink.click();
              URL.revokeObjectURL(elink.href);
              document.body.removeChild(elink);
            }
          },
    
    
    

    3.具体代码实现

    getlist:function(){
    var data={
     username:_this.userName,startTime:_this.startTime,endTime:_this.endTime
    }
     _this.$axios.post(_this.httpAPI + 'slog/getExecl',data,{
              headers: {'Content-Type': 'application/json','Authorization': _this.token},
              responseType:"blob"//注意 需要规定后台返回文件流格式
            }
            ).then(function(response){
              if(response){
                _this.downloadFile(response, '卷宗下载'+_this.DQTime+ '.xls');//自定义Excel文件名
              }else{
                _this.$message.error("服务端异常,Excel文件下载失败!");
              }
            });
    }
    downloadFile(res, fileName) {
            let blob = new Blob([res.data]);
            if (!fileName) {
              fileName = res.headers['content-disposition'].split('filename=').pop();
            }
            if ('msSaveOrOpenBlob' in navigator) {
              window.navigator.msSaveOrOpenBlob(blob, fileName);
            } else {
              const elink = document.createElement('a');
              elink.download = fileName;
              elink.style.display = 'none';
              elink.href = URL.createObjectURL(blob);
              document.body.appendChild(elink);
              elink.click();
              URL.revokeObjectURL(elink.href);
              document.body.removeChild(elink);
            }
    }
          
    
    

    写在最后

    如果你觉得这篇文章写得不错或者对您有用的话请帮忙点赞加收藏,毕竟原创不易;如果您觉得文章有什么地方写得不对或者需要改进的地方,欢迎通过评论私聊博主!

    展开全文
  • vue+ts+elementUI:后端返回文件流前端预览pdf文件 1.配置接口 //获取pdf文件 export const getPdfService = (paramsData: any) => { const res: any = service.post('/idsapi/api/dispatch/dispatch_file_...

    vue+ts+elementUI:后端返回文件流,前端预览pdf文件

    1.配置接口

    //获取pdf文件流
    export const getPdfService = (paramsData: any) => {
        const res: any = service.post('/idsapi/api/dispatch/dispatch_file_stream',paramsData, {responseType: 'blob'});
        return res;
    }
    

    2.ts方法

      async previewPdf(fileName) { //预览pdf
            let parm = {
                FILE_NAME: ""
            }
            if (fileName != null && fileName != "") {
                parm.FILE_NAME = fileName;
            }
    
            const responseData = (await getPdfService(parm)).data;
            if (responseData != null) {
                let pdfUrl = window.URL.createObjectURL(new Blob([responseData], { type: "application/pdf" }));
                window.open(pdfUrl)
            }
    
        }
    

    3.html调用方法

     <el-table-column prop label="文件名称" width="420">
                <template slot-scope="scope">
                  <a
                    style="color :#2ca0f2 ; text-decoration:underline"
                    @click="previewPdf(scope.row.FILENAME)"
                  >{{ scope.row.FILENAME}}</a>
                </template>
              </el-table-column>
    
    展开全文
  • vue+ts+elementUI:后端返回文件流前端下载pdf文件到本地 1.配置接口 //下载天气信息pdf export const downWeatherPdfService = (paramsData: any) => { const res: any = service.post('/weaapi/api/dispatch/...
  • https://zhuanlan.zhihu.com/p/32909043 https://blog.csdn.net/WU5229485/article/details/85219165 export function exportExel(options: any) { fetch('/api/order/exportExcel') .then(res => res.b...
  • 导出功能后端直接返回文件流,需要前端下载到本地。 首先尝试了blob方法转换文件流的本地地址,使用a标签下载 ActivityService.activityExport(data).then(res => { // 使用blob转换文件流 var blob = new...
  • 最近在做项目的时候遇到Excel导出功能,后端返回的是文件流前端如何实现下载功能,以下是项目用的源码,有需要可直接复制使用: // 导出 exporttable() { this.axios({ method: "get", url: this.baseUrls + ...
  • 文章: 后端 提供了php脚本文件返回一个pdf流文件前端 前端去访问这个文件,可以直接读取,并下载。 windows系统和MAC系统都是正常可以下载
  • 后端文件流前端下载

    千次阅读 2019-04-14 11:42:57
    1.问题 在做项目的时候,碰到前端需要下载文件,其中涉及到的文件必须从后端传送。...关键:后端返回前端的头部中添加设置contentType为x-download. 代码 前端: <a href="后端文件下载接口地址" ...
  • 如果后端接口需要post请求,前端又该如何下载呢,一般后端接口以数据形式返回前端。 以axios(例子axios 进一步封装了,只做参考)为例: excel文件,需要注意的是,相应类型responseType: "arraybuffer"需要...
  • 前端下载EXCEL文件,后端返回文件流的处理 axios({ url: '下载接口URL', method: 'post', data: {}, responseType: 'blob' }).then((res) => { // data就是接口返回的文件 let data = res.data if (data...
  • 下载excel 文件流下载
  • 后端返回乱码文件流前端Ajax请求下载 问题描述: 使用ajax请求加参数 xhrFields: { responseType: "blob ", } 报错,还没找到原因。。。 最后使用原生请求,但是原生请求只能发送字符串,需要向后端传对象 解决...
  • 使用原生ajax导出后端返回文件前端用blob处理后端返回的二进制数据,导出Excel格式的文件。 const infoExport = () => { 后端真实的路径是:"/call/api/orderName/export" 以下url中第一个api是 proxy 需要...
  • java后端解析文件返回文件流,前端自定义文件名 请求属性:responseType: ‘blob’ 后台代码示例 ```java public static void exportMillCertificateWord(HttpServletRequest request, HttpServletResponse response...
  • 后端返回数据前端导出下载xls文件 export function exportMethod() { axios({ method: get, url: url+‘params’, responseType: ‘blob’ }).then((res) => { const link = document.createElement(‘a’) ...
  • vue后端返回Excel文件流前端做excel导出功能 因为没有时间慢慢写文章总结,所以直接扔原作者的链接上来。 https://blog.csdn.net/lianwenxiu/article/details/94573394
  • 后端返回文件流下载处理

    千次阅读 2020-05-05 14:13:00
    后端返回文件流下载模板处理 const content = res.data//接口返回文件值 const blob = new Blob([content]) const fileName = ‘不符合情况清单.docx’ if (‘download’ in document.createElement(‘a’)) { //...
  • 前端处理下载后端返回文件流

    千次阅读 2020-11-03 10:13:37
    后端返回文件流前端需要对返回的文件处理进行文件下载 先是发送请求的时候声明返回blob格式 url: '', method: 'post', data: params, responseType: 'blob' //responseType: 'ArrayBuffer' 然后将返回的数据传...
  • 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件 1:使用 Blob 创建一个指向类型化数组的...
  • 2. 后端返回的blob文件流,并且已经设置了utf-8,但是你接受的接口返回值,依然是乱码? 解决办法: 肯定没有设置 responseType: "blob",我不知道你用的什么接口请求方式,你可以搜一下,怎么设置responseType: ...
  • 后端返回的内容 传参后拿到的是上图显示的结果,前端如何实现下载此文件为excle或者zip呢?一起来看看吧: 前端实现下载 在项目封装的统一请求的文件中加入responseType : "blob"即可。 注意:该代码应与headers...
  • 项目中有一个download接口,这个接口直接返回二进制文件流。之前如果下载文件,一般后端传一个加密串过来,然后前端进行解密,拼接成URL再去下载。现在等于直接把文件发给前端,这种情况下怎么下载文件?问了下同事...
  • 前端通过传递参数,后端返回文件流前端进行处理并进行文件下载,直接上代码。 downLoadFile(data, filename) { if (typeof window.chrome !== 'undefined') { // Chrome version var link = document....
  • 后端返回二进制 前端实现Blob下载

    千次阅读 2020-03-30 00:18:39
    通过后台传来的二进制进行下载,拿到数据以后是乱码,前台需要转换为blob实现下载,否者下载不了。 前台使用的是vue。 export const excleTest = params => { return axios.post('/CommodityController/...
  • stu.setRemarks("备注信息,不应该返回!"); return stu; } } 2.修改后的效果: 修改后的代码: package com.example.demo; import com.example.Bean.Student; import org.springframework.web.bind.annotation....
  • 这周做项目碰到个需求,请求接口后端返回二进制文件流前端直接下载成文件, 返回的二进制如下: 1.在axios请求的时候需要添加responseType XMLHttpRequest.responseType 属性是一个枚举类型的属性,返回响应数据...
  • 前端实现下载功能时,记录使用接口返回文件流得形式进行下载 1,可以通过后端返回的链接a标签直接下载 2,有时候是后端接口返回得文件进行下载 3,前端生成表格文件下载 第一步我们写一个获取 blob 得方法 /** *...
  • 由于没有接触过后端返回文件流前端实现下载功能的实现,查了很多资料,最终在该大佬的博客中找到答案,非常感谢该博主,再次附上博主的链接:链接

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 104,251
精华内容 41,700
关键字:

后端返回文件流给前端