vue3.0导出excel带格式_vue3导出excel表格格式不对

作者：IT小白 | 2024-06-29 22:19:22

踩

vue3导出excel表格格式不对

这个真的困扰了我整整一天，我尝试了xlxs file-saver两个组件的版本，怎么搞都不行

先不说vue3.0 不能import进来，只能require(‘xlxs’),require(‘file-saver’)
把这两个插件引入是能导出excel的，但是不支持更改样式；
写法如下：

 function exportFun() {
      const time = new Date().getTime();
      var XLSX = require("xlsx");
      let namestring = "";
      var wb;
        wb =
          XLSX &&
          XLSX.utils.table_to_book(document.querySelector("#exporttable"),{raw:true});          
        exportfile(wb, namestring);
}
function exportfile(wb: any, namestring: any) {
      var XLSX = require("xlsx");
      var wbout =
        XLSX &&
        XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array",
        });
      let FileSaver = require("file-saver");
      try {
      // let buf = s2ab(wbout)
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          // 设置导出文件名称 xxx.xlsx
          namestring
        );
        close();
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

查了另一种方式，通过Blob.js,Export2Excel的写法，参考： https://www.cnblogs.com/-wenli/p/14843432.html，但是我代码写法是ts，调了半天总算不报错了，结果还是跑不起来，放弃

或者引入xlxs-style插件修改，但是这个需要修改源代码，我想着到时候打包到生产得手动打包，项目不允许就放弃这个方法了，到底能不能跑起来暂时未知

终于找到了一个方法：参考https://www.jb51.net/article/186856.htm，解决了，困扰了我一天的问题解决了，就这么几行代码，啥都不用安装，原理暂时不懂，但是解决了问题。等有时间研究研究

template里面的东西

        <el-button @click="exportFun">导出</el-button
        ><a
          download="table导出Excel"
          id="excelOut"
          href="#"
          rel="external nofollow"
          >table导出Excel</a
        >

      <table border="1" style="height: 200px; width: 1200px" id="exporttable">
        <tr>
          <td colspan="9" style="color: red; font-size: 22px">
            标题111111111
          </td>
          <!--注意此处的td标签由原来的三个变为一个-->
        </tr>
        <tr>
          <td>报送机关名称</td>
          <td>123123</td>
          <td colspan="7">111</td>
        </tr>
        <tr>
          <td><span style="color: red">必填</span>报告期限</td>
          <td>8</td>
          <td colspan="7">6</td>
        </tr>
        <tr>
          <td>填报日期</td>
          <td>8</td>
          <td colspan="7">6</td>
        </tr>
        <tr>
          <td colspan="9">
            填表说明：；
            <br />
            这是数据 <br />
           换行了 
            </td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
        </tr>
      </table>




js里面的代码：


    function exportFun() {
      tableToExcel("exporttable", "下载模板");
    }

    //base64转码
    function base64(s: any) {
      return window.btoa(unescape(encodeURIComponent(s)));
    }
    //替换table数据和worksheet名字
    function format(s: any, c: any) {
      return s.replace(/{(\w+)}/g, function (m: any, p: any) {
        return c[p];
      });
    }

    function tableToExcel(tableid: any, sheetName: any) {
      var uri = "data:application/vnd.ms-excel;base64,";
      var template =
        '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +
        'xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>' +
        "<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>" +
        "</x:ExcelWorkbook></xml><![endif]-->" +
        ' <style type="text/css">' +
        "table td {" +
        "border: 1px solid #000000;" +
        "width: 200px;" +
        "height: 30px;" +
        " text-align: center;" +
        "background-color: #4f891e;" +
        "color: #ffffff;" +
        " }" +
        "</style>" +
        '</head><body ><table class="excelTable">{table}</table></body></html>';
      if (!tableid.nodeType) tableid = document.getElementById(tableid);
      var ctx = {
        worksheet: sheetName || "Worksheet",
        table: tableid.innerHTML,
      };
      const a: any = document.getElementById("excelOut");
      a.href = uri + base64(format(template, ctx));
      a.click();
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/770488