最近项目中要求不再通过发送请求导出excel表格了,于是在网上找了找方法,在这记录一下方便以后查阅
一、首先先在项目中安装这几个包

npm install xlsx --save
npm install file-saver --save
npm install xlsx-style --save

二、包安装完成之后在需要导出表格的组件中引入

import FileSaver from 'file-saver'
import XLSX1 from 'xlsx'
//这里如果不需要添加边框等样式直接写成import XLSX from 'xlsx' 为什么这样写一会儿后面会说

这里我并没有引入xlsx-style,因为引入xlsx-style会报以下错误:
This relative module was not found: ./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js
需要修改源码:
在\node_modules\xlsx-style\dist\cpexcel.js 807行 的 var cpt = require(’./cpt’ + ‘able’); 改成 var cpt = cptable;
但是如果每次打包之前去修改包里的代码很麻烦所以我去node_modules包里找到了这个文件
在这里插入图片描述
把这个xlsx.full.min.js复制一份出来,粘贴到项目内,我是放到了public里面的util里,然后引入到index里面如图:
在这里插入图片描述

在这里插入图片描述
这样就不用去修改node_modules包里的代码了。
四、下载一个快速增加边框的文件
在写方法之前我们需要先下载一个js文件(xlsxStyle.utils.js)粘贴在项目里,用来快速的给表格增加边框
文档参考git:https://github.com/Ctrl-Ling/XLSX-Style-Utils
下载后自己加了两句话如图:
在这里插入图片描述
然后在组件中导入就可以了

import FileSaver from 'file-saver'
import XLSX1 from 'xlsx'
import XSU from "@/util/xlsxStyle.utils.js"

五、导出方法

exportToExcel (){
	//先获取表格以及表格里面的内容我用的是avue-crud和vxe组件
	let wb = XLSX1.utils.table_to_book(this.$refs.crud.$el)
	let sheetName = wb.SheetNames[0]
	//这里用的就是快速增加边框的方法
	utilsTest(wb)
    function utilsTest(wb) {
      //这个是设置所有单元格默认边框方法
      XSU.setBorderDefaultAll(wb, sheetName)
   	}
	
	//这里用的XLSX不是组件引入的,而是index里引入的,所以为了区分我刚才在import的时候命名为xlsx1
	var wbout = XLSX.write(wb, {
       bookType: "xlsx",
       bookSST: false,
      type: "binary"
   })
   saveAs(
    new Blob([s2ab(wbout)], {
    	type: "application/octet-stream"
    }),
    "导出表格的名称"+".xlsx"
   )
   function 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) & 0xff
       return buf
     }
}

这样就可以导出带边框的表格了,在获取到表格内容给表格加上边框后console打印wb大概是这个样子的,(如果不想使用xlsxStyle.utils.js中的XSU方法也可以自己收手动循环加)在这里插入图片描述
参考文章有:
https://blog.csdn.net/github_38469586/article/details/106982198
https://blog.csdn.net/qq_44706619/article/details/111573194

Logo

前往低代码交流专区

更多推荐