一、安裝
# 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, '近年走勢')