zoukankan      html  css  js  c++  java
  • vue总结_下载流文件

    vue项目中接受后台传过来的流文件会出现乱码

    后台response的内容如下:

    在参考各位大大资料的基础下,做了点总结。

    具体处理方法如下

    1、方法一:通过插件https://github.com/kennethjiang/js-file-download

          在需要使用接受文件的地方

    //  需要安装cnpm install js-file-download --save     var fileDownload = require("js-file-download");
    然后在接口部分
    // 导出文件流
      fetchExportBill(url, data = {}) {
        return new Promise((resolve, reject) => {
          axios.post(url,data,{ responseType: 'arraybuffer'}).then(res => {
          //resolve(res)
          //以下fileName是取后台的文件名,如果没有'content-disposition',可以直接略过这一步,自己定:如fileName="xxx.xlsx"。
         let fileName = res.headers['content-disposition'].match(/fushun(S*)xls/)[0];
        fileDownload(res.data,fileName);
          }).catch(error => {
            if (data.Vue) {
              data.Vue.$message.error('系统异常');
            }
            reject(null, e);
          })
        })
      },

    2、方法二:通过Blob实现

    // 导出文件流
      fetchExportBill(url, data = {}) {
        return new Promise((resolve, reject) => {
          axios.post(url,data,{ responseType: 'arraybuffer'}).then(res => {
          //resolve(res)
          let blob = new Blob([res], {type: "application/vnd.ms-excel"}); 
      let objectUrl = URL.createObjectURL(blob); 
       window.location.href = objectUrl; 
          }).catch(error => {
            if (data.Vue) {
              data.Vue.$message.error('系统异常');
            }
            reject(null, e);
          })
        })
      },

     注:Blob对象的type为MIME类型,具体参考 vue总结_MIME

            Blob具体使用方式参考 :MDNBlo 

    网络释义
    Filedownload: 资料下载

  • 相关阅读:
    基础面试
    三级联动
    数据库分裤分表操作
    缓存的三种方式
    php部分--session的三种用法
    css
    数组
    生成中国地区随机IP
    xml的读取
    React入门
  • 原文地址:https://www.cnblogs.com/yjmBlogs/p/9493470.html
Copyright © 2011-2022 走看看