vue中使用js-xlsx導(dǎo)出excel的實(shí)現(xiàn)方法
安裝
npm install --save xlsx file-saver
在組件里面引入
import FileSaver from 'file-saver' import XLSX from 'xlsx'
第一種
其中#outTable是在el-table上定義的id
exportExcel() { ? ? ? var xlsxParam = { raw: true };//轉(zhuǎn)換成excel時(shí),使用原始的格式 ? ? ? 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;}
第二種
通過數(shù)組導(dǎo)出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導(dǎo)出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, ? ? ? ? ? ? 職務(wù)名稱: this.multipleSelection[i].titles, ? ? ? ? ? ? 檔案編號:this.multipleSelection[i].fileNum, ? ? ? ? ? ? 校驗(yàn)狀態(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) 接收一個(gè)對象數(shù)組并返回一個(gè)基于對象關(guān)鍵字自動生成的“標(biāo)題”的工作表,默認(rèn)的列順序由使用Object.keys的字段的第一次出現(xiàn)確定 ? ? ? //2、將數(shù)據(jù)放入對象workBook的Sheets中等待輸出 ? ? ? workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(table); ? ? ? ? //3、XLSX.write() 開始編寫Excel表格 ? ? ? //4、changeData() 將數(shù)據(jù)處理成需要輸出的格式 ? ? ? 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)建一個(gè)字節(jié)長度為s.length的內(nèi)存區(qū)域 ? ? ? var buf = new ArrayBuffer(s.length); ? ? ? ? //2、創(chuàng)建一個(gè)指向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; ? ? } ? },
第三種適合導(dǎo)出選中的數(shù)據(jù)如果選中的json數(shù)據(jù)字段都是你需要的可以用下面的方法導(dǎo)出
const workSheet = XLSX.utils.json_to_sheet(this.multipleSelection, { ? ? header: ['列1', '列2', '列3', '列1', '列2', '列3', '列1', '列2'], skipHeader: true// 跳過上面的標(biāo)題行 ? ? }); ? 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');
到此這篇關(guān)于vue中使用js-xlsx導(dǎo)出excel的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)vue js-xlsx導(dǎo)出excel 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue excel上傳預(yù)覽和table內(nèi)容下載到excel文件中
這篇文章主要介紹了vue excel上傳預(yù)覽和table內(nèi)容下載到excel文件中,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12Vue + Node.js + MongoDB圖片上傳組件實(shí)現(xiàn)圖片預(yù)覽和刪除功能詳解
這篇文章主要介紹了Vue + Node.js + MongoDB圖片上傳組件實(shí)現(xiàn)圖片預(yù)覽和刪除功能,結(jié)合實(shí)例形式詳細(xì)分析了Vue + Node.js + MongoDB基于圖片上傳組件實(shí)現(xiàn)圖片預(yù)覽和刪除功能相關(guān)操作技巧,需要的朋友可以參考下2020-04-04vue純前端實(shí)現(xiàn)將頁面導(dǎo)出為pdf和word文件
這篇文章主要為大家詳細(xì)介紹了vue如何通過純前端實(shí)現(xiàn)將頁面導(dǎo)出為pdf和word文件,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2024-01-01Vue2 Element el-table多選表格控制選取的思路解讀
這篇文章主要介紹了Vue2 Element el-table多選表格控制選取的思路解讀,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07vue使用require.context實(shí)現(xiàn)動態(tài)注冊路由
這篇文章主要介紹了vue使用require.context實(shí)現(xiàn)動態(tài)注冊路由的方法,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-12-12解決vue項(xiàng)目刷新后,導(dǎo)航菜單高亮顯示的位置不對問題
今天小編就為大家分享一篇解決vue項(xiàng)目刷新后,導(dǎo)航菜單高亮顯示的位置不對問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11