詳解如何在Vue項(xiàng)目中導(dǎo)出Excel

import('@/vendor/Export2Excel').then(excel => {
 excel.export_json_to_excel({
 header: tHeader, //表頭 必填
 data, //具體數(shù)據(jù) 必填
 filename: 'excel-list', //非必填, 導(dǎo)出文件的名字
 autoWidth: true, //非必填, 導(dǎo)出文件的排列方式
 bookType: 'xlsx' //非必填, 導(dǎo)出文件的格式
 })
})

require('script-loader!file-saver');
import XLSX from 'xlsx'

function generateArray(table) {
 var out = [];
 var rows = table.querySelectorAll('tr');
 var ranges = [];
 for (var R = 0; R < rows.length; ++R) {
 var outRow = [];
 var row = rows[R];
 var columns = row.querySelectorAll('td');
 for (var C = 0; C < columns.length; ++C) {
 var cell = columns[C];
 var colspan = cell.getAttribute('colspan');
 var rowspan = cell.getAttribute('rowspan');
 var cellValue = cell.innerText;
 if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;

 //Skip ranges
 ranges.forEach(function (range) {
 if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
 for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
 }
 });

 //Handle Row Span
 if (rowspan || colspan) {
 rowspan = rowspan || 1;
 colspan = colspan || 1;
 ranges.push({
 s: {
 r: R,
 c: outRow.length
 },
 e: {
 r: R + rowspan - 1,
 c: outRow.length + colspan - 1
 }
 });
 };

 //Handle Value
 outRow.push(cellValue !== "" ? cellValue : null);

 //Handle Colspan
 if (colspan)
 for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
 }
 out.push(outRow);
 }
 return [out, ranges];
};

function datenum(v, date1904) {
 if (date1904) v += 1462;
 var epoch = Date.parse(v);
 return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}

function sheet_from_array_of_arrays(data, opts) {
 var ws = {};
 var range = {
 s: {
 c: 10000000,
 r: 10000000
 },
 e: {
 c: 0,
 r: 0
 }
 };
 for (var R = 0; R != data.length; ++R) {
 for (var C = 0; C != data[R].length; ++C) {
 if (range.s.r > R) range.s.r = R;
 if (range.s.c > C) range.s.c = C;
 if (range.e.r < R) range.e.r = R;
 if (range.e.c < C) range.e.c = C;
 var cell = {
 v: data[R][C]
 };
 if (cell.v == null) continue;
 var cell_ref = XLSX.utils.encode_cell({
 c: C,
 r: R
 });

 if (typeof cell.v === 'number') cell.t = 'n';
 else if (typeof cell.v === 'boolean') cell.t = 'b';
 else if (cell.v instanceof Date) {
 cell.t = 'n';
 cell.z = XLSX.SSF._table[14];
 cell.v = datenum(cell.v);
 } else cell.t = 's';

 ws[cell_ref] = cell;
 }
 }
 if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
 return ws;
}

function Workbook() {
 if (!(this instanceof Workbook)) return new Workbook();
 this.SheetNames = [];
 this.Sheets = {};
}

function s2ab(s) {
 var buf = new ArrayBuffer(s.length);
 var view = new Uint8Array(buf);
 for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
 return buf;
}

export function export_table_to_excel(id) {
 var theTable = document.getElementById(id);
 var oo = generateArray(theTable);
 var ranges = oo[1];

 /* original data */
 var data = oo[0];
 var ws_name = "SheetJS";

 var wb = new Workbook(),
 ws = sheet_from_array_of_arrays(data);

 /* add ranges to worksheet */
 // ws['!cols'] = ['apple', 'banan'];
 ws['!merges'] = ranges;

 /* add worksheet to workbook */
 wb.SheetNames.push(ws_name);
 wb.Sheets[ws_name] = ws;

 var wbout = XLSX.write(wb, {
 bookType: 'xlsx',
 bookSST: false,
 type: 'binary'
 });

 saveAs(new Blob([s2ab(wbout)], {
 type: "application/octet-stream"
 }), "test.xlsx")
}

export function export_json_to_excel({
 multiHeader = [],
 header,
 data,
 filename,
 merges = [],
 autoWidth = true,
 bookType = 'xlsx'
} = {}) {
 /* original data */
 filename = filename || 'excel-list'
 data = [...data]
 data.unshift(header);

 for (let i = multiHeader.length - 1; i > -1; i--) {
 data.unshift(multiHeader[i])
 }

 var ws_name = "SheetJS";
 var wb = new Workbook(),
 ws = sheet_from_array_of_arrays(data);

 if (merges.length > 0) {
 if (!ws['!merges']) ws['!merges'] = [];
 merges.forEach(item => {
 ws['!merges'].push(XLSX.utils.decode_range(item))
 })
 }

 if (autoWidth) {
 /*設(shè)置worksheet每列的最大寬度*/
 const colWidth = data.map(row => row.map(val => {
 /*先判斷是否為null/undefined*/
 if (val == null) {
 return {
 'wch': 10
 };
 }
 /*再判斷是否為中文*/
 else if (val.toString().charCodeAt(0) > 255) {
 return {
 'wch': val.toString().length * 2
 };
 } else {
 return {
 'wch': val.toString().length
 };
 }
 }))
 /*以第一行為初始值*/
 let result = colWidth[0];
 for (let i = 1; i < colWidth.length; i++) {
 for (let j = 0; j < colWidth[i].length; j++) {
 if (result[j]['wch'] < colWidth[i][j]['wch']) {
 result[j]['wch'] = colWidth[i][j]['wch'];
 }
 }
 }
 ws['!cols'] = result;
 }

 /* add worksheet to workbook */
 wb.SheetNames.push(ws_name);
 wb.Sheets[ws_name] = ws;

 var wbout = XLSX.write(wb, {
 bookType: bookType,
 bookSST: false,
 type: 'binary'
 });
 saveAs(new Blob([s2ab(wbout)], {
 type: "application/octet-stream"
 }), `${filename}.${bookType}`);
}

<template>
 <div class="exportExcel">
 <div class="excel-header">
 <!--導(dǎo)出文件名稱-->
 <div class="filename">
 <label class="radio-label" style="padding-left:0;">Filename:</label>
 <el-input
 v-model="filename"
 placeholder="請(qǐng)輸入導(dǎo)出文件名"
 style="width:340px;"
 prefix-icon="el-icon-document" />
 </div>
 <!--設(shè)置表格導(dǎo)出的寬度是否自動(dòng)-->
 <div class="autoWidth">
 <label class="radio-label">Cell Auto-Width:</label>
 <el-radio-group v-model="autoWidth">
 <el-radio :label="true" border>True</el-radio>
 <el-radio :label="false" border>False</el-radio>
 </el-radio-group>
 </div>
 <!--導(dǎo)出文件后綴類型-->
 <div class="bookType">
 <label class="radio-label">Book Type:</label>
 <el-select v-model="bookType" style="width:120px;">
 <el-option v-for="item in options" :key="item" :label="item" :value="item"/>
 </el-select>
 </div>
 <!--導(dǎo)出文件-->
 <div class="download">
 <el-button
 :loading="downloadLoading"
 type="primary"
 icon="document"
 @click="handleDownload">export Excel</el-button>
 </div>
 </div>

 <el-table
 v-loading="listLoading"
 :data="list"
 element-loading-text="拼命加載中"
 border
 fit
 highlight-current-row
 height="390px"
 >
 <el-table-column align="center" label="序號(hào)" width="95">
 <template slot-scope="scope">{{ scope.$index }}</template>
 </el-table-column>
 <el-table-column label="訂單號(hào)" width="230">
 <template slot-scope="scope">{{ scope.row.title }}</template>
 </el-table-column>
 <el-table-column label="菜品" align="center">
 <template slot-scope="scope">{{ scope.row.foods }}</template>
 </el-table-column>
 <el-table-column label="收銀員" width="110" align="center">
 <template slot-scope="scope">
 <el-tag>{{ scope.row.author }}</el-tag>
 </template>
 </el-table-column>
 <el-table-column label="金額" width="115" align="center">
 <template slot-scope="scope">{{ scope.row.pageviews }}</template>
 </el-table-column>
 <el-table-column align="center" label="時(shí)間" width="220">
 <template slot-scope="scope">
 <i class="el-icon-time"/>
 <span>{{ scope.row.timestamp | parseTime('{y}-{m}-drbrjlq {h}:{i}') }}</span>
 </template>
 </el-table-column>
 </el-table>
 </div>
</template>

export default {
 name: "exportExcelDialog",
 data() {
 return {
 // 列表內(nèi)容
 list: null,
 // loding窗口狀態(tài)
 listLoading: true,
 // 下載loding窗口狀態(tài)
 downloadLoading: false,
 // 導(dǎo)出文件名稱
 filename: "",
 // 導(dǎo)出表格寬度是否auto
 autoWidth: true,
 // 導(dǎo)出文件格式
 bookType: "xlsx",
 // 默認(rèn)導(dǎo)出文件后綴類型
 options: ["xlsx", "csv", "txt"]
 };
 },
 methods: {
 // 導(dǎo)出Excel表格
 handleDownload() {
 this.downloadLoading = true;
 // 懶加載該用法
 import("@/vendor/Export2Excel").then(excel => {
 // 設(shè)置導(dǎo)出表格的頭部
 const tHeader = ["序號(hào)", "訂單號(hào)", "菜品", "收銀員", "金額", "時(shí)間"];
 // 設(shè)置要導(dǎo)出的屬性
 const filterVal = [
 "id",
 "title",
 "foods",
 "author",
 "pageviews",
 "display_time"
 ];
 // 獲取當(dāng)前展示的表格數(shù)據(jù)
 const list = this.list;
 // 將要導(dǎo)出的數(shù)據(jù)進(jìn)行一個(gè)過濾
 const data = this.formatJson(filterVal, list);
 // 調(diào)用我們封裝好的方法進(jìn)行導(dǎo)出Excel
 excel.export_json_to_excel({
 // 導(dǎo)出的頭部
 header: tHeader,
 // 導(dǎo)出的內(nèi)容
 data,
 // 導(dǎo)出的文件名稱
 filename: this.filename,
 // 導(dǎo)出的表格寬度是否自動(dòng)
 autoWidth: this.autoWidth,
 // 導(dǎo)出文件的后綴類型
 bookType: this.bookType
 });
 this.downloadLoading = false;
 });
 },
 // 對(duì)要導(dǎo)出的內(nèi)容進(jìn)行過濾
 formatJson(filterVal, jsonData) {
 return jsonData.map(v =>
 filterVal.map(j => {
 if (j === "timestamp") {
 return this.parseTime(v[j]);
 } else {
 return v[j];
 }
 })
 );
 },
 // 過濾時(shí)間
 parseTime(time, cFormat) {
 if (arguments.length === 0) {
 return null;
 }
 const format = cFormat || "{y}-{m}-uodp94w {h}:{i}:{s}";
 let date;
 if (typeof time === "object") {
 date = time;
 } else {
 if (typeof time === "string" && /^[0-9]+$/.test(time)) {
 time = parseInt(time);
 }
 if (typeof time === "number" && time.toString().length === 10) {
 time = time * 1000;
 }
 date = new Date(time);
 }
 const formatObj = {
 y: date.getFullYear(),
 m: date.getMonth() + 1,
 d: date.getDate(),
 h: date.getHours(),
 i: date.getMinutes(),
 s: date.getSeconds(),
 a: date.getDay()
 };
 const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
 let value = formatObj[key];
 // Note: getDay() returns 0 on Sunday
 if (key === "a") {
 return ["日", "一", "二", "三", "四", "五", "六"][value];
 }
 if (result.length > 0 && value < 10) {
 value = "0" + value;
 }
 return value || 0;
 });
 return timeStr;
 }
 },
 mounted() {
 // 模擬獲取數(shù)據(jù)
 setTimeout(() => {
 this.list = [
 {
 timestamp: 1432179778664,
 author: "Charles",
 comment_disabled: true,
 content_short: "mock data",
 display_time: "1994-05-25 23:37:25",
 foods: "雞翅、蘿卜、牛肉、紅燒大閘蟹、紅燒雞翅",
 id: 1,
 image_uri:
 "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
 importance: 3,
 pageviews: 2864,
 platforms: ["a-platform"],
 reviewer: "Sandra",
 status: "published",
 title: "O20190407135010000000001",
 type: "CN"
 },
 {
 timestamp: 1432179778664,
 author: "Charles",
 comment_disabled: true,
 content_short: "mock data",
 display_time: "1994-05-25 23:37:25",
 foods: "雞翅、蘿卜、牛肉、紅燒大閘蟹、紅燒雞翅",
 id: 1,
 image_uri:
 "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
 importance: 3,
 pageviews: 2864,
 platforms: ["a-platform"],
 reviewer: "Sandra",
 status: "published",
 title: "O20190407135010000000001",
 type: "CN"
 },
 {
 timestamp: 1432179778664,
 author: "Charles",
 comment_disabled: true,
 content_short: "mock data",
 display_time: "1994-05-25 23:37:25",
 foods: "雞翅、蘿卜、牛肉、紅燒大閘蟹、紅燒雞翅",
 id: 1,
 image_uri:
 "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
 importance: 3,
 pageviews: 2864,
 platforms: ["a-platform"],
 reviewer: "Sandra",
 status: "published",
 title: "O20190407135010000000001",
 type: "CN"
 },
 {
 timestamp: 1432179778664,
 author: "Charles",
 comment_disabled: true,
 content_short: "mock data",
 display_time: "1994-05-25 23:37:25",
 foods: "雞翅、蘿卜、牛肉、紅燒大閘蟹、紅燒雞翅",
 id: 1,
 image_uri:
 "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
 importance: 3,
 pageviews: 2864,
 platforms: ["a-platform"],
 reviewer: "Sandra",
 status: "published",
 title: "O20190407135010000000001",
 type: "CN"
 },
 {
 timestamp: 1432179778664,
 author: "Charles",
 comment_disabled: true,
 content_short: "mock data",
 display_time: "1994-05-25 23:37:25",
 foods: "雞翅、蘿卜、牛肉、紅燒大閘蟹、紅燒雞翅",
 id: 1,
 image_uri:
 "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
 importance: 3,
 pageviews: 2864,
 platforms: ["a-platform"],
 reviewer: "Sandra",
 status: "published",
 title: "O20190407135010000000001",
 type: "CN"
 },
 {
 timestamp: 1432179778664,
 author: "Charles",
 comment_disabled: true,
 content_short: "mock data",
 display_time: "1994-05-25 23:37:25",
 foods: "雞翅、蘿卜、牛肉、紅燒大閘蟹、紅燒雞翅",
 id: 1,
 image_uri:
 "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
 importance: 3,
 pageviews: 2864,
 platforms: ["a-platform"],
 reviewer: "Sandra",
 status: "published",
 title: "O20190407135010000000001",
 type: "CN"
 },
 {
 timestamp: 1432179778664,
 author: "Charles",
 comment_disabled: true,
 content_short: "mock data",
 display_time: "1994-05-25 23:37:25",
 foods: "雞翅、蘿卜、牛肉、紅燒大閘蟹、紅燒雞翅",
 id: 1,
 image_uri:
 "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
 importance: 3,
 pageviews: 2864,
 platforms: ["a-platform"],
 reviewer: "Sandra",
 status: "published",
 title: "O20190407135010000000001",
 type: "CN"
 },
 {
 timestamp: 1432179778664,
 author: "Charles",
 comment_disabled: true,
 content_short: "mock data",
 display_time: "1994-05-25 23:37:25",
 foods: "雞翅、蘿卜、牛肉、紅燒大閘蟹、紅燒雞翅",
 id: 1,
 image_uri:
 "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
 importance: 3,
 pageviews: 2864,
 platforms: ["a-platform"],
 reviewer: "Sandra",
 status: "published",
 title: "O20190407135010000000001",
 type: "CN"
 },
 {
 timestamp: 1432179778664,
 author: "Charles",
 comment_disabled: true,
 content_short: "mock data",
 display_time: "1994-05-25 23:37:25",
 foods: "雞翅、蘿卜、牛肉、紅燒大閘蟹、紅燒雞翅",
 id: 1,
 image_uri:
 "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
 importance: 3,
 pageviews: 2864,
 platforms: ["a-platform"],
 reviewer: "Sandra",
 status: "published",
 title: "O20190407135010000000001",
 type: "CN"
 }
 ];
 this.listLoading = false;
 }, 2000);
 },
 filters: {
 // 過濾時(shí)間
 parseTime(time, cFormat) {
 if (arguments.length === 0) {
 return null;
 }
 const format = cFormat || "{y}-{m}-pfqynmp {h}:{i}:{s}";
 let date;
 if (typeof time === "object") {
 date = time;
 } else {
 if (typeof time === "string" && /^[0-9]+$/.test(time)) {
 time = parseInt(time);
 }
 if (typeof time === "number" && time.toString().length === 10) {
 time = time * 1000;
 }
 date = new Date(time);
 }
 const formatObj = {
 y: date.getFullYear(),
 m: date.getMonth() + 1,
 d: date.getDate(),
 h: date.getHours(),
 i: date.getMinutes(),
 s: date.getSeconds(),
 a: date.getDay()
 };
 const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
 let value = formatObj[key];
 // Note: getDay() returns 0 on Sunday
 if (key === "a") {
 return ["日", "一", "二", "三", "四", "五", "六"][value];
 }
 if (result.length > 0 && value < 10) {
 value = "0" + value;
 }
 return value || 0;
 });
 return timeStr;
 }
 }
}