分享一個我的小demo:GuitHub ExcelDownload 實例下載(布局簡陋递沪,隨便看看就行),喜歡就給個star
综液,哈哈
一款慨、生成excel表格的原理
打蛇打七寸,擒賊先擒王谬莹。通過標題就可以知道檩奠,想要通過js生成excel表格桩了,首先就要繪制表格。
在這里埠戳,可以利用Html中的<table>
標簽來繪制我們所需要的excel表格樣式布局井誉。
<table id="tb" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>ID</th>
<th>姓名</td>
<th>年齡</td>
<th>座右銘</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>張三</td>
<td>18</td>
<td>走的人多了,變成了路乞而。</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>88</td>
<td>人人都有自己走的路送悔,哪條屬于自己呢?</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>81</td>
<td>走別人的路爪模,讓他沒道可走欠啤!</td>
</tr>
</tbody>
</table>
table 布局如圖
二、借助第三方excel相關(guān)的js插件進行處理
這里首先推薦使用 excel.js
包(可在github上下載js包)屋灌,利用js包生成 Blob
對象和 URL.createObjectURL()
這個方法進行后續(xù)操作洁段。
- Blob 對象表示不可變的類似文件對象的原始數(shù)據(jù)。Blob表示不一定是JavaScript原生形式的數(shù)據(jù)共郭。 File 接口基于Blob祠丝,繼承了 blob的功能并將其擴展使其支持用戶系統(tǒng)上的文件。
function sheet2blob(sheet, sheetName) {
sheetName = sheetName || 'sheet1';
var workbook = {
SheetNames: [sheetName],
Sheets: {}
};
workbook.Sheets[sheetName] = sheet; // 生成excel的配置項
var wopts = {
bookType: 'xlsx', // 要生成的文件類型
bookSST: false, // 是否生成Shared String Table除嘹,官方解釋是写半,如果開啟生成速度會下降,但在低版本IOS設(shè)備上有更好的兼容性
type: 'binary'
};
var wbout = XLSX.write(workbook, wopts);
var blob = new Blob([s2ab(wbout)], {
type: "application/octet-stream"
}); // 字符串轉(zhuǎn)ArrayBuffer
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
return blob;
}
- URL.createObjectURL() 靜態(tài)方法會創(chuàng)建一個 DOMString尉咕,其中包含一個表示參數(shù)中給出的對象的URL叠蝇。這個 URL 的生命周期和創(chuàng)建它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象年缎。
三悔捶、獲取table內(nèi)容,生成xls格式的字符串
var table = document.querySelector("#tb");
var sheet = XLSX.utils.table_to_sheet(table); //將一個table對象轉(zhuǎn)換成一個sheet對象
最后通過點擊事件即可下載单芜!
function btn_export() {
var table = document.querySelector("#tb");
var sheet = XLSX.utils.table_to_sheet(table); //將一個table對象轉(zhuǎn)換成一個sheet對象
openDownloadDialog(sheet2blob(sheet), 'excel.xlsx');//文件名稱
}
實例截圖
打開后的內(nèi)容
這個小demo是在完成公司項目時經(jīng)歷的蜕该,其中有個需求就是涉及到excel表格的下載,也在網(wǎng)上看了很多案例和文檔完成的洲鸠,畢竟眾人拾柴火焰高嘛堂淡。