vue导出文件，用FileSaverJs就够了

FileSaver.js 是在客户端保存文件的解决方案，非常适合 在客户端上生成文件的 Web 应用。它是 HTML5 版本的 saveAs() FileSaver 实现，支持大多数主流的浏览器，其兼容性如下图所示：**

从文件保护程序导入saveAs()

import { saveAs } from 'file-saver';

使用 保存文本require()

var FileSaver =require('file-saver');var blob =newBlob(["Hello, world!"],{type:"text/plain;charset=utf-8"});
FileSaver.saveAs(blob,"hello world.txt");

保存文本

var blob =newBlob(["Hello, world!"],{type:"text/plain;charset=utf-8"});
 FileSaver.saveAs(blob,"hello world.txt");

保存网址

FileSaver.saveAs("https://httpbin.org/image", "image.jpg"); 

在同一源中使用 URL 将只使用 . 否则，它将首先检查它是否支持具有同步头请求的 cors 标头。 如果是这样，它将下载数据并使用 Blob URL 保存。 如果没有，它将尝试使用 .

a[download]``a[download]

标准 W3C 文件 API Blob 接口并非在所有浏览器中都可用。Blob.js 是解决此问题的跨浏览器实现。

保存画布

var canvas = document.getElementById("my-canvas");
canvas.toBlob(function(blob){saveAs(blob,"pretty image.png");});

注意：标准 HTML5 方法并非在所有浏览器中都可用。canvas-toBlob.js 是一个跨浏览器，可以填充它。

canvas.toBlob()``canvas.toBlob()

保存文件

可以在不指定文件名的情况下保存 File 构造函数。如果 文件本身已经包含一个名称，有一手手可以获取文件的方法 实例（来自存储、文件输入、新建构造函数、剪贴板事件）。 如果您仍想更改名称，则可以在第二个参数中更改它。

// Note: Ie and Edge don't support the new File constructor,// so it's better to construct blobs and use saveAs(blob, filename)var file =newFile(["Hello, world!"],"hello world.txt",{type:"text/plain;charset=utf-8"});
FileSaver.saveAs(file);

#Basic Node.JS installation
npm install file-saver --save
bower install file-saver

此外，可以通过以下方式安装TypeScript定义：

#Additional typescript definitions
npm install @types/file-saver --save-dev

使用例子

后台返回

在export.js中封装方法

exportfunctiondownloadCloud(url, params, filename, config){
  downloadLoadingInstance = Loading.service({text:"正在下载数据，请稍候",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)",})return service.post(url, params,{transformRequest:[(params)=>{returntansParams(params)}],headers:{'Content-Type':'application/x-www-form-urlencoded'},responseType:'blob',...config
  }).then(async(data)=>{const isLogin =awaitblobValidate(data);if(isLogin){const blob =newBlob([data])saveAs(blob, filename)}else{const resText =await data.text();const rspObj =JSON.parse(resText);const errMsg = errorCode[rspObj.code]|| rspObj.msg || errorCode['default']
      Message.error(errMsg);}
    downloadLoadingInstance.close();}).catch((r)=>{
    console.error(r)
    Message.error('下载文件出现错误，请联系管理员！')
    downloadLoadingInstance.close();})}/**
* 参数处理
* @param {*} params  参数
*/exportfunctiontansParams(params){let result =''for(const propName of Object.keys(params)){const value = params[propName];var part =encodeURIComponent(propName)+"=";if(value !==null&& value !==""&&typeof(value)!=="undefined"){if(typeof value ==='object'){for(const key of Object.keys(value)){if(value[key]!==null&& value[key]!==""&&typeof(value[key])!=='undefined'){let params = propName +'['+ key +']';var subPart =encodeURIComponent(params)+"=";
            result += subPart +encodeURIComponent(value[key])+"&";}}}else{
        result += part +encodeURIComponent(value)+"&";}}}return result
}// 验证是否为blob格式exportasyncfunctionblobValidate(data){try{const text =await data.text();JSON.parse(text);returnfalse;}catch(error){returntrue;}}

页面使用

downloadCloud('url',{},`name_${newDate().getTime()}.xlsx`)