vue 導出excel文件

一、安裝 xlsx

npm install xlsx -S

二、創建 excel.js

import XLSX from 'xlsx'function autoWidthFunc (ws, data) {// set worksheet max width per colconst colWidth = data.map(row => row.map(val => {// if null/undefinedif (val == null) {return { wch: 10 }} else if (val.toString().charCodeAt(0) > 255) {// if chinesereturn { wch: val.toString().length * 2 }} else {return { wch: val.toString().length }}}))// start in the first rowconst 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 }function jsonToArray (key, jsonData) {return jsonData.map(v => key.map(j => { return v[j] })) }const exportArrayToExcel = ({ key, data, title, filename, autoWidth }) => {const wb = XLSX.utils.book_new()const arr = jsonToArray(key, data)arr.unshift(title)const ws = XLSX.utils.aoa_to_sheet(arr)if (autoWidth) {autoWidthFunc(ws, arr)}XLSX.utils.book_append_sheet(wb, ws, filename)XLSX.writeFile(wb, filename + '.xlsx') }export default {exportArrayToExcel }

三、在使用的文件中引入 excel.js

import excel from '@/utils/excel' exportExcel(data) {const params = {title: ['序號', '內容', '處理人', '處理人電話', '發生時間', '狀態'], //設置 excel 標題key: ['index', 'Content', 'userName', 'mobile', 'createDate', 'status'], //設置 excel 字段，該字段即為后臺返回 json 數據的字段data: data,autoWidth: true,filename: this.getDateTime()}excel.exportArrayToExcel(params)},getDateTime(){let date = new Date();let y = date.getFullYear();let m = date.getMonth()+1;let d = date.getDate();let h = date.getHours();let i = date.getMinutes();let s = date.getSeconds();m < 10 ? m = '0'+ m : '';d < 10 ? d = '0'+ d : '';h < 10 ? h = '0'+ h : '';i < 10 ? i = '0'+ i : '';s < 10 ? s = '0'+ s : '';return y + m + d + h + i + s;},

總結

以上是生活随笔為你收集整理的vue 导出excel文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。