快捷導(dǎo)航

vue中使用js-xlsx導(dǎo)出excel的實(shí)現(xiàn)方法

更新時(shí)間：2022年02月14日 11:24:57 作者：江湖行騙老中醫(yī)

本文主要介紹了vue中使用js-xlsx導(dǎo)出excel的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

安裝

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;}

第二種

通過(guò)數(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');

第三種

通過(guò)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,
? ? ? ? ? ? 部門(mén): this.multipleSelection[i].department,
? ? ? ? ? ? 職務(wù)名稱(chēng): this.multipleSelection[i].titles,
? ? ? ? ? ? 檔案編號(hào):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è)對(duì)象數(shù)組并返回一個(gè)基于對(duì)象關(guān)鍵字自動(dòng)生成的“標(biāo)題”的工作表，默認(rèn)的列順序由使用Object.keys的字段的第一次出現(xiàn)確定
? ? ? //2、將數(shù)據(jù)放入對(duì)象workBook的Sheets中等待輸出
? ? ? workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(table);
?
? ? ? //3、XLSX.write() 開(kāi)始編寫(xiě)Excel表格
? ? ? //4、changeData() 將數(shù)據(jù)處理成需要輸出的格式
? ? ? FileSaver.saveAs(new Blob([this.changeData(XLSX.write(workBook, wopts))], {type: 'application/octet-stream'}), "sheetjs.xlsx")
? ? },
? ? ?changeData(s) {
?
? ? //如果存在ArrayBuffer對(duì)象(es6) 最好采用該對(duì)象
? ? if (typeof ArrayBuffer !== 'undefined') {
?
? ? ? //1、創(chuàng)建一個(gè)字節(jié)長(zhǎng)度為s.length的內(nèi)存區(qū)域
? ? ? var buf = new ArrayBuffer(s.length);
?
? ? ? //2、創(chuàng)建一個(gè)指向buf的Unit8視圖，開(kāi)始于字節(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// 跳過(guò)上面的標(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: