前端导出表格 修改样式（xlsx-style）用法

一. 应用机制

        xlsx-style 修改样式的机制  就是选中哪一行，那一列或者哪一个  然后去修改  比如表格最左上角的一个格子 坐标是（0， 0）下标  也可以叫做 A1 选中之后  可以修改其样式 

二. 实战讲解

1. 下载依赖

npm install xlsx-style -S

  首先下载依赖到项目

2. 引入到项目

import * as XLSX from 'xlsx'

3. 创建导出表格

        为什么说是创建导出表格而不是表格呢，是因为导出表格跟原本页面展示的表格可能不一样，打比方我导出页面表格比普通的表格下方多一行注释 等等，如果导出表格跟页面展示的一样，则可以用改表格，否则创建一个新表格 v-show="false" 也就是隐藏掉，用来导出， 上代码

1. <el-table :data="tableDatas" border style="margin-left: 5%;width: 84%;" id="report-table"
2. :header-cell-style="{ 'text-align': 'center' }" height="70vh" @row-dblclick="rowDblclick"
3. :cell-style="{ 'text-align': 'center' }" v-show="false">
4. <el-table-column :label="time + req.source + '检查问题统计报表'">
5. <el-table-column label="序号" align="center" width="100">
6. <template slot-scope="scope">
7. <span v-if="scope.row.index"> {{ scope.row.index }} span>
8. <span v-else>{{ scope.$index + 1 }}span>
9. template>
10. el-table-column>
11. <el-table-column v-if="show('zdlb')" prop="caseTypeDetail" label="问题类别" width="300">
12. el-table-column>
13. <el-table-column v-if="show('zdqyS')" prop="syncRoad" label="重点区域" width="300">
14. <template slot-scope="scope">
15. {{ scope.row.syncRoad }}
16. template>
17. el-table-column>
18. <el-table-column v-if="show('zdqyC')" prop="community" label="重点区域" width="300">
19. <template slot-scope="scope">
20. <span v-if="scope.row.community == '合并'"> {{ scope.row.community }} span>
21. <selectTag v-else :type="communityData" :value="scope.row.community">selectTag>
22. template>
23. el-table-column>
24. <el-table-column prop="total" label="总数" width="100">
25. el-table-column>
26. <el-table-column label="按时整改" width="200">
27. <template slot-scope="{}" slot="header">
28. <span>按时整改span>
29. <el-tooltip class="item" effect="dark" placement="top">
30. <i class="el-icon-question" style="vertical-align: middle;color:red">i>
31. <div slot="content">
32. <p>Tips：在规定时限内完成整改的案件p>
33. div>
34. el-tooltip>
35. template>
36. <el-table-column prop="ontimeNum" label="数量" width="100">
37. el-table-column>
38. <el-table-column prop="ontimeScore" label="扣分" width="100">
39. el-table-column>
40. el-table-column>
41. <el-table-column label="限时整改" width="200">
42. <template slot-scope="{}" slot="header">
43. <span>限时整改span>
44. <el-tooltip class="item" effect="dark" placement="top">
45. <i class="el-icon-question" style="vertical-align: middle;color:red">i>
46. <div slot="content">
47. <p>Tips：未在规定时限内完成整改的案件p>
48. div>
49. el-tooltip>
50. template>
51. <el-table-column prop="timelimitNum" label="数量" width="100">
52. el-table-column>
53. <el-table-column prop="timelimitScore" label="扣分" width="100">
54. el-table-column>
55. el-table-column>
56. <el-table-column label="超期整改" width="200">
57. <template slot-scope="{}" slot="header">
58. <span>超期整改span>
59. <el-tooltip class="item" effect="dark" placement="top">
60. <i class="el-icon-question" style="vertical-align: middle;color: red">i>
61. <div slot="content">
62. <p>Tips：超过规定时限内整改的案件p>
63. div>
64. el-tooltip>
65. template>
66. <el-table-column prop="overdueNum" label="数量" width="100">
67. el-table-column>
68. <el-table-column prop="overdueScore" label="扣分" width="100">
69. el-table-column>
70. el-table-column>
71. <el-table-column prop="accumulatedScore" label="累计扣分" width="100">
72. <template slot-scope="scope">
73. {{ scope.row.accumulatedScore ? parseFloat(scope.row.accumulatedScore).toFixed(2) : "" }}
74. template>
75. el-table-column>
76. <el-table-column label="备注" width="100">
77. el-table-column>
78. el-table-column>
79. el-table>

上面是源代码 可能过于复杂 我给大家上精简版

1. <el-table :data="tableDatas" border id="report-table" v-show="false">
2. <el-table-column :label="time + req.source + '检查问题统计报表'">
3. <el-table-column label="序号" align="center" width="100">
4. <template slot-scope="scope">
5. <span v-if="scope.row.index"> {{ scope.row.index }} span>
6. <span v-else>{{ scope.$index + 1 }}span>
7. template>
8. el-table-column>
9. <el-table-column label="备注" width="100">
10. el-table-column>
11. el-table-column>
12. el-table>

重要的是：绑定在 el-table 这个标签里的 id 

4. 导出事件

事件内 我们一行一行细讲  首先  获取当前导出表格的数据  这个时候就要用上之前导出表格上方绑定的 id 了  我们声明一个 wb 去接收 表格内数据转化的二进制 blob

var wb = XLSX.utils.table_to_book(document.querySelector("#report-table"));

我们可以打印一下 wb 看看里面有什么东西

 而我们所需要修改的表格则在 wb.Sheets 下， 我们在打印一下 wb.Sheets

 如果你导出表格只有一张的话 wb.Sheets 下就只有 Sheet1 一个参数 如果有其他表的话 则有：Sheet2, Sheet3 ... 以此类推 

 Sheet1 下方参数

参数	表达含义
!cols	代表每一列，数据格式为数组，比如 [{wpx:100}, {wpx: 100}], 则表示为前两列的宽为 100px
!merge	合并单元格，数据格式为数组 [{s:{r:0,c:0},e:{r:0,c:6}}], s（start）为开始单元格坐标，e（end）为结束单元格坐标，r （row）行，c（col）列，这里的例子代表合并第0行第0到 第0行第6个单元格
A1	A1 代表单元格第一行第一个 往右走则是 B1， C1...这个可以参照导出表格里的 A列第一行 每个单元格都有其格式 {t："s", s: {}, v:""  }， t（type）为类型 其参数有：n（number数字类型），s（string字符串类型）；s（style）里面参数为样式，你想要修改单元格的内部样式，v（value）是单元格内容

知道参数  那么我们就继续上代码了

比方：我要修改前24列的单元格宽

1. // 表Sheet1
2. wb.Sheets.Sheet1["!cols"] = [];
3. // 动态添加前24列 宽为140px
4. for (let a = 0; a < 24; a++) {
5. wb.Sheets.Sheet1["!cols"].push({
6. wpx: 140,
7. })
8. }

表格添加边框并修改字体

1. let 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"]
2. // 循环渲染表格样式
3. arr.forEach((item) => {
4. for (let i = 1; i < 7 + this.tableData.length; i++) {
5. let str = (item + i).toString();
6. if (wb.Sheets.Sheet1[str]) {
7. wb.Sheets.Sheet1[str].s = {
8. font: {
9. name: "宋体",
10. sz: 14,
11. // bold: true,
12. // color: { rgb: "FC5531" }
13. },
14. border: {
15. top: {
16. style: 'thin',
17. color: {
18. auto: 1
19. }
20. },
21. left: {
22. style: 'thin',
23. color: {
24. auto: 1
25. }
26. },
27. right: {
28. style: 'thin',
29. color: {
30. auto: 1
31. }
32. },
33. bottom: {
34. style: 'thin',
35. color: {
36. auto: 1
37. }
38. }
39. },
40. alignment: {
41. // 居中
42. horizontal: "center",
43. vertical: "center",
44. indent: 0,
45. },
46. }
47. }
48. })
49. })

        先循环 arr 再循环 this.tableData.length 是因为  循环相加之后 拼凑成 A1 A2 B1 B2 ... 这样类型的 wb.Sheets.Sheet1[str].s 则是修改它的样式

%20

 手动合并单元格（手动合并可能会导致表格报问题）

%20

1. //%20手动合并%20%20最后三行注释
2. wb.Sheets.Sheet1["!merges"].push({
3. %20%20e:%20{
4. %20%20%20%20r:%20parseInt(_tableData.length%20+%202),%20c:%200
5. %20%20},
6. %20%20s:%20{
7. %20%20%20%20r:%20parseInt(_tableData.length%20+%204),%20c:%205
8. %20%20}
9. })

%20

 这个点 是 即可 还得研究一下 怎么解决

结束  打完 手工