file-saver&Blob、File前端導出文件

前期准備

1.安裝插件：

npm install --save file-saver

2.在需要導出的文件下引入：

import { saveAs } from 'file-saver'

 

file-saver

github地址：https://github.com/eligrey/FileSaver.js、

簡介：

FileSaver.js 在沒有原生支持 saveAs() 的瀏覽器上實現了 saveAs()。

FileSaver.js 是在客戶端保存文件的解決方案，非常適合需要生成文件，或者保存不應該發送到外部服務器的敏感信息的 web App。

 

語法：

FileSaver saveAs(Blob/File data，filename，optional Boolean disableAutoBOM)

 

example：

1）保存文本

let blob = new Blob(["Hello, world!"]，{type: "text/plain;charset=utf-8"})

saveAs(blob, "hello world.txt")

2）保存文件

let file = new File(["Hello, world!"]，"hello world.txt"，{type: "text/plain;charset=utf-8"})

saveAs(file)

 

Blob

簡介：

Blob()構造函數返回一個新的Blob 對象；Blob 的內容由參數數組中給出的值的串聯組成。

 

語法：

let aBlob = new Blob(Array， options)

·array 是一個由ArrayBuffer, ArrayBufferView, Blob, DOMString 等對象構成的 Array ，或者其他類似對象的混合體，它將會被放進 Blob。DOMStrings會被編碼為UTF-8。

·options 是一個可選的BlobPropertyBag字典，它可能會指定如下兩個屬性：

　　- type，默認值為 " "，它代表了將會被放入到blob中的數組內容的MIME類型。

　　- endings，默認值為"transparent"，用於指定包含行結束符\n的字符串如何被寫入。 它是以下兩個值中的一個： "native"，代表行結束符會被更改為適合宿主操作系統文件系統的換行符，或者 "transparent"，代表會保持blob中保存的結束符不變 。

 

File

簡介：

File() 構造器創建新的File對象實例。

 

語法：

let myFile = new File(bits，name[， options])

·bits 一個包含ArrayBuffer，ArrayBufferView，Blob，或者 DOMString 對象的 Array — 或者任何這些對象的組合。這是 UTF-8 編碼的文件內容。

·name 表示文件名稱，或者文件路徑。

·options（可選） 選項對象，包含文件的可選屬性。

　　- type: 表示將要放到文件中的內容的 MIME 類型，默認值為 " " 。

　　- lastModified:  數值，表示文件最后修改時間的 Unix 時間戳（毫秒），默認值為 Date.now()。

 

example

1）先獲取需導出內容

2）使用Blob() 將內容編譯一下

3）定義文件名

4）saveAs() 導出文件