純前端下csv載數據到本地

純前端下載數據到本地

這個需求來自於前段時間，我已經做好了一個數據展示頁面，如下圖所示（當時還沒有生成文件的功能），然后需求方面提出要在現在基礎上對所有數據進行去重，然后導出一個csv文件，我當時想，如果能夠少許改動后端（在現有后端基礎上，只對數據進行去重）就好了，其他還是交給前端，這樣能夠快速實現，而且也方便維護，於是就Google了下，發現json2csv 和 file-saver 這兩個包結合使用，正好滿足了我的需求。

github純前端下載數據到本地

介紹

• json2csv

通過名字，也可以清楚的知道，其作用是將json數據轉換為csv，點擊查看項目主頁

• file-saver

file-saver一個比較好的客戶端保存文件的解決方案，適合在客戶端生成文件的web應用程序，但是如果你的文件過大，使用這個就不太好了，可以使用StreamSaver.js。支持的瀏覽器與文件大小限制如下表所示：

Browser	Constructs as	Filenames	Max Blob Size	Dependencies
Firefox 20+	Blob	Yes	800 MiB	None
Firefox < 20	data: URI	No	n/a	Blob.js
Chrome	Blob	Yes	[2GB][3]	None
Chrome for Android	Blob	Yes	[RAM/5][3]	None
Edge	Blob	Yes	?	None
IE 10+	Blob	Yes	600 MiB	None
Opera 15+	Blob	Yes	500 MiB	None
Opera < 15	data: URI	No	n/a	Blob.js
Safari 6.1+*	Blob	No	?	None
Safari < 6	data: URI	No	n/a	Blob.js
Safari 10.1+	Blob	Yes	n/a	None

安裝包

在項目目錄下執行

npm install json2csv --save
npm install file-saver --save

示例

demo源碼

• 偽代碼

//具體可以看demo，直接down下來運行可以測試具體效果
downLoad () {
  //json 數據
  const data = []
  //數據中key和header對應關系，可以不加，這樣header默認key名
  const fields = []
  const opts = {
	fields
  }
  const json2csvParser = new Parser(opts)
  const csv = json2csvParser.parse(data)
  let blob = new Blob(['\uFEFF' + csv], {
	type: 'text/plaincharset=utf-8'
  })
  FileSaver.saveAs(blob, fileName)
}

偽代碼中'\uFEFF'是指增加的BOM，這樣，無論是windows還是類 unix 系統，都會根據這個BOM來識別編碼，就不會亂碼了。
具體詳情可以參考：https://www.cnblogs.com/sparkdev/p/5676654.html
https://baike.baidu.com/item/BOM/2790364