vue3.0导出excel带格式

vue3.0导出excel带格式,第1张

这个真的困扰了我整整一天,我尝试了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);
      }
}

查了另一种方式,通过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 =
        ' +
        'xmlns="http://www.w3.org/TR/REC-html40">" +
        ' " +
        '{table}
'
; 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(); }

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1320162.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-11
下一篇 2022-06-11

发表评论

登录后才能评论

评论列表(0条)

保存