表格導出分為靜態導出與動態導出。

靜態導出是將當前已經渲染的表格項導出為指定的格式，可為.xls或.cvs。這種導出無需后端支撐，完全由前端實現。

動態導出是通過將參數傳與后端接口，該接口負責生成Blob或物理文件，并在Blob或物理文件路徑返回后，由前端進行導出。

準備工作

無論用哪種方式進行導出，前端都需要準備一下觸發器。

我們通常使用a標簽的download標簽來實現，十分簡易。

// 然后通過a標簽的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);

};

復制代碼

靜態導出

靜態導出本質上是拼接字符串，只不過特別的是這些字符串符合了.xls, .cvs文件的解析規則。

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

html格式字符串

// 通過當前表格展示數據生成一組類似于下面的html string

var exportHTML = `

姓名性別年齡

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

`;

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

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

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

復制代碼

執行原理

生成table html string

通過btoa轉換為base64編碼

拼接指定data類型的url

通過a標簽觸發下載

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

以逗號分割的字符串

// 需要通過當前表格展示數據生成一組以逗號分割的字符串。

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()函數進行下載

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

復制代碼

執行原理

生成以逗號分割的字符串

通過encodeURIComponent轉義編碼

拼接指定data類型的url

通過a標簽觸發下載

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

動態導出

動態導出需要后端提供接口，并根據接口返回不同的數據進行導出。

文件路徑

var getHref = () => {

// 我們假設現在有一個/download接口，該接口返回了文件地址

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

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

};

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

復制代碼

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

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

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

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

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

當然是文件流了。

文件流

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

var getBlog = () => {

// 我們假設現在有一個/download接口，該接口返回了文件流

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

return blob;

}

// 為防止返回數據不可用，驗證一下

var blog = getBlog();

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

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

var url = URL.createObjectURL(blob);

// 進行下載

dispatchDownload('花名冊', url);

}

復制代碼

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

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

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

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

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

關于找一找教程網

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

本站提供了軟件編程、網站開發技術、服務器運維、人工智能等等IT技術文章，希望廣大程序員努力學習，讓我們用科技改變世界。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。