vue 使用 xlsx 導出excel

1. 安裝

npm i xlsx

2. 引用

  import XLSX from 'xlsx'

3. 導出

   傳入table節點：

		let xlsxParam = { raw: true }
        let wb = XLSX.utils.table_to_book(document.querySelector('#id'), xlsxParam)
        let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '表.xlsx')
     

FileSaver是我引入的包,爲了保存文件,當然也可以使用瀏覽器的saveAs()。

 npm install file-saver --save

傳入數據對象：
let fields = [“姓名”, “性別”, “年齡”, “住址”] // 表頭，因爲我們不可能用漢字做鍵值吧
let workBook = XLSX.utils.json_to_sheet(arr); // arr 數組對象
const range = XLSX.utils.decode_range(workBook[’!ref’]) //獲取工作表的有效範圍，可操作的二位數組
for(let c = range.s.c; c <= range.e.c; c++) {
const header = XLSX.utils.encode_col© + ‘1’ //某列第一行， 就是表頭單元
workBook[header].v = fields[c] //設置表頭單元格文字
}
let wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, workBook, “rain”);
XLSX.writeFile(wb, “xx.xlsx”);

還有更多操作遇到再說。。。。