刚接手一个项目，需要做表格导出，之前没用过，特做此记录，以备下次使用。此模板适用于修改表格样式时使用，若只想简单的直接导出，可以参考另一篇：在vue中，使用xlsx配合FileSaver进行导出excel表格_郭小白呀的博客-CSDN博客

看到一篇文章，受益匪浅：如何使用JavaScript实现纯前端读取和导出excel文件-好记的博客

此项目中的表格数据使用的是element ui 中的table 导入的，所以导出也是直接将已生成的表格导出为excel

表格导出的基本模板过程

1. 先下载插件

npm i xlsx
npm i xlsx-style

2. 在使用的页面中导入

import XLSX2 from 'xlsx'
import XLSX from 'xlsx-style'

3. 绑定要导出的表格，并设置列宽（不同内容的导出方式是不同的，这里直接是将表格导出为excel文件，用的是 utils.table_to_sheet，其他的用到了再补充）

这里对表格有无数据的判断，请看下边遇到的问题第三个来写！！！

var wb = XLSX2.utils.table_to_sheet(document.querySelector('#mytable'))// mytable为表格的id名if (!wb['!merges']) {this.$message.warning('无法导出：报表无数据')return}// 设置列宽（这里用到列的数量是用来设置不同列的不同宽度的）const sum = 1 + this.govMt.length * 7 + 2 // 列的数量，根据自身项目进行数据的更改for (var i = 0; i < sum; i++) {if (i === sum - 1) {wb['!cols'][i] = { wpx: 120 } // 设置列宽，只有最后一列的宽度是不同的} else {wb['!cols'][i] = { wpx: 60 }}}

4. 设置单元格的样式

for (const key in wb) {if (key.indexOf('!') === -1) { // 排除带!的字段，只要单元格字段wb[key].s = {font: {// 字体设置sz: 13,bold: false,color: {rgb: '000000'// 十六进制，不带#}},border: { // 设置边框top: { style: 'thin' },bottom: { style: 'thin' },left: { style: 'thin' },right: { style: 'thin' }},alignment: {// 文字居中 //字体水平居中、垂直居中、自动换行horizontal: 'center',vertical: 'center',wrap_text: true}}}  }

基础设置就是这样，然后调用后边的三个函数即可

var data = this.addRangeBorder(wb['!merges'], wb) // 合并项添加边框
var filedata = this.sheet2blob(data) // 将一个sheet转成最终的excel文件的blob对象
this.openDownloadDialog(filedata, '报表名字.xlsx') // 下载报表

5. 由于有合并的单元格，所以要为合并项添加边框，具体解释看文末遇到的问题中的四！！

// 为合并项添加边框addRangeBorder(range, ws) {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 startColNumber = Number(item.s.r); const endColNumber = Number(item.e.r) // 0-0const startRowNumber = Number(item.s.c); const endRowNumber = Number(item.e.c) // 0-16const test = ws[arr[startRowNumber] + (startColNumber + 1)] // 合并项第一个单元格中的内容for (let col = startColNumber; col <= endColNumber; col++) { // 0-0for (let row = startRowNumber; row <= endRowNumber; row++) { // 0-16ws[arr[row] + (col + 1)] = test // A1-P1}}})return ws},

6. 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载

// 将一个sheet转成最终的excel文件的blob对象
sheet2blob(sheet, sheetName) {// console.log(sheet, sheetName, 'sheet, sheetName')sheetName = sheetName || 'sheet1'console.log(sheetName, 'sheetName')var workbook = {SheetNames: [sheetName],Sheets: {}}workbook.Sheets[sheetName] = sheet // 生成excel的配置项var wopts = {bookType: 'xlsx', // 要生成的文件类型bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性type: 'binary'}var wbout = XLSX.write(workbook, wopts)var blob = new Blob([s2ab(wbout)], {type: 'application/octet-stream'}) // 字符串转ArrayBufferfunction 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) & 0xFFreturn buf}return blob},

利用URL.createObjectURL下载函数

openDownloadDialog(url, saveName) {if (typeof url === 'object' && url instanceof Blob) {url = URL.createObjectURL(url) // 创建blob地址}var aLink = document.createElement('a')aLink.href = urlaLink.download = saveName || '' // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效var eventif (window.MouseEvent) event = new MouseEvent('click')else {event = document.createEvent('MouseEvents')event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)}aLink.dispatchEvent(event)}

遇到的问题：

一、在使用xlsx-style导出的时候，可能会报如下错误:

Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx\xxx

或者在npm run serve时出现：

This relative module was not found: * ./cptable in ./node_modules/xlsx-style/dist/cpexcel.js

解决方式有两种：

1. 在config.js中加入如下代码：

module.exports = {externals: {'./cptable': 'var cptable'}
}

这段代码要写进config.js中，我发现我并没有这个文件（我用的是vue2.0），所以要在根目录中创建vue.config.js文件，并在内部写如下代码：

module.exports = {devServer: {port: 80,host: '0.0.0.0',},
};

这时，我将externals: { './cptable': 'var cptable' }直接写进 module.exports 中，

module.exports = {devServer: {port: 80,host: '0.0.0.0',},externals: {'./cptable': 'var cptable'}
};

出现了如下错误：

ERROR Invalid optio

.0ns in vue.config.js: "externals" is not allowed

意思是vue.config.js里面没有这个字段，所以配置的这个webpack字段vue并没有把它映射到vue.config.js中。所以我们要换一种引用方式：

configureWebpack: { externals: {'./cptable': 'var cptable'} } // 配置webpack的字段。

然后再重新运行就可以了。

2. 第二种方式是修改 node_modules 中的代码，但是，每次拉取代码 npm i 后，都要去修改，这样是很不方便的。

找到 ./node_modules/xlsx-style/dist/cpexcel.js 文件手动修改

将
var cpt = require('./cpt' + 'able');
替换为
var cpt = cptable;

二、vue xlsx导出表格时间不全问题

可能为：进入时间一列显示年月日，时分秒被忽略掉、有个别显示####

解决方式：

在代码中添加：{ raw: true }

var wb = XLSX2.utils.table_to_sheet(document.querySelector('#exportTab'), { raw: true })// exportTab为表格的id名

效果图：

三、在代码的 3. 中，报表无数据的判断是可以灵活改变的

如下代码段是用来判断有没有合并项的，如果没有单元格合并，是不会有此选项的，所以就算表格中有数据，也会一直走无法导出的代码，所以可以再从wb中换一个字段来判断。例如： !fullref

若有合并项可以写为：

 if (!wb['!merges']) {this.$message.warning('无法导出：报表无数据')return}

根据需要可以改写为：

if (!wb['!fullref']) {this.$message.warning('无法导出：报表无数据')return}

四、对于合并项函数的需求解答

当我们的单元格是合并单元格时，如果不对合并项添加边框，导出的表格效果如图所示：

我们发现合并项的边框是有缺失的，在我们调用为合并项添加边框函数后，就可解决这个问题，效果图如下所示：

vue框架使用xlsx导出excel表格相关推荐

VUE中使用xlsx导出excel表格
首先下载 npm install xlsx@0.17.0 file-saver@2.0.5 --save 注意需要指定版本才行,如果直接下载,会报依赖的错误,找不到export default . 然 ...
vue中使用xlsx导出Excel 并设置样式，解决未完全合并单元格框线的BUG
今天有需到一个需求,需要在前端直接导出表格,将了解发现了npm上用的比较多的 xlsx 这个包,但是在使用过程中发现很多问题,下边是我将发现问题进行的汇总以及相应的解决办法. 1.安装首先说安装问题 ...
前端用xlsx导出excel表格数字0被清除等问题
这是待导出的数据出现bug:导出后009变成9,对于数字长度过长采用科学计数法进行了处理解决:项目中用xlsx进行导入导出操作这是封装的导出方法,封装的方法默认xlsx格式导出注释掉导出csv ...
Vue中使用xlsx下载Excel表格
首先安装 npm i file-saver -S npm i xlsx -S <button @click='downTable'>下载表格</button> <el-t ...
vue使用xlsx、xlsx-style和fileSaver导出excel表格
本文引用 xlsx-style坑记录 Vue使用xlsx和xlsx-style纯前端导出带样式的Excel vue导出Excel表格,报错utils of undefined 是版本原因前期准备工作 ...
前端导出Excel表格
vue + xlsx实现Excel导出简单粗暴步骤,无需花里胡哨第一步:npm install --save xlsx@0.14.3 第二步:全局封装公共方法(或者局部定义) import XLS ...
vue合并表格excel导出_Vue实现导出excel表格功能
引言: 最近使用vue在做一个后台系统,技术栈 vue + iView ,在页面中生成表格后, iView可以实现表格的导出,不过只能导出csv格式的,并不适合项目需求. 如果想要导出Excel 在s ...
vue中导出Excel表格
vue中导出Excel表格项目中我们可能会碰到导出Excel文件的需求,一般后台管理系统中居多,将table中展示的数据导出保存到本地.当然我们也可以通过一些处理来修改要导出的数据格式,具体需求具体 ...
elementui导出数据为xlsx、excel表格
我这里为了同学们好理解,把所有元素都写到一个页面. 1.第一步安装插件 npm install file-saver npm install xlsx 2.第二步在mian.js中设置全局 // vu ...

vue框架使用xlsx导出excel表格

表格导出的基本模板过程

遇到的问题：

一、在使用xlsx-style导出的时候，可能会报如下错误:

Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx\xxx

二、vue xlsx导出表格时间不全问题

三、在代码的 3. 中，报表无数据的判断是可以灵活改变的

四、对于合并项函数的需求解答

vue框架使用xlsx导出excel表格相关推荐

最新文章

热门文章

vue框架使用xlsx导出excel表格

表格导出的基本模板过程

遇到的问题：

一、在使用xlsx-style导出的时候，可能会报如下错误:

Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx\xxx

二、vue xlsx导出表格时间不全问题

三、在代码的 3. 中，报表无数据的判断是可以灵活改变的

四、 对于合并项函数的需求解答

vue框架使用xlsx导出excel表格相关推荐

最新文章

热门文章

四、对于合并项函数的需求解答