xlsx、xlsx-style、file-saver导表

vue 利用xlsx、xlsx-style、file-saver实现前端导出excel表格 (包括设置单元格居中、边框等样式) antdesignvue、elementui、vxetable 等都适用

导出的excel：

首先要引入三个库：

npm install file-saver --save

npm install xlsx --save

npm install xlsx-style --save

为了防止代码一致却有运行错误的情况这里再列出我开发时用的插件的版本号：

"file-saver": "^2.0.5",
"xlsx": "^0.17.0",
"xlsx-style": "^0.8.13"
全部安装好后引入插件：import XLSX from "xlsx";
import XLSXStyle from "xlsx-style";
import FileSaver from "file-saver";
先根据不同的框架渲染好表格的页面，外层套一层div：

代码

<template><a-card :bordered="false"><a-button @click="exportToExcel" >导出</a-button><div id="exportData"  class="css_page_body" ref="css_page_body"><a-table :columns="columns":data-source="data"bordered:pagination="false"></a-table></div></a-card>
</template><script>
import XLSX from "xlsx";
import XLSXStyle from "xlsx-style";
import FileSaver from "file-saver";export default {data () {return {columns:[{title: '学校', dataIndex: 'school', width: '25%',scopedSlots: { customRender: 'school' }, align: 'center', key: 'school',customRender (_, row) {return {children: row.school,attrs: {rowSpan: row.schoolRowSpan}}}},{title: '年级', dataIndex: 'grade', width: '25%',scopedSlots: { customRender: 'grade' }, align: 'center', key: 'grade',customRender (_, row) {return {children: row.grade,attrs: {rowSpan: row.gradeRowSpan}}}},{title: '班级', dataIndex: 'class', width: '25%',scopedSlots: { customRender: 'class' }, align: 'center'},{title: '姓名', dataIndex: 'name', width: '25%',scopedSlots: { customRender: 'name' }, align: 'center'},{title: '4月1日',children: [{title: '周五',dataIndex: 'companyAddress',width: 100,}],},{title: '4月1日',children: [{title: '周五',dataIndex: 'companyAddress2',width: 100,}],},{title: '4月1日',children: [{title: '周五',dataIndex: 'companyAddress3',width: 100,}],},{title: '4月1日',children: [{title: '周五',dataIndex: 'companyAddress4',width: 100,}],},],data:[]}},methods: {// 合并单元格rowSpan (key, data) {const arr = data.reduce((result, item) => {if (result.indexOf(item[key]) < 0) {result.push(item[key])}return result}, []).reduce((result, keys) => {const children = data.filter(item => item[key] === keys)result = result.concat(children.map((item, index) => ({...item,[`${key}RowSpan`]: index === 0 ? children.length : 0})))return result}, [])return arr},// 表格合并mergeRowCell (data) {let tableData = this.rowSpan('school', data)tableData = this.rowSpan('grade', tableData)this.data = tableData},exportToExcel () {let ws = XLSX.utils.table_to_sheet(document.getElementById('exportData'))let ws2 = XLSX.utils.table_to_sheet(document.getElementById('exportData'))//创建一个workbook对象let wb = XLSX.utils.book_new()//把worksheet对象添加进workbook对象，第三个参数是excel中sheet的名字XLSX.utils.book_append_sheet(wb, ws, '月度统计报表')XLSX.utils.book_append_sheet(wb, ws2, '隔离库')this.setExlStyle(wb['Sheets']['月度统计报表']); // 设置列宽 字号等this.addRangeBorder(wb['Sheets']['月度统计报表']['!merges'],wb['Sheets']['月度统计报表'])let wb_out = XLSXStyle.write(wb, { type: 'buffer'})try {FileSaver.saveAs(new Blob([wb_out], {type: 'application/octet-stream'}), 'WMS统计报表.xlsx');   //trade-publish.xlsx 为导出的文件名} catch (e) {console.log(e, wb_out) ;}return wb_out;},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: 115});}}return data;},addRangeBorder (range, ws) {let cols = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];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;},},mounted() {this.data = []for(let i=0;i<4;i++){this.data.push( { school: '林州一中', grade: '高一', class: '二班', name: '徐强' } )this.data.push( { school: '林州二中', grade: '高三', class: '一班', name: '徐强子' } )}this.mergeRowCell(this.data)}
}
</script><style lang="less" scoped>
</style>

xlsx、xlsx-style、file-saver导表相关推荐

计算机分配回县考取比率,打开工作簿文件 EXCEL.XLSX ： (1) 将 Sheet1 工作表的 A1 ∶ D1 单元格合并为一个单元格_题来了...
解析 : ( 1 )[解题步骤] 步骤 1 :单击"考生文件夹"按钮,打开 EXCEL.XLSX 文件,选中 Sheet1 工作表的 A1 ∶ D1 单元格,在[开始]功能区的[对 ...
Unity导表工具Luban插件的数据加载原理与优化
文章目录 1. 配置Luban并测试 2. Luban 数据加载原理 3. 根据工程进行懒加载优化 3.1 增加公共接口与接口实现方法 3.2 外部提供获取数据的方法 3.3 对Luban中的导表模板 ...
html中某个名称不能修改,解决type=file 文件修改表单名称不能正常回显的问题
easyui 框架下代码如下: css: .file_box{ float: right; width: 1035px; border: 1px solid #999; height: 32px ...
UIElements开发人员指南9 样式(Style)和Unity样式表(style sheets)
样式(Style)和Unity样式表(style sheets) 每个VisualElement都包含样式属性,用于设置元素的尺寸以及元素在屏幕上的绘制方式,例如backgroundColor或bor ...
Ubuntu latex 编译时参考文献出错 I couldn‘t open style file IEEEtran.bst xxx: \bibstyle{IEEEtran : }
1 报错内容 This is BibTeX, Version 0.99d (TeX Live 2020/Debian) The top-level auxiliary file: xxx.aux I ...
Unity导表工具开发（一）
Unity导表工具开发(一) Unity导表工具开发(二) Unity导表工具开发(三) Unity导表工具开发(四) 在进行Unity游戏开发的时候,会遇到很多配置表导出到项目的情况,这边开发一个导 ...
Excel(XLSX/XLS)文件内容导入WEB表单,纯前端无需服务器支持,开源Chrome扩展 v0.0.8，附下载，附github链接(2021/5/8更)
起因老婆从事的是售后的工作,常年需要把售前工程师和销售的一些实施的数据录入到他们的工作平台上. 最开始我看在眼里,焦虑在心上,我心想,你这完全是人力无价值的搬运工的(excel到网页表单)工作,你们 ...
Qt Style Sheets(qt样式表)
我认为qt样式表对于专注于ui交互的人,其在qt的地位不亚于信号与槽的地位.通过qt样式表可以展示绝大部分你可以想象得到的风格. qt样式表的使用是先将要特例化的样式建立在后缀qss的文件中,在程序启 ...
两台oracle怎样定期导表数据,定期从Oracle导数据至MySQL
因部分项目需求,需要将Oracle中单表的数据定期导入至MySQL,注意此处对数据的时效性要求不高.要求高可以利用goldengate 首先,需要将visit表中的vid,userid,goodid, ...

xlsx、xlsx-style、file-saver导表

xlsx、xlsx-style、file-saver导表相关推荐

最新文章

热门文章