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

  • 相关阅读:
    搭建负载均衡的环境(利用虚拟机上的四台centos)
    java的IO,AIO简单对比
    【每日分享】关于漏测
    安装xampp后,遇到的各种问题
    端口占用问题——netstat命令
    随笔
    AJAX 状态值(readyState)与状态码(status)详解
    CSS 实践:实现下拉菜单的方法
    css3动画总结
    判断手机运营商
  • 原文地址:https://www.cnblogs.com/yjmBlogs/p/9493470.html
Copyright © 2011-2022 走看看