記錄一下近期使用js-xlsx的一些經(jīng)驗

真正的.xls\.xlsx文件，就算是空白的其實是包含了一些內(nèi)容的

所以并不能直接像寫入txt一樣直接搞一個file往里面把數(shù)據(jù)寫入就完了

現(xiàn)在網(wǎng)上查得到導出excel的一些方法：

1、在IE上使用ActiveXObject導出文件

由于我們客戶端是基于chorme的，所以沒有做嘗試

2、導出csv文件

如果是比較簡單的表格(沒有表格單元格合并等需求)，其實csv文件也是一個不錯的選擇(當然前提是你不介意這個文件是csv文件)。需求比較介意，所以沒有對csv進行嘗試

3、導出偽.xls\.xlsx文件

①對html代碼進行格式化，最后生成一串uri文件鏈接，再通過標簽進行下載

//let uri = 'data:application/vnd.ms-excel;base64,'

//let template =

//'

//'xmlns:x="urn:schemas-microsoft-com:office:excel" ' +

//'xmlns="http://www.w3.org/TR/REC-html40">

' +

//'

'

//let base64 = (s: any) => {

//return window.btoa(unescape(encodeURIComponent(s)))

//}

//let format = (s: any, c: any) => {

//return s.replace(/{(\w+)}/g, (m: any, p: any) => {

//return c[p]

//})

//}

//let tableHTML = table[0].innerHTML + table[1].innerHTML

//let ctx = {

//worksheet: '統(tǒng)計',

//table: tableHTML.replace(//g, '') // 篩選掉

//}

//let downloadLink = document.createElement('a')

//downloadLink.href = uri + base64(format(template, ctx))

//downloadLink.download = '成績統(tǒng)計.xls'

//downloadLink.click()

這種大概可以保留行內(nèi)樣式，比如字體顏色、字體粗細等，但是對單元格格式進行控制(有些全數(shù)字的字符串過長會被識別成科學計數(shù)法)，網(wǎng)上很多說可以用style="mso-number-format:\\@;"，嘗試了之后并不可行

②當然還有一種是可以不用對html進行格式化

因為excel可以識別html代碼，可以跳過方法①中對html進行格式化的步驟，直接將html導出

　　//避免中文亂碼

標題1標題2標題3標題4

內(nèi)容1	內(nèi)容2	內(nèi)容3	內(nèi)容4

excel也可以展示出來效果，但是打開之前會提示文件格式和擴展名不匹配，也就是說，這只是一個披著.xls擴展名的html文件，所以它連基本的單元格邊框都沒有，除非你在table里寫上border="1"

③另外還有一種，更簡單，直接

以上三種方法生成的全是偽xls，因為他們沒有excel文件里那7kb內(nèi)容，所以就算拓展名改成.xls\.xlsx，也只是一個假的文件

4、使用js-xlsx庫，實現(xiàn)真正的.xls\.xlsx導出

參考https://github.com/SheetJS/js-xlsx

①安裝

npm install xlsx

或者

bower install js-xlsx

②導入

官方github上有給各種框架的demo：

可以根據(jù)項目框架選擇導入方式，這里是vue：

import XLSX from 'xlsx'

③使用

let workbook =XLSX.utils.table_to_book(wholeTable)

let xls=XLSX.write(workbook, {

bookType:'xls', //生成的文件格式

bookSST: false, //是否生成Shared String Table，官方解釋是，如果開啟生成速度會下降，但在低版本IOS設(shè)備上有更好的兼容性

type: 'base64', //編碼方式

})

這里xlsx提供了多種方法：

寫入：

aoa_to_sheet將JS數(shù)組的數(shù)組([ [...],[...],[...] ])轉(zhuǎn)換為工作表

json_to_sheet將json對象數(shù)組轉(zhuǎn)換為工作表

table_to_sheet將DOM TABLE元素轉(zhuǎn)換為工作表

sheet_add_aoa將JS數(shù)據(jù)數(shù)組添加到現(xiàn)有工作表中

sheet_add_json將json對象數(shù)組添加到現(xiàn)有工作表中

讀取：

sheet_to_json將工作表對象轉(zhuǎn)換為JSON對象數(shù)組

sheet_to_csv將工作表轉(zhuǎn)換成csv

sheet_to_txt生成UTF16格式的文本

sheet_to_html生成HTML輸出

sheet_to_formulae生成公式列表(具有值回退)

單元格和單元格地址操作：

format_cell生成單元格的文本值(使用數(shù)字格式)

encode_row / decode_row在0索引行和1索引行之間轉(zhuǎn)換

encode_col / decode_col在0索引列和列名之間進行轉(zhuǎn)換

encode_cell / decode_cell轉(zhuǎn)換單元格地址

encode_range / decode_range轉(zhuǎn)換細胞范圍

可以說是肥腸強大了

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的js导出的xlsx无法打开_js-xlsx实现文件导出、下载（excel）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。