表格導(dǎo)出分為靜態(tài)導(dǎo)出與動態(tài)導(dǎo)出。

靜態(tài)導(dǎo)出是將當(dāng)前已經(jīng)渲染的表格項導(dǎo)出為指定的格式，可為.xls或.cvs。這種導(dǎo)出無需后端支撐，完全由前端實現(xiàn)。

動態(tài)導(dǎo)出是通過將參數(shù)傳與后端接口，該接口負(fù)責(zé)生成Blob或物理文件，并在Blob或物理文件路徑返回后，由前端進行導(dǎo)出。

準(zhǔn)備工作

無論用哪種方式進行導(dǎo)出，前端都需要準(zhǔn)備一下觸發(fā)器。

我們通常使用a標(biāo)簽的download標(biāo)簽來實現(xiàn)，十分簡易。

// 然后通過a標(biāo)簽的download進行下載

var dispatchDownload = (fileName, href) => {

var a = document.createElement('a');

a.addEventListener('click', () => {

a.download = fileName;

a.href = href;

});

var e = document.createEvent('MouseEvents');

e.initEvent('click', false, false);

a.dispatchEvent(e);

};

復(fù)制代碼

靜態(tài)導(dǎo)出

靜態(tài)導(dǎo)出本質(zhì)上是拼接字符串，只不過特別的是這些字符串符合了.xls, .cvs文件的解析規(guī)則。

什么格式的字符串會被解析為正確的文件？我在GridManager中先后嘗試了兩種方式。

html格式字符串

// 通過當(dāng)前表格展示數(shù)據(jù)生成一組類似于下面的html string

var exportHTML = `

姓名性別年齡

張三男22李四男23王五女24趙六女22

`;

var href = `data:application/vnd.ms-excel;base64,${window.btoa(unescape(encodeURIComponent(exportHTML || '')))}`;

// 通過事先聲明的dispatchDownload()函數(shù)進行下載

dispatchDownload('花名冊.xls', href);

復(fù)制代碼

執(zhí)行原理

生成table html string

通過btoa轉(zhuǎn)換為base64編碼

拼接指定data類型的url

通過a標(biāo)簽觸發(fā)下載

使用這種方式存在導(dǎo)出文件無單元格分割線的問題，所以在GridManager v2.10.5版本中已經(jīng)將該方式用 以逗號分割的字符串 方式替換。

以逗號分割的字符串

// 需要通過當(dāng)前表格展示數(shù)據(jù)生成一組以逗號分割的字符串。

var exportStr = `姓名,性別,年齡\r\n張三,男,22\r\n李四,男,23\r\n王五,女,24\r\n趙六,女,22`;

// .cvs: data:text/csv, .xls: application/vnd.ms-excel

var href = `data:application/vnd.ms-excel;charset=utf-8,\ufeff${encodeURIComponent(exportStr)}`;

// 通過事先聲明的dispatchDownload()函數(shù)進行下載

dispatchDownload('花名冊.xls', href);

復(fù)制代碼

執(zhí)行原理

生成以逗號分割的字符串

通過encodeURIComponent轉(zhuǎn)義編碼

拼接指定data類型的url

通過a標(biāo)簽觸發(fā)下載

注意: 以上兩種方式都屬于純前端操作，所導(dǎo)出的文件并非真實文件，在打開時會要求進行來源確認(rèn)。

動態(tài)導(dǎo)出

動態(tài)導(dǎo)出需要后端提供接口，并根據(jù)接口返回不同的數(shù)據(jù)進行導(dǎo)出。

文件路徑

var getHref = () => {

// 我們假設(shè)現(xiàn)在有一個/download接口，該接口返回了文件地址

// http.get('/download'); // 假裝調(diào)了下接口

return 'http://develop.lovejavascript.com/test.xlsx';

};

dispatchDownload('花名冊', getHref());

復(fù)制代碼

這種方式對前端來言最為簡易，只需調(diào)用接口并將接口返回的url通過a標(biāo)簽進行下載即可。

但是使用這種方式，后端需要在服務(wù)器上生成真實的文件。

前端是簡單了，但后端不僅需要提供文件服務(wù)，還需要對生成的文件進行定期清理。

所以，后端小哥一般不會喜歡這種方式。

那么，后端小哥喜歡什么？

當(dāng)然是文件流了。

文件流

對于后端返回的文件流，前端使用Blob方式進行導(dǎo)出。在調(diào)用后端接口時，需要指定request headers: {responseType: 'blob'}

var getBlog = () => {

// 我們假設(shè)現(xiàn)在有一個/download接口，該接口返回了文件流

// http.get('/download', headers: {responseType: 'blob'}); // 假裝調(diào)了下接口

return blob;

}

// 為防止返回數(shù)據(jù)不可用，驗證一下

var blog = getBlog();

if (Object.getPrototypeOf(blob) === Blob.prototype) {

// 通過URL.createObjectURL()將Blob轉(zhuǎn)換為URL。這個新的URL對象表示指定的File對象或Blob對象。

var url = URL.createObjectURL(blob);

// 進行下載

dispatchDownload('花名冊', url);

}

復(fù)制代碼

使用這種方式，對于前端來說也沒有什么工作量。

而且對于后端也無需創(chuàng)建物理文件，僅需生成文件流并將流返回。

在發(fā)送請求時所指定的headers: {responseType: 'blob'}，僅是告訴瀏覽器前端所期望獲取到的返回格式，對于后端來說無需特殊處理。

最后，推薦一個表格組件GridManager。

以上導(dǎo)出的四種方式，可以到組件源碼進行查看。

關(guān)于找一找教程網(wǎng)

本站文章僅代表作者觀點，不代表本站立場，所有文章非營利性免費分享。

本站提供了軟件編程、網(wǎng)站開發(fā)技術(shù)、服務(wù)器運維、人工智能等等IT技術(shù)文章，希望廣大程序員努力學(xué)習(xí)，讓我們用科技改變世界。

[表格導(dǎo)出功能實踐]http://www.zyiz.net/tech/detail-100305.html

總結(jié)

以上是生活随笔為你收集整理的java导出表功能_表格导出功能实践的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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