前端导出表格，且带边框样式

最新推荐文章于 2024-08-06 14:48:00 发布

向梦想出发11

最新推荐文章于 2024-08-06 14:48:00 发布

阅读量3.9k

点赞数

分类专栏： vue 文章标签： javascript

本文链接：https://blog.csdn.net/github_38469586/article/details/106982198

版权

本文介绍了在前端项目中，使用iview-admin2.0框架并结合FileSaver、XLSX和xlsx-style库来实现带边框的表格导出。在导入xlsx-style库时遇到模块找不到的问题，通过修改源码解决，并引入了第三方工具xlsxStyle.utils。文章提供了详细的步骤和代码截图，特别强调了为保持表格边框样式的重要性。

摘要由CSDN通过智能技术生成

背景：
我的项目用的是iview-admin2.0框架，里面将iview进行了升级，而且表格里用到了fiexd，对特殊的列进行了浮动。

需求是要求前端进行表格导出，而且要带边框。

用到了如下技术；
import FileSaver from “file-saver”;

import XLSX from “xlsx”;

import xlsxStyle from “xlsx-style”;

import XSU from “./xlsxStyle.utils”;

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

步骤如下：

1.直接npm 分别安装 FileSaver、XLSX、xlsxStyle

FileSaver、XLSX、xlsxStyle可以直接npm；

XSU是git上下载下来的静态资源（https://github.com/Ctrl-Ling/XLSX-Style-Utils），别人封装的方法。
此处不详细贴代码了；

import XLSX from “xlsx-style”

2.我新增加了一个tool.js
在这个js里
import FileSaver from “file-saver”;
import XLSX from “xlsx”;
import xlsxStyle from “xlsx-style”;
import XSU from “./xlsxStyle.utils”;

引入第三个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;（不要因为乱码就不往下了，往下翻）

第四个就是从上面说到的静态资源的链接里down的资源，将里面的xlsxStyle.utils.js放到本地的文件夹里，tool.js 这里要能引到。
我这边放在了同级别目录下；
在这里插入图片描述
当然，xlsxStyle.utils.js 文件最下面
别忘了添加 export default XSU;

3.tool.js里添加方法，可以多处导出使用
方法如下：

export const exportExcel = (function (id,name) {
   
  return new Promise((resolve, reject) => {
   
    /* 从表生成工作簿对象 */
    //  判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，
    let fix = document.querySelector('.ivu-table-fixed-right');
    let wb 
    if (fix)