1. 安装插件
// 注意安装的版本
"file-saver": "^2.0.5",
"xlsx": "^0.17.0",
"xlsx-style": "^0.8.13"
npm i xlsx@0.17.0 -S
npm i xlsx-style@0.8.13 -S
npm i file-saver -S
2. 配置vue.config.js
module.exports = defineConfig({ transpileDependencies: true, configureWebpack: { // 添加配置项 externals: { './cptable': 'var cptable' }, resolve: { fallback: { fs: false } } } })
3. 导出excel表格
import { ElMessageBox } from 'element-plus' import XLSX from "xlsx"; import XLSXS from 'xlsx-style' import FileSaver from 'file-saver' // 导出的数据 const tableData = [ { date: '2016-05-03', name: 'Tom', address: '123', }, { date: '2016-05-02', name: 'Tom', address: '456', }, { date: '2016-05-04', name: 'Tom', address: '789', }, { date: '2016-05-01', name: 'Tom', address: '147', }, { date: '2016-05-08', name: 'Tom', address: '258', }, { date: '2016-05-06', name: 'Tom', address: '369', }, { date: '2016-05-07', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', } ] // 提示是否导出 const exportAllFile = () => { ElMessageBox.confirm( '是否确认导出全部数据?', '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', } ) .then(() => { exportList(tableData) }) } // 正式导出excel的方法 const exportList = (arr) => { let table = [ // 表格表头 ['幼儿园课表', null, null, null], ["序号", '时间', '姓名', "地址"] ] arr.forEach((item, index) => { let rowData = [] //导出内容的字段 rowData = [ index + 1, item.date, item.name, item.address, ] table.push(rowData) }) let bookNew = XLSX.utils.book_new(); let workSheet = XLSX.utils.aoa_to_sheet(table); XLSX.utils.book_append_sheet(bookNew, workSheet, '作品名称') // 设置工作簿名称 // 设置标题行单元格合并 // s即start, e即end, r即row, c即column // 合并从--0行0列开始,到0行3列 workSheet['!merges'] = [ { s: { r: 0, c: 0 }, e: { r: 0, c: 3 } }, { s: { r: 7, c: 1 }, e: { r: 8, c: 2 } }, ] // 调用 设置表格样式的方法 setExlStyle(workSheet) // 设置单元格宽度 workSheet['!cols'] = [ { wpx: 80}, { wpx: 100}, { wpx: 180}, { wpx: 400} ] // 导出Excel, 注意这里用到的是XLSXS对象 let wbout = XLSXS.write(bookNew, { bookType: 'xlsx', bookSST: false, type: 'binary', }) FileSaver.saveAs( new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), '全部人员.xlsx' // 保存的文件名 ) // 使用xlsx 方式直接导出excel // let workSheet = XLSX.utils.aoa_to_sheet(table); // let bookNew = XLSX.utils.book_new(); // XLSX.utils.book_append_sheet(bookNew, workSheet, '作品名称') // 设置工作簿名称 // XLSX.writeFile(bookNew, '全部人员.xlsx') // 保存的文件名 } // 工具方法 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 } // 设置表格的样式 const setExlStyle = (data) => { //单元格外侧框线 let borderAll = { top: { style: "thin", }, bottom: { style: "thin", }, left: { style: "thin", }, right: { style: "thin", }, diagonal: { style: "thin", color: "red" }, }; for (let key in data) { // 判断是否为excel表头 if (key === 'A1') { data[key].s = { font: { name: '宋体', //字体类型 sz: 20, //字体大小 color: { rgb: 'ff0000' }, //字体颜色 bold: true, //是否加粗 }, fill: { patternType: 'solid', // 默认 solid，设为 none 时，fgColor 失效 bgColor: { // 无效 rgb: "0000FF", }, fgColor: { // 背景色 theme: "2", tint: "-0.25" } }, } continue; } if (data[key] instanceof Object) { data[key].s = { // 边框 border: borderAll, // 对齐方式相关样式 alignment: { vertical: 'center', //垂直对齐方式 horizontal: 'center', //水平对齐方式 // wrapText: true, //自动换行 }, //字体相关样式 font: { name: '宋体', //字体类型 sz: 20, //字体大小 color: { rgb: '' }, //字体颜色 bold: false, //是否加粗 }, //背景相关样式 bold: true, numFmt: 0, }; } } return data; }
4.遇到版本问题，例如：jszip not a constructor
请点击此处：报错解决
5.更多资源文章：
点击精彩文章
