import FileSaver from 'file-saver' import XLSXStyle from "xlsx-style"; import XLSX from 'xlsx' vue 2.0版本xlsx-style ./cptable' 报错:Can't resolve './cptable' in 'xxxx\nautical-front\node_modules_xlsx 解决办法
1根据脚手架版本不同可以在 webpack.base.conf.js 中写
module.exports = {
externals: [ {
'./cptable': 'var cptable'
}]
}
也可以在vue.config.js中写
module.exports = {setExlStyle(data) { let borderAll = { //单元格外侧框线 // top: { // style: 'thin', // }, // bottom: { // style: 'thin' // }, // left: { // style: 'thin' // }, // right: { // style: 'thin' // } }; data['!cols'] = []; for (let key in data) { // console.log(key) if (data[key] instanceof Object) { data[key].s = { border: borderAll, alignment: { horizontal: 'center', //水平居中对齐 vertical:'center' }, font:{ sz:11 }, bold:true, numFmt: 0 } data['!cols'].push({wpx: 160}); } } return data; }, addRangeBorder (range, ws) { console.log(range) let cols = ["A", "B", "C", "D", "E"]; range.forEach(item => { console.log(item) let style = { // s: { // border: { // top: { style: 'thin' }, // left: { style: 'thin' }, // bottom: { style: 'thin' }, // right: { style: 'thin' } // } // } } // 处理合并行 for (let i = item.s.c; i <= item.e.c; i++) { ws[`${cols[i]}${Number(item.e.r) + 1}`] = ws[`${cols[i]}${Number(item.e.r) + 1}`] || style // 处理合并列 for (let k = item.s.r + 2; k <= item.e.r + 1; k++) { ws[cols[i] + k] = ws[cols[k] + item.e.r] || style } } }) return ws; }, exportExcel(){ let ws = XLSX.utils.table_to_sheet(this.$refs['report-table'].$el) //创建一个workbook对象 let wb = XLSX.utils.book_new() //把worksheet对象添加进workbook对象,第三个参数是excel中sheet的名字 XLSX.utils.book_append_sheet(wb, ws, '列表') this.setExlStyle(wb['Sheets']['列表']); // 设置列宽 字号等 如果无需多余的样式则省略 this.addRangeBorder(wb['Sheets']['列表']['!merges'],wb['Sheets']['列表']) //设置合并行的border let wb_out = XLSXStyle.write(wb, { type: 'buffer'}) try { FileSaver.saveAs(new Blob([wb_out], { type: 'application/octet-stream' }), '用时用工统计表.xlsx'); // 导出的文件名 } catch (e) { console.log(e, wb_out) ; } return wb_out; }, rowspan(spanArr, position, spanName) { this.list.forEach((item, index) => { if (index === 0) { spanArr.push(1); position = 0; } else { if ( this.list[index][spanName] === this.list[index - 1][spanName] ) { spanArr[position] += 1; spanArr.push(0); } else { spanArr.push(1); position = index; } } }); }, objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { const _row = this.testArr0[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col, }; } if (columnIndex === 1) { const _row = this.testArr1[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col, }; } if (columnIndex === 2) { const _row = this.testArr2[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col, }; } if (columnIndex ===3) { const _row = this.testArr3[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col, }; } }, this.rowspan(this.testArr3, this.testPosition3, "num"); 对应的表格 <el-table :data="list" fit border stripe highlight-current-row ref="report-table" :span-method="objectSpanMethod" @selection-change="handleSelectionChange" height="100%">
chainWebpack: config => {
config.externals({ './cptable': 'var cptable' })
}
}
问题所在:\node_modules\xlsx-style\dist\cpexcel.js 807行 var cpt = require('./cpt' + 'able');
修改为 var cpt = cptable 修改的只是本地文件
不推荐这种方式,因为你只是修改了自己的本地文件呢,下一次其他人进行打包或运行项目一样会报这类错误
对应导出列表
标签:xlsx,style,const,thin,file,col,row From: https://www.cnblogs.com/caiguanzheng/p/17014193.html