精华内容
下载资源
问答
  • 前端下载二进制流文件
    千次阅读
    2022-03-22 10:15:19

    1.需要在接口定义处除了加上
    method: ‘POST’,
    data,
    方法以及参数之外 还需要加一个
    responseType:‘blob’

    // 下载二进制流文件 data是接口返回的二进制流文件 name是传递过来的表格下载名字
    downloadExcel(data,name) {
    const url = window.URL.createObjectURL(new Blob([data], {type: ‘application/octet-stream’}));
    const link = document.createElement(‘a’);
    link.style.display = ‘none’;
    link.href = url;
    link.setAttribute(‘download’, ${name}.xlsx);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    }

    更多相关内容
  • 平时在前端下载文件有两种方式,一种是后台提供一个 URL,然后用window.open(URL)下载,另一种就是后台直接返回文件二进制内容,然后前端转化一下再下载。 由于第一种方式比较简单,在此不做探讨。本文主要讲解...

    平时在前端下载文件有两种方式,一种是后台提供一个 URL,然后用 window.open(URL) 下载,另一种就是后台直接返回文件的二进制内容,然后前端转化一下再下载。

    由于第一种方式比较简单,在此不做探讨。本文主要讲解一下第二种方式怎么实现。

    Blob、ajax(axios)

    mdn 上是这样介绍 Blob 的:

    Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据

    具体使用方法

    axios({
      method: 'post',
      url: '/export',
    })
    .then(res => {
      // 假设 data 是返回来的二进制数据
      const data = res.data
      const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', 'excel.xlsx')
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    })
    

    打开下载的文件,看看结果是否正确。

    在这里插入图片描述

    一堆乱码...

    一定有哪里不对。

    最后发现是参数 responseType 的问题,responseType 它表示服务器响应的数据类型,由于后台返回来的是二进制数据,所以我们要把它设为 arraybuffer
    接下来再看看结果是否正确。

    axios({
      method: 'post',
      url: '/export',
      responseType: 'arraybuffer',
    })
    .then(res => {
      // 假设 data 是返回来的二进制数据
      const data = res.data
      const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', 'excel.xlsx')
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    })
    

    在这里插入图片描述

    这次没有问题,文件能正常打开,内容也是正常的,不再是乱码。

    根据后台接口内容决定是否下载文件

    作者的项目有大量的页面都有下载文件的需求,而且这个需求还有点变态。

    具体需求如下

    1. 如果下载文件的数据量条数符合要求,正常下载(每个页面限制下载数据量是不一样的,所以不能在前端写死)。
    2. 如果文件过大,后台返回 { code: 199999, msg: '文件过大,请重新设置查询项', data: null },然后前端再进行报错提示。

    先来分析一下,首先根据上文,我们都知道下载文件的接口响应数据类型为 arraybuffer。返回的数据无论是二进制文件,还是 JSON 字符串,前端接收到的其实都是 arraybuffer。所以我们要对 arraybuffer 的内容作个判断,在接收到数据时将它转换为字符串,判断是否有 code: 199999。如果有,则报错提示,如果没有,则是正常文件,下载即可。具体实现如下:

    axios.interceptors.response.use(response => {
        const res = response.data
        // 判断响应数据类型是否 ArrayBuffer,true 则是下载文件接口,false 则是正常接口
        if (res instanceof ArrayBuffer) {
            const utf8decoder = new TextDecoder()
            const u8arr = new Uint8Array(res)
            // 将二进制数据转为字符串
            const temp = utf8decoder.decode(u8arr)
            if (temp.includes('{code:199999')) {
                Message({
                	// 字符串转为 JSON 对象
                    message: JSON.parse(temp).msg,
                    type: 'error',
                    duration: 5000,
                })
    
                return Promise.reject()
            }
        }
        // 正常类型接口,省略代码...
        return res
    }, (error) => {
        // 省略代码...
        return Promise.reject(error)
    })
    

    更多文章,敬请关注

    转载于:https://www.cnblogs.com/woai3c/p/11262491.html 

    展开全文
  • 前端下载二进制流文件为excel文件

    万次阅读 2018-09-07 16:21:08
    后台返回二进制流前端实现浏览器自动下载成exlce文件。 项目框架Vue。 主要知识点:Blob对象。h5新特性 download /* *封装函数 downLoadFile.js *params: *data:二进制文件 */ exports.install = function ...

    情景提示:
    请求后台接口。
    后台返回二进制流。
    前端实现浏览器自动下载成exlce文件。
    项目框架Vue。
    主要知识点:Blob对象。h5新特性 download

    /*
    *封装函数 downLoadFile.js
    *params:  
    *data:二进制文件
    */
    exports.install = function (Vue, options){
      Vue.prototype.downloadFile =function(data){
        if (!data) {
          return
        }
        let url = window.URL.createObjectURL(new Blob([data]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', 'excel1111.xlsx')
        document.body.appendChild(link)
        link.click()
       };
    }
    //---发送请求 获取二进制流
    this.$http.post(this.baseUrl+"/api/v1/statistic/export/event/817BA83027DA43F491486829E668DBEC",
              {
                startTime:time[0],
                endTime:time[1]
              },
                //--headers和responseType一定要在一起设置,否则会导致 获取到的二进制文件流 格式不正确
              {
                headers: {                                       
                  'content-type': 'application/json; charset=utf-8',
                  'token':sessionStorage.getItem("tokens"),
                },
                responseType: 'blob'      //--设置请求数据格式
              })
              .then((res)=>{
    //            console.log(res);
                this.downloadFile(res.data);  //---调用函数
              }).catch((erro)=>{
                console.log("erro-----",erro);
            })
    展开全文
  • 前端下载二进制流文件 为 excel文件

    千次阅读 2021-04-05 11:12:42
    需求: 前端请求后端接口,后端返回二进制流前端需实现浏览器自动下载成excel文件。 原理: 通过a标签的href属性将二进制数据转换为文件,再通过download属性将文件下载到本地。 注意: 接口响应的数据类型要设置...

    需求: 前端请求后端接口,后端返回二进制流,前端需实现浏览器自动下载成excel文件。

    原理: 通过a标签的href属性将二进制数据转换为excel文件,再通过download属性将文件下载到本地。
    注意: 接口响应的数据类型要设置为blob类型

    // 下载导入用户的模板
    export function downloadTemplate() {
        return request({
            url: 'api/users/excel',
            method: 'get',
            responseType: 'blob'
        });
    }
    

    实现代码:

    // 下载模板
            downloadTemplate() {
                try {
                    crudUser.downloadTemplate().then((res) => {
                        this.filename = '导入员工模板.xlsx';
                        this.url = window.URL.createObjectURL(res);
                        const link = document.createElement('a');
                        link.style.display = 'none';
                        link.href = this.url;
                        link.setAttribute('download', this.filename);
                        document.documentElement.appendChild(link);
                        link.click();
                        document.documentElement.removeChild(link);
                    });
                } catch (error) {
                    console.warn('下载模板出错!', error);
                }
            }
    

    记得三连~

    展开全文
  • 新接了项目,遇到这样的需求,通过后端接口下载excel文件,后端没有文件地址,返回二进制流文件。接下来通过实例代码给大家分享前端axios下载excel文件(二进制)的处理方法,一起看看吧
  • 前端下载二进制文件流

    千次阅读 2022-04-25 16:11:07
    //请求 export function xxxxx(params) { return request({ method: 'get', responseType: "blob",// 必须写 url: `xxxxxxxxx/xxx/xx?key=${params}`, }) } downExport({ ...console.log(n...
  • woai3c/Front-end-articles​github.com平时在前端下载文件有两种方式,一种是后台提供一个 URL,然后用 window.open(URL) 下载,另一种就是后台直接返回文件二进制内容,然后前端转化一下再下载。由于第一种方式...
  • 前端处理二进制流文件

    千次阅读 2021-12-30 10:05:12
    前端处理二进制流 上次写过一个详细处理方法,可以点击上方链接查看 最近开发得时候也遇到了一个新得处理方法,在此记录一下 上次得简化版 (可结合上方链接学习) const downURL = window.URL.createObjectURL...
  • 前端 下载 导出 文件
  • 前端二进制流文件下载
  • web前端js显示后台接口pdf二进制流文件,可以直接在idea运行。包含PDFJS 等相关js。详细参考readme
  • 二进制文件下载(spring+angularJs),正确完后曾业务需求,优化功能,实现前后端一致性,保证代码质量
  • 前端下载文件的方法有两种, 一种是后端返回下载的URL, 使用 Window.open(URL) 下载, 另一种就是后端直接返回文件二进制内容,前端做转换再下载。如果后台返回的是 get 请求的下载可以直接使用 a 标签下载 如果...
  • 采用springboot + vue的技术模式,实现了文件的上传和下载,在页面上跟简洁直观的体现,在代码中也是少量代码实现复杂功能。
  • // 下载api export async function downloadWord(data) { ... responseType: 'blob', // 表明返回服务器返回的数据类型 这里不写接受类型,文件格式乱码 }); return res; } 调用下载接口 下载类型对应 xls: ‘ap
  • 前端下载二进制流文件解决方案

    千次阅读 2020-04-13 15:24:09
    在做vue项目的某一个功能的数据导出功能时,后端直接向前端输出数据,于是利用原生XMLHttpRequest做了一个小插件 用法: import { httpRequestExport } from '@api/download' exportData() { ...
  • 前端处理二进制流文件导出为excel表

    千次阅读 2022-07-06 17:33:04
    将后端返回的二进制流文件 导出为excel表
  • 第一步,在 axios 请求中加入参数,表示接收的数据为二进制文件 responseType: 'blob' 第二步,在拿到数据之后,把流转为指定文件格式并创建a标签,模拟点击下载,实现文件下载功能 let blob = res.data let reader =...
  • 二进制流在线预览
  • 前端下载文件二进制文件流brob和url下载
  • 前端通过二进制流下载文件

    千次阅读 2021-01-12 05:57:12
    JS下载文件两种方式总结:下载文件主要分为两种形式,具体使用哪种方式取决于后台;1.如果后台服务器的静态目录有可供下载的静态...2.如果后台服务器无可供下载的静态资源,返回的是一个文件流(response-type: appl...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,495
精华内容 15,398
关键字:

前端下载二进制流文件