使用file-saver导出文件

1. 安装

npm install file-saver --save
//saveAs()从文件保存器导入
import { saveAs } from 'file-saver';

使用保存文字 require()

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

在相同来源内使用URL只会使用a[download]。否则,它将首先检查它是否支持带有同步头请求的cors标头。如果是这样,它将下载数据并使用Blob URL保存。如果没有,它将尝试使用下载它a[download]

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

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

注意:标准HTML5 canvas.toBlob()方法并非在所有浏览器中都可用。 canvas-toBlob.js是一个跨浏览器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 = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"}); FileSaver.saveAs(file);

4.具体使用

import FileSaver from "file-saver";
export default class fileSave {
     * 导出Excel文件
     * @param {*} res   文件流
     * @param {*} name  文件名
    static getExcel(res, name) {
        let blob = new Blob([res], {
            type: "application/vnd.ms-excel"
        FileSaver.saveAs(blob, name + ".xlsx");
     * 导出CSV文件
     * @param {*} res   文件流
     * @param {*} name  文件名
    static getCsv(res, name) {
        let blob = new Blob([res], {
            type: "application/vnd.ms-excel"
        FileSaver.saveAs(blob, name + ".csv");
     * 导出图片1
     * @param {*} url 图片地址
     * @param {*} name  文件名
    static getImgURLs(url, name) {
        let last = url.substring(url.lastIndexOf("."), url.length);
        FileSaver.saveAs(url, `${name}${last}`);
     * 导出图片2
     * @param {*} res 文件流
     * @param {*} name  文件名
    static downLoadImg(res, filename) {
        let blob = new Blob([res], {
            type: "image/jpeg"