vue中使用file-saver導出文件

一、安裝

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

此外，可以通過以下方式安裝TypeScript定義：

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

二、語法

saveAs()從文件保存器導入

import { saveAs } from 'file-saver';

FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })

傳遞{ autoBom: true }如果你想FileSaver.js自動提供Unicode文本編碼提示（：見字節順序標記）。請注意，只有在您的Blob類型已charset=utf-8設置的情況下才能執行此操作。

 

三、例子

使用保存文字 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.js是Blob解決此問題的跨瀏覽器實現。

保存畫布

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);

 

四、具體使用

下面是項目中使用file-saver封裝幾種常見格式的導出，這裏後臺主要輸出文件流形式，如下：

在文件exportFile.js中封裝方法：

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"
        });
        FileSaver.saveAs(blob, `${filename}.jpg`);
    }
}

使用：

1.導入

import exportFile from '@/utils/exportFile'

2.使用

exportFile.getExcel(res.data, '近年走勢')