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, '近年走勢')
 
————————————————
版權聲明：本文為CSDN博主「Drss」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_30671099/java/article/details/104052782