vue项目前端导出xlsx表格带边框
最近项目中要求不再通过发送请求导出excel表格了,于是在网上找了找方法,在这记录一下方便以后查阅一、首先先在项目中安装这几个包npm install xlsx --savenpm install file-saver --savenpm install xlsx-style --save二、包安装完成之后在需要导出表格的组件中引入import FileSaver from 'file-saver
最近项目中要求不再通过发送请求导出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
更多推荐
所有评论(0)