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: 资料下载

  • 相关阅读:
    typeScript 之(3) 类型
    TypeScript 采坑 记录
    typeScript 之(2) 环境部署
    typeScript 之(1) 简介
    webpack 之(29) optiization配置详解
    webpack 之(28) devServer配置详解
    webpack 之(27) resolve配置详解
    webpack 之(26) module配置详解
    docker中的Mysql数据卷与持久化
    TCP三次握手四次挥手
  • 原文地址:https://www.cnblogs.com/yjmBlogs/p/9493470.html
Copyright © 2011-2022 走看看