vue+elementUI使用XLSX+xlsx |
您所在的位置：网站首页 › arcgis102导出excel表 › vue+elementUI使用XLSX+xlsx |
vue+elementUI使用XLSX+xlsx
|
步骤
安装和配置 xlsx 和 xlsx-stylevue页面导出vue页面效果和导出效果问题1：导出的excel表格可以看到F列的1、2两行多出边框，解决方法问题2：el-table-column 标签 有 fixed 属性
安装和配置 xlsx 和 xlsx-style
npm install file-saver --save
npm install xlsx --save
npm install xlsx-style --save
安装启动时找不到 ./cptable 问题，需要在 vue.config.js 中 webpack 方法添加如下配置 chainWebpack(config) { // 配置信息 config.externals({ './cptable': 'var cptable' }) } vue页面导出vue页面引用插件 import XLSX from 'xlsx' import FileSaver from 'file-saver' import XLSXSTYLE from 'xlsx-style'给导出的table 设置id名，例如：id=“exportTable” 导出相关代码 // 导出excel exportBtn() { // 使用 this.$nextTick 是在dom元素都渲染完成之后再执行 this.$nextTick(function() { // 设置导出的内容是否只做解析，不进行格式转换false：要解析，true:不解析 const xlsxParam = { raw: true } // 标记1-开始 const wb = this.setExlStyle( XLSX.utils.table_to_book( document.querySelector('#exportTable'), xlsxParam ) ) // 标记1-结束 this.addRangeBorder( wb['Sheets']['Sheet1']['!merges'], wb['Sheets']['Sheet1'] ) // 导出excel文件名 const fileName = '学生成绩报表.xlsx' // 注意：导出Excel, 注意这里用到的是XLSXSTYLE对象 才会有设置的样式 const wbout = XLSXSTYLE.write(wb, { bookType: 'xlsx', // 生成的文件类型 bookSST: false, type: 'binary' }) try { // 下载保存文件 FileSaver.saveAs( new Blob([this.s2ab(wbout)], { type: 'application/octet-stream' }), fileName ) } catch (e) { if (typeof console !== 'undefined') { console.log(e, wbout) } } return wbout }) }, // 设置表格样式 setExlStyle(data) { const array = Object.keys(data.Sheets.Sheet1) array.forEach((key, index) => { // 设置每个单元格属性 if (key.indexOf('!') // 边框 border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } }, // 字体 font: { sz: 12, }, // 居中 alignment: { horizontal: 'center', vertical: 'center', wrapText: true } } } }) //标记2 // 列宽 data.Sheets.Sheet1['!cols'] = [] // 行宽 data.Sheets.Sheet1['!rows'] = [] // 根据列数设置每一列的列宽 这里table有5列 for (let i = 0; i wpx: 80, wch: 20 }) } //设置第一列 data.Sheets.Sheet1['!cols'][0].wpx = 200 return data }, // 文件流转换 s2ab(s) { // 如果存在ArrayBuffer对象(es6) 最好采用该对象 if (typeof ArrayBuffer !== 'undefined') { // 1、创建一个字节长度为s.length的内存区域 const buf = new ArrayBuffer(s.length) // 2、创建一个指向buf的Unit8视图，开始于字节0，直到缓冲区的末尾 const view = new Uint8Array(buf) // 3、返回指定位置的字符的Unicode编码 for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff return buf } else { const buf = new Array(s.length) for (let i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff return buf } }, //表格边框：合并单元格时会丢失边框样式 addRangeBorder(range, ws) { // s:起始位置，e:结束位置 const arr = ['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) => { const startRowNumber = Number(item.s.r) const startColumnNumber = Number(item.s.c) const endColumnNumber = Number(item.e.c) const endRowNumber = Number(item.e.r) // 合并单元格时会丢失边框样式，例如A1->A4 此时内容在A1 而range内获取到的是从0开始的，所以开始行数要+2 for (let i = startColumnNumber; i ws[arr[i] + j] = { s: { border: { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } } } } } } }) return ws }, vue页面效果和导出效果
在 标记2 处增加下方代码，根据实际情况调整列名 // 导出的excel会给F这列两行有边框样式，手动去掉 var border = { top: { style: 'none' }, bottom: { style: 'none' }, left: { style: 'thin' }, right: { style: 'none' } } data.Sheets.Sheet1['F1'].s = { border: border } data.Sheets.Sheet1['F2'].s = {} 问题2：el-table-column 标签 有 fixed 属性表现为：vue页面展示正常，导出excel的数据出现重复，如下 解决方法：替换 标记1 处代码 // 有fixed情况 const exportTable = document.getElementById('exportTable').cloneNode(true) exportTable.removeChild(exportTable.querySelector('.el-table__fixed')) // 调用改变样式的方法 const wb = this.setExlStyle( XLSX.utils.table_to_book( exportTable, xlsxParam ) ) |
【本文地址】
今日新闻 |
推荐新闻 |