前端根据后端返回数据导出指定样式的表格(xlsx-js-style)

前言：使用xlsx-style一直报错，有关xlsx-js-style的文章也比较少，设置样式的时候踩过不少坑，因此整合了一下使用xlsx-js-style修改表格样式的方法，包括修改表头、列表、行高、列宽、字体、边框等等，应该是比较全面的

最后的样式如下图所示：

1.下载xlsx-js-style依赖

npm install xlsx-js-style

2.在main.js中挂载到vue原型上，方便使用

import XLSX from 'xlsx-js-style'
Vue.prototype.$xlsx = XLSX

3.代码及相关解释(有需要补充可以留言)

//html中写一个按钮绑定事件
<el-button @click=export()>导出数据</el-button>
//export()写到method里面
export(){
let Data = [["会议统计数据列表",],["时间", "转写时长", "文档数量", "会议次数", "参会人数"],]; // excel表数据 分别是第一行和第二行数据var newData = [];//定义一个数组方便拼接后面的数据//请求回来的数据this.DetailsForm格式不是数组，所以使用了map，再把数据push到我创建的数组中this.DetailsForm.map((item, index) => {newData.push([item.DateStr,item.SumTransSecond,item.SumDoc,item.SumMeeting,item.SumPerson,]);});let excelData = Data.concat(newData);//数组的拼接//this.$xlsx是挂载前面挂载到原型上的，直接使用let workbook = this.$xlsx.utils.book_new(); // 工作簿let worksheet = this.$xlsx.utils.aoa_to_sheet(excelData); // 数据表//以下是样式设置，样式设置放在组织完数据之后，xlsx-js-style的核心API就是SheetJS的//样式的设置可以参考相关文档 贴在文章末尾第二个链接//修改列宽cols 行宽就用rows 总共5列worksheet["!cols"] = [{width: 36,},{width: 36,},{width: 36,},{width: 36,},{width: 36,},];// 修改行高 这里我只修改了第一行worksheet["!rows"] = [{hpx: 50,},];//合并第一行单元格 s和e指范围即第一行 第一列到第五列worksheet["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 4 } }];Object.keys(worksheet).forEach((key) => {// 非!开头的属性都是单元格// excelData.length是我表格的长度也就是总行数//设置从第三行开始的数据样式for (let i = 3; i <= excelData.length; i++) {//用正则表达式判断是否是某一行if (key.replace(/[^0-9]/gi, "") == i) {worksheet[key].s = {//设置字体font: {name: "Arial",sz: 14,bold: false,color:{ rgb: "000000" },},//设置居中alignment: {horizontal: "center",vertical: "center",wrapText: true,},    //设置边框border: {top: { style: "thin" },right: { style: "thin" },bottom: { style: "thin" },left: { style: "thin" },},};} }//设置第一行样式 第一行合并了五个单元格 因此只用设置A1if (key == "A1") {worksheet[key].s = {font: {name: "微软雅黑",sz: 22,bold: false,color: "000000",},alignment: {horizontal: "center",vertical: "center",wrapText: true,},border: {top: { style: "thin" },right: { style: "thin" },bottom: { style: "thin" },left: { style: "thin" },},};}else if ( key == "A2" ||key == "B2" ||key == "C2" ||key == "D2" ||key ==                     "E2") //设置第二行的样式{worksheet[key].s = {fill: { fgColor: { rgb: "000000" } },font: {sz: 20,name: "微软雅黑",bold: true,color: { rgb: "FFFFFF" },//最好写成这样，color: "000000"设置背景色会不生效},alignment: {horizontal: "center",vertical: "center",wrapText: true,},border: {top: { style: "thin" },right: { style: "thin" },bottom: { style: "thin" },left: { style: "thin" },},};}});this.$xlsx.utils.book_append_sheet(workbook, worksheet, "Sheet1");this.$xlsx.writeFile(workbook, "会议统计表格.xlsx");//表格名称
}

4.参考文档

1.只设置了第一行和第二行的表头样式，没有写怎么拼接请求回来数据和后面的样式设置

https://blog.csdn.net/mingketao/article/details/125333066

2.很详细的样式设置说明，涉及到一些参数的使用，中文文档比较友好

https://zhuanlan.zhihu.com/p/257845606

前端根据后端返回数据导出指定样式的表格(xlsx-js-style)相关推荐

前端将后端返回的带颜色的数据进行转换
前端将后端返回的带颜色的数据进行转换因为之前在调用后端接口的时候后端返给我的数据显示乱码:具体如下图所示: 然后这些数据在后台显示的是这样的的,如下图所示: 根据以上这三幅图片可以看到有些数据 ...
普通文件下载 + 前端获取后端返回的文件流并下载
参考资料前端接受后端文件流并下载的几种方法 ajax 请求二进制流图片文件 XMLHttpRequest 请求并处理二进制流数据之最佳实践 ajax请求二进制流进行处理(ajax异步下载文件) ...
前端与后端传递数据 — — JSON
前端与后端传递数据 - - JSON 1 前端传送JSON数据给后端 1.1 application/x-www-form-urlencoded默认格式 1.1.1 通过HttpServletRequ ...
python的前端和后端_前端与后端的数据交互（jquery ajax+python flask）
前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的数据发送与接收 1)提交表单数据 2)提交JSON数据后端的数据接收与响应 1)接收 ...
Fiddler中篡改后端返回数据
使用fiddler篡改返回数据,影响前端返回最近在验证一个优化需求,前端根据后端返回的身份证倒数第二位进行判断男女,如果是男生,则展示男生的图片:如果判断是女生,则展示女生的照片:如不能判断男女时, ...
python后端数据发送到前端_前端与后端的数据交互（jquery ajax+python flask）
前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的数据发送与接收 1)提交表单数据 2)提交JSON数据后端的数据接收与响应 1)接收 ...
后端处理数据保存请求流程multer+ajax 数据库添加数据前端与后端的数据联通在business_list 页面进行数据处理 @stage3---week3--day4
后端处理基础流程 $ npx be_app -e 快速构建项目骨架 $ yarn 安装依赖包修改 package.json {"name": "be-app" ...
python后端与前端数据交互_前端与后端的数据交互（jquery ajax+python flask）
前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的数据发送与接收 1)提交表单数据 2)提交JSON数据后端的数据接收与响应 1)接收 ...
前端给后端传递数据的时候,有些后端自己可以获取到的值应该由前端传递吗?
前端给后端传递数据的时候,有些后端自己可以获取到的值应该由前端传递吗? 场景: 1.比如我向后端传递一个学生做的试卷. 2.后端需要我把学生的答案和标准答案(在获取试卷的时候给我的,我知道很扯淡)同时 ...

前端根据后端返回数据导出指定样式的表格(xlsx-js-style)

最后的样式如下图所示：

1.下载xlsx-js-style依赖

2.在main.js中挂载到vue原型上，方便使用

3.代码及相关解释(有需要补充可以留言)

4.参考文档

前端根据后端返回数据导出指定样式的表格(xlsx-js-style)相关推荐

最新文章

热门文章