安裝依賴
FileSaver.js 是客戶端保存文件的解決方案。
Xlsx.js 是生成Excel的解決方案眼溶。
npm install --save file-saver xlsx
引入
在需要使用的 Vue 頁(yè)面引入悠砚。
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
實(shí)際例子
以 json 格式的對(duì)象數(shù)組導(dǎo)出 Excel 為例，編寫如下通用方法：
function exportJson2Excel (data, fileName, sheetName) {
const sheet = XLSX.utils.json_to_sheet(data)
FileSaver.saveAs(new Blob([sheet2Blob(sheet, sheetName)], { type: 'application/octet-stream;charset=utf-8' }), fileName)
}
function sheet2Blob (sheet, sheetName) {
sheetName = sheetName || 'sheet1'
const workbook = {
SheetNames: [sheetName],
Sheets: {}
}
workbook.Sheets[sheetName] = sheet
// 生成excel的配置項(xiàng)
const wopts = {
bookType: 'xlsx', // 要生成的文件類型
bookSST: false, // 是否生成Shared String Table偷仿，官方解釋是哩簿，如果開啟生成速度會(huì)下降宵蕉，但在低版本IOS設(shè)備上有更好的兼容性
type: 'binary'
}
const wbout = XLSX.write(workbook, wopts)
const blob = new Blob([string2ArrayBuffer(wbout)], { type: 'application/octet-stream' })
return blob
}
// 字符串轉(zhuǎn)ArrayBuffer
function string2ArrayBuffer (s) {
const buf = new ArrayBuffer(s.length)
const view = new Uint8Array(buf)
for (let i = 0; i < s.length; ++i) {
view[i] = s.charCodeAt(i) & 0xFF
}
return buf
}
示例調(diào)用代碼：
const jsonData = [{ 姓名: 'Tom', 年齡: 18, 身份證號(hào): '0102' }, { 姓名: '張三', 年齡: 210204199901212290, 身份證號(hào): '210204199901212290' }]
exportJson2Excel(jsonData, '示例.xlsx')
同理，一個(gè)簡(jiǎn)單的導(dǎo)入實(shí)現(xiàn)方法如下节榜，讀取Excel數(shù)據(jù)并轉(zhuǎn)換成json格式：
function importExcel2Json (file, callback) {
const reader = new FileReader()
reader.onload = function (e) {
const workbook = XLSX.read(e.target.result, { type: 'binary' })
if (callback) callback(XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], { defval: '' }))
}
reader.readAsBinaryString(file)
}
參考
本例僅使用了 XLSX 中的 json_to_sheet 方法羡玛，更多功能可參考官網(wǎng)或相關(guān)網(wǎng)站。
Xlsx
https://www.cnblogs.com/liuxianan/p/js-excel.html
https://github.com/SheetJS/sheetjs
https://github.com/DonNicoJs/vue-xlsx
http://www.reibang.com/p/6b873a26131d
FileSaver
https://blog.csdn.net/qq_30671099/article/details/104052782
