前端使用xlsx file-saver xlsx-style导出
2024-10-20 20:42:49
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 = {
chainWebpack: config => {
config.externals({ './cptable': 'var cptable' })
}
}
问题所在：\node_modules\xlsx-style\dist\cpexcel.js 807行 var cpt = require('./cpt' + 'able');
修改为 var cpt = cptable 修改的只是本地文件
不推荐这种方式，因为你只是修改了自己的本地文件呢，下一次其他人进行打包或运行项目一样会报这类错误
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%">
对应导出列表
最新文章
- 错误Batch update returned unexpected row count from update [0]; actual row count: 0;
- Flex 中画图工具（drawTool）失效
- iOS系统导航/自绘制导航路线
- EasyDarwin
- Chrome 应用推荐 - 下载管理扩展： Chrono
- IOS 日志输出控制
- HDU 4276-The Ghost Blows Light（树状背包）
- C指针数组
- Camera实现预览、拍照
- error 和 exception 有什么区别?
- Visual Studio 2010 将网站直接发布到远程站点
- Python之xml文档及配置文件处理（ElementTree模块、ConfigParser模块）
- 微信小程序倒计时
- python笔记：#005#算数运算符
- Linux中检查本地系统上的开放端口列表的方法
- fiddler 抓包工具（新猿旺学习总结）
- linux命令_文件目录操作命令
- ACM-彩票
- Bootstrap3基础 disabled 多选框 鼠标放在方框与文字上都出现禁止 标识
- 保存登录plsql developer 的用户名和密码