vue中使用js-xlsx導出excel的實現方法
更新時間:2022年02月14日 11:24:57 作者:江湖行騙老中醫(yī)
本文主要介紹了vue中使用js-xlsx導出excel的實現方法,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
安裝
npm install --save xlsx file-saver
在組件里面引入
import FileSaver from 'file-saver' import XLSX from 'xlsx'
第一種
其中#outTable是在el-table上定義的id
exportExcel() {
? ? ? var xlsxParam = { raw: true };//轉換成excel時,使用原始的格式
? ? ? var wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);//outTable為列表id
? ? ? var wbout = XLSX.write(wb, {
? ? ? ? bookType: "xlsx",
? ? ? ? bookSST: true,
? ? ? ? type: "array"
? ? ? });
? ? ? try {
? ? ? ? FileSaver.saveAs(
? ? ? ? ? new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
? ? ? ? ? "sheetjs.xlsx"
? ? ? ? );
? ? ? } catch (e) {
? ? ? ? if (typeof console !== "undefined") console.log(e, wbout);
? ? ? }
? ? ? return wbout;}第二種
通過數組導出excel
var _data = [ ? ? ? ? ? [ "id", ? ?"name", "value" ], ? ? ? ? ? [ ? ?1, "sheetjs", ? ?7262 ], ? ? ? ? ? [ ? ?2, "js-xlsx", ? ?6969 ] ? ? ? ? ]; ? ? ? const ws= XLSX.utils.aoa_to_sheet(_data); ? ? ? ? /* generate workbook and add the worksheet */ ? ? ? const wb = XLSX.utils.book_new(); ? ? ? XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); ? ? ? ? /* save to file */ ? ? ? XLSX.writeFile(wb, 'SheetJS.xlsx');
第三種
通過json導出excel
exportExcel() {var wopts = {
? ? ? ? bookType: 'xlsx',
? ? ? ? bookSST: true,
? ? ? ? type: 'binary'
? ? ? };
? ? ? var workBook = {
? ? ? ? SheetNames: ['Sheet1'],
? ? ? ? Sheets: {},
? ? ? ? Props: {}
? ? ? };
? ? ? var table = [];
? ? ? ? for(var i=0;i<this.multipleSelection.length;i++){
? ? ? ? ? var params = {
? ? ? ? ? ? 姓名: this.multipleSelection[i].name,
? ? ? ? ? ? 部門: this.multipleSelection[i].department,
? ? ? ? ? ? 職務名稱: this.multipleSelection[i].titles,
? ? ? ? ? ? 檔案編號:this.multipleSelection[i].fileNum,
? ? ? ? ? ? 校驗狀態(tài):this.multipleSelection[i].verifyStatus,
? ? ? ? ? ? 審核狀態(tài):this.multipleSelection[i].checkedStatus,
? ? ? ? ? ? 備注:this.multipleSelection[i].checkedReason,
? ? ? ? ? }
? ? ? ? ? table[i] = params
? ? ? };
? ? ? //1、XLSX.utils.json_to_sheet(data) 接收一個對象數組并返回一個基于對象關鍵字自動生成的“標題”的工作表,默認的列順序由使用Object.keys的字段的第一次出現確定
? ? ? //2、將數據放入對象workBook的Sheets中等待輸出
? ? ? workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(table);
?
? ? ? //3、XLSX.write() 開始編寫Excel表格
? ? ? //4、changeData() 將數據處理成需要輸出的格式
? ? ? FileSaver.saveAs(new Blob([this.changeData(XLSX.write(workBook, wopts))], {type: 'application/octet-stream'}), "sheetjs.xlsx")
? ? },
? ? ?changeData(s) {
?
? ? //如果存在ArrayBuffer對象(es6) 最好采用該對象
? ? if (typeof ArrayBuffer !== 'undefined') {
?
? ? ? //1、創(chuàng)建一個字節(jié)長度為s.length的內存區(qū)域
? ? ? var buf = new ArrayBuffer(s.length);
?
? ? ? //2、創(chuàng)建一個指向buf的Unit8視圖,開始于字節(jié)0,直到緩沖區(qū)的末尾
? ? ? var view = new Uint8Array(buf);
?
? ? ? //3、返回指定位置的字符的Unicode編碼
? ? ? for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
? ? ? return buf;
?
? ? } else {
? ? ? var buf = new Array(s.length);
? ? ? for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
? ? ? return buf;
? ? }
? },第三種適合導出選中的數據如果選中的json數據字段都是你需要的可以用下面的方法導出
const workSheet = XLSX.utils.json_to_sheet(this.multipleSelection, {
? ? header: ['列1', '列2', '列3', '列1', '列2', '列3', '列1', '列2'], skipHeader: true// 跳過上面的標題行 ?
? });
? const ws = XLSX.utils.aoa_to_sheet(workSheet);
? const wb = XLSX.utils.book_new();
? XLSX
? .utils.book_append_sheet(wb, ws, 'Sheet1');/* save to file */
? XLSX
? .writeFile(wb, 'SheetJS.xlsx');到此這篇關于vue中使用js-xlsx導出excel的實現方法的文章就介紹到這了,更多相關vue js-xlsx導出excel 內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue excel上傳預覽和table內容下載到excel文件中
這篇文章主要介紹了vue excel上傳預覽和table內容下載到excel文件中,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
Vue + Node.js + MongoDB圖片上傳組件實現圖片預覽和刪除功能詳解
這篇文章主要介紹了Vue + Node.js + MongoDB圖片上傳組件實現圖片預覽和刪除功能,結合實例形式詳細分析了Vue + Node.js + MongoDB基于圖片上傳組件實現圖片預覽和刪除功能相關操作技巧,需要的朋友可以參考下2020-04-04
Vue2 Element el-table多選表格控制選取的思路解讀
這篇文章主要介紹了Vue2 Element el-table多選表格控制選取的思路解讀,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07
vue使用require.context實現動態(tài)注冊路由
這篇文章主要介紹了vue使用require.context實現動態(tài)注冊路由的方法,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-12-12

