『壹』 【前端】有如此利器，Excel導出體驗就是好
Excel導出是程序開發中的高頻需求，尤其是在報表統計中。Excel導出不難實現，其關鍵在於如何解決數據量大時的性能問題。
相對PHP而言，Java可能在此方面處理得比較好，這也許也是easyExcel如此受歡迎的原因。
那PHP就只能這樣？NO、NO、NO！單獨不行，還不會請個幫手嗎？嗯嗯，這個幫手就是SheetJS。Github地址：https://github.com/SheetJS/js-xlsx
SheetJS是一個由Javascript開發的插件，能進行Excel導出和導入。SheetJS支持CVS、XLS等格式，既可以利用tableDOM（即根據頁面table）生成Excel，也可以利用JsonData生成Excel。SheetJS簡直是處理Excel的神器，PHP配SheetJS簡直如虎添翼。
安裝SheetJS有如下幾種方式：
1、直接引用js文件
2、使用npm
3、使用bower
SheetJS導出Excel，有以下幾種途徑：
1、從html標簽table生成Excel：table_to_sheet
2、從json數據生成Excel：json_to_sheet
3、從array數組生成Excel：aoa_to_sheet
以上都是我們常用的一些功能，但SheetJS能做的遠遠不止這些。SheetJS減輕了後端的負擔，讓Excel處理更加容易，這才是其魅力所在。
『貳』 這一定是前端Excel導出的天花板~
前端導出 Excel 的方案有很多，但是能夠導出一份專業的 Excel 表格很少，本文將介紹一款導出 Excel 表格界的天花板，能夠滿足 99.99% 的業務需求，直呼 yyds !
xlsx 是前端最熱門的 Excel 導出方案，又叫做 SheetJS ，默認不支持修改 Excel 的樣式。
若在工作業務需求上需要修改 Excel 的樣式的話需要使用該作者的付費版本。或者使用 xlsx-style ，但使用起來非常麻煩，需要修改 node_moles 源碼，而且作者最近的提交的版本也在 6 年前，不建議使用。
exceljs 是一款可導出，可讀取的 Excel 操作工具，可以實現樣式的修改以及 Excel 的高級功能，是非常值得推薦的一個處理 Excel 的庫，而 exceljs 也是本文介紹的主角！
exceljs 同於寫入 Excel，file-sever 用於保存到本地文件。
保存文件本地我們還需要 file-saver 的輔助
當你能夠寫出 第一行 Hello ExcelJS 的時候也就意味著你已經可以上手 exceljs 了。
我們一般把每列的第一個設置為表頭，並且可以設置每一列的寬度。
表頭設置後，我們可以直接根據 key 值去添加每一行的數據。
getColumn 用於讀取當前列的數據，我們可以使用 eachCell 進行遍歷單元格。
getRow 用於讀取每一樣，同樣我們可以使用 exchCell 進行遍歷單元格
我們將讀取到的表頭添加一些樣式，讓 Excel 變得看起來更加的好看。
單元格已經成功的添加上了樣式，只不過表格中第一行的所有的單元格都被添加上樣式了，當然這肯定不是我們想要的。
這個時候我們可以使用 eachCell 來遍歷單元格，給每一個單元格添加上樣式。
在很多的時候我們需要對表格中每一列的數據進行篩選，比如直接篩選班級，我們可以通過 autoFilter 來添加篩選。
表格的合並應該是業務需求中最頻繁的功能。當然這一功能使用 xlsx 也可以實現，前提是你的項目對表格沒有復雜的需求。
我們可以直接對表格中的數據進行公式計算，比如 求和(SUM) ， 平均數(AVERAGE) 等等。
有時候我們需要為某個單元格添加數據可以方便直接下拉選擇指定的值。
我們可以為指定單元格添加數據驗證，比如為不及格的分數添加紅色背景。
以上介紹的內容僅僅是 exceljs 的冰山一角，能夠滿足一些基本的對 Excel 有著美化的業務需求。
在官方的文檔裡面，還有更多好的用、專業的功能，以及讀取表格等非常強大的功能需要你去探索。
ExcelJS 中文文檔 https://github.com/exceljs/exceljs/blob/master/README_zh.md
『叄』 關於前端如何導出後台傳來的excel介面
題主所說的導出指的是讓前端去下載後台的Excel還時還要有其他操作呢？
如果單純去下載，可以基於XMLHttpRequest請求，請求一個伺服器或者後端的Excel文件，然後設置responseType為blob二進制流來傳輸。例如：
var excelFilePath = 'resources/Excel/importExcel.xlsx';
var xhr = new XMLHttpRequest();
xhr.open('GET', excelFilePath, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
var blob = this.response;
}
之後onload裡面的blob就是這個Excel文件的二進制流，接下來只要將blob轉成文件進行下載就可以了，JS中有很多開源的第三方類庫可以做到，例如filesaver。如果是用filesaver的話，調用其中的saveAs方法就可以將該blob轉成對應文件進行下載
例如
var fileName = "test.xlsx"
saveAs(blob, fileName);
把上述方法加到onload 方法中，前端就會下載一個名為test.xlsx的Excel文件，內容就是後端傳過來的Excel
如果還要有其他操作例如展示或者在線的編輯，就需要一些第三方控制項來完成了，比如SpreadJS
上述的方法也是在他們的官方論壇中學到的，參考網址：
網頁鏈接
『肆』 前端表格導出轉化excel
var xlsxParam = { raw: true }; //轉換成excel時，使用原始數據
var wb = XLSX.utils.table_to_book(
document.querySelector("#outTable"),
xlsxParam
);
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
"職代會管理.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
『伍』 怎麼把html導出到excel表格
把html導出成txt文件，然後再把txt文件導入Excel：
1、首先，打開excel，選擇數據選項卡，自文本選項。
2、在彈出的資源管理器界面選擇存放好的txt文件後，點擊打開按鈕。
3、此時彈出文本導入向導，由於我的數字是以空格為分隔字元的，所以我選擇分隔符號，當然，如果你的文本是固定寬度，你可以選擇第二個。然後點擊下一步按鈕。
4、勾選空格，檢驗預覽數據是否和自己預想的一致。一致後繼續點擊下一步按鈕。
5、查看預覽效果。並選擇列數據格式，此處沒什麼特別要求，建議選擇常規，常規也是excel默認的格式。點擊完成。
6、在彈出的對話框中，選中要導入的數據區域，此處我要導入到當前單元格，並且從a1單元格開始，因此我選擇a1單元格，多餘的數據會自動以此單元格向兩邊張開。點擊確定按鈕
我們的數據就算是完美的導入進來了。
『陸』 Vue 純前端導出Excel
實際開發，遇到要求只在前端進行導出Excel文件的需求，而非調用介面形式。
npm 命令行如下：
也可以使用 cnpm :
如圖：
文件資源路徑：
按鈕使用 ：
封裝成公共的方法 ：
如圖：
『柒』 前端怎麼導出後台生成的excel
導出不是前端能搞定的，比如jsp頁面上點擊按鈕，先要在後台生成數據，然後jsp頁面彈出下載窗口，點選路徑就保存到本地計算機了。
『捌』 如何連接資料庫開發一個前端一鍵導出報表的工具
ActiveXObject的導出方式
方法一ActiveXObject的導出方式
方法三：支持瀏覽器適配的導出方式(IE+其他瀏覽器)
方法四：以Table格式導為xls文件
方法五：導出為CSV格式[高效推薦]
現在企業的報表開發大部分都使用報表工具完成,成熟的報表工具提供了豐富的顯示設置、圖表類型、導出列印等功能可以簡化報表開發,非常方便。
『玖』 vue項目中如何把表格導出excel表格
有一個項目需求，要求在前端項目中導出Excel表格，經過查找代碼,Vue.js確實可以實現，具體實現步驟為：
1. 安裝依賴
//npm npm install -S file-saver xlsx
npm install -D script-loader
或者
//yarnyarn add file-saver
yarn add xlsx
yarn add script-loader --dev
2.導入兩個JS
下載Blob.js和Export2Excel.js，在src目錄下新建Excel文件夾，裡面放入Blob.js和Export2Excel.js兩個JS文件
image
**3.在main.js引入這兩個JS文件 **
import Blob from './excel/Blob'import Export2Excel from './excel/Export2Excel.js'
4.在組件中使用
//導出的方法exportExcel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../excel/Export2Excel');
const tHeader = ['序號', '昵稱', '姓名'];
// 上面設置Excel的表格第一行的標題
const filterVal = ['index', 'nickName', 'name'];
// 上面的index、nickName、name是tableData里對象的屬性
const list = this.tableData; //把data里的tableData存到list
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '列表excel');
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
tHeader是表頭，filterVal 中的數據是表格的欄位，tableData中存放表格里的數據，類型為數組，裡面存放對象，表格的每一行為一個對象。
tableData 中的值為：
data () {
return {
tableData: [
{'index':'0',"nickName": "沙灘擱淺我們的舊時光", "name": "小明"},
{'index':'1',"nickName": "女人天生高貴", "name": "小紅"},
{'index':'2',"nickName": "海是彩色的灰塵", "name": "小蘭"}
]
}
}
最後實現的效果圖：
image
如果運行時，報如下所示的錯誤：
image
這是因為Export2Excel.js的設置需要改下：
image
註： 把require('script-loader!vendor/Blob')改為 require('./Blob.js')
demo 地址：https://github.com/dt8888/exportExcel
『拾』 asp.net怎樣利用ajax將前端數據導出為excel
導出Excel，需要Ajax服務端響應的頭為application/x-excel，從而確保瀏覽器能夠以Excel文件進行下載。
你可以把Ajax請求的服務端為httphandler，不要請求Aasp.net頁面，以免你在調試的過程中出現問題。