使用流行库

file-save.js ，兼容苹果，火狐，IE，谷歌浏览器；支持500M到1G

npm install ``file-saver --save

代码封装

  1. import Vue from "vue";
  2. import { saveAs } from "file-saver";
  4. import iconv from 'iconv-lite';//用于解决后端返回的中文乱码问题
  6. Vue.prototype.downloadcreateUrl = function(res, filename, type) {
  7.   const content = res.data;// 注意查看conten的内容数据是否在content.data里
  8.   let blob = "";
  9.   let fileName = filename;
  11.   if(content.type === 'text/xml'){  //返回错误信息提示
  12.             let reader = new FileReader();
  13.             reader.readAsText(blob);
  14.             reader.onload = function () {
  15.                 console.log('reader',reader)
  16.                 let resData = JSON.parse(reader.result.toString());
  17.                 message.warning(resData  || '找不到请求的资源' );
  18.                 return;
  19.             };
  20.             return ;
  21.     }
  23.   if(content.type === 'application/json'){  //返回错误信息提示
  24.     let reader = new FileReader();
  25.     reader.readAsText(res);
  26.     reader.onload = function () {
  27.       console.log('reader',reader)
  28.       let resData = JSON.parse(reader.result.toString());
  29.       SingleMessage.error(resData.message);
  30.       return;
  31.     };
  32.     return ;
  33.   }
  36.   if (type == "word") {
  37.     blob = new Blob([content], {
  38.       type:
  39.         "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8"
  40.     });
  41.   } else if (type == "reportword") {
  42.     blob = new Blob([content], {
  43.       type:
  44.         "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8"
  45.     });
  46.   } else if (type == "zip") {
  47.     blob = new Blob([content], { type: "application/zip;charset=UTF-8" });
  48.   } else if (type == "pdf") {
  49.     blob = new Blob([content], { type: "application/pdf;charset=UTF-8" });
  50.   } else if (type == "xml") {
  51.     blob = new Blob([content], { type: "application/xml;charset=UTF-8" });
  52.   } else if (
  53.     type == "rar" ||
  54.     type == "xls" ||
  55.     type == "xlsx" ||
  56.     type == "csv" ||
  57.     type == "dbf"
  58.   ) {
  59.     //没有指定MIME类型，通过文件名后缀定义下载文件类型
  60.     blob = new Blob([content]);
  61.     fileName = filename + "." + type;
  62.   } else if (type == "dbf") {
  63.     blob = new Blob([content], {
  64.       type: "application/x-dbf;charset=UTF-8"
  65.     });
  66.   } else {
  67.     //excel
  68.     blob = new Blob([content], {
  69.       type:
  70.         "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8"
  71.     });
  72.   }
  73.   console.log(content);
  74.   // 有文件名就用自定义的，没有就从header获取
  75.   if (!fileName) {
  76.     fileName = fileNameFromHeader(content.headers["content-disposition"] || "");
  77.     iconv.skipDecodeWarning = true;//忽略警告
  78.     fileName = iconv.decode(fileName, 'utf-8');//解决中文乱码
  79.   }
  80.   console.log('downloadcreateUrl:',fileName)
  81.   saveAs(blob, fileName);
  82.   function fileNameFromHeader(disposition) {
  83.     let result = null;
  84.     disposition = disposition.split(";")[1];
  85.     if (disposition && /filename=.*/gi.test(disposition)) {
  86.       result = disposition.match(/filename=.*/gi);
  87.       return decodeURIComponent(result[0].split("=")[1].replace(/\+/g, "%20"));
  88.     }
  89.     return "null";
  90.   }
  91. };