1 一、安装
  2 # Basic Node.JS installation
  3 npm install file-saver --save
  4 bower install file-saver
  5 此外，可以通过以下方式安装TypeScript定义：
  6 
  7 # Additional typescript definitions
  8 npm install @types/file-saver --save-dev
  9 二、语法
 10 saveAs()从文件保存器导入
 11 import { saveAs } from 'file-saver';
 12 FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })
 13 传递{ autoBom: true }如果你想FileSaver.js自动提供Unicode文本编码提示（：见字节顺序标记）。请注意，只有在您的Blob类型已charset=utf-8设置的情况下才能执行此操作。
 14 
 15  
 16 
 17 三、例子
 18 使用保存文字 require()
 19 var FileSaver = require('file-saver');
 20 var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
 21 FileSaver.saveAs(blob, "hello world.txt");
 22 储存文字
 23 var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
 24 FileSaver.saveAs(blob, "hello world.txt");
 25 保存网址
 26 FileSaver.saveAs("https://httpbin.org/image", "image.jpg");
 27 在相同来源内使用URL只会使用a[download]。否则，它将首先检查它是否支持带有同步头请求的cors标头。如果是这样，它将下载数据并使用Blob URL保存。如果没有，它将尝试使用下载它a[download]。
 28 
 29 标准的W3C File API Blob接口并非在所有浏览器中都可用。 Blob.js是Blob解决此问题的跨浏览器实现。
 30 
 31 保存画布
 32 var canvas = document.getElementById("my-canvas");
 33 canvas.toBlob(function(blob) {
 34     saveAs(blob, "pretty image.png");
 35 });
 36 注意：标准HTML5 canvas.toBlob()方法并非在所有浏览器中都可用。 canvas-toBlob.js是一个跨浏览器canvas.toBlob()，可以对此进行填充。
 37 
 38 保存文件
 39 您可以保存File构造函数而无需指定文件名。如果文件本身已经包含名称，则有很多方法可以获取文件实例（从存储，文件输入，新构造函数，剪贴板事件）。如果仍要更改名称，则可以在第二个参数中更改它。
 40 
 41 // Note: Ie and Edge don't support the new File constructor,
 42 // so it's better to construct blobs and use saveAs(blob, filename)
 43 var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
 44 FileSaver.saveAs(file);
 45  
 46 四、具体使用
 47 下面是项目中使用file-saver封装几种常见格式的导出，这里后台主要输出文件流形式，如下：
 48 
 49 
 50 
 51 在文件exportFile.js中封装方法：
 52 
 53 import FileSaver from "file-saver";
 54 export default class fileSave {
 55     /**
 56      * 导出Excel文件
 57      * @param {*} res   文件流
 58      * @param {*} name  文件名
 59      */
 60     static getExcel(res, name) {
 61         let blob = new Blob([res], {
 62             type: "application/vnd.ms-excel"
 63         });
 64         FileSaver.saveAs(blob, name + ".xlsx");
 65     }
 66  
 67     /**
 68      * 导出CSV文件
 69      * @param {*} res   文件流
 70      * @param {*} name  文件名
 71      */
 72     static getCsv(res, name) {
 73         let blob = new Blob([res], {
 74             type: "application/vnd.ms-excel"
 75         });
 76         FileSaver.saveAs(blob, name + ".csv");
 77     }
 78  
 79     /**
 80      * 导出图片1
 81      * @param {*} url 图片地址
 82      * @param {*} name  文件名
 83      */
 84     static getImgURLs(url, name) {
 85         let last = url.substring(url.lastIndexOf("."), url.length);
 86         FileSaver.saveAs(url, `${name}${last}`);
 87     }
 88      /**
 89      * 导出图片2
 90      * @param {*} res 文件流
 91      * @param {*} name  文件名
 92      */
 93     static downLoadImg(res, filename) {
 94         let blob = new Blob([res], {
 95             type: "image/jpeg"
 96         });
 97         FileSaver.saveAs(blob, `${filename}.jpg`);
 98     }
 99 }
100 使用：
101 
102 1.导入
103 
104 import exportFile from '@/utils/exportFile'
105 2.使用
106 
107 exportFile.getExcel(res.data, '近年走势')
108  
109 ————————————————
110 版权声明：本文为CSDN博主「Drss」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
111 原文链接：https://blog.csdn.net/qq_30671099/java/article/details/104052782