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

背景:
我的项目用的是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/[email protected]@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');
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用第三方库 `SheetJS` 来实现前端 table 导出 excel 并样式。以下是一个简单的示例: 1. 安装 SheetJS ``` npm install xlsx-style --save ``` 2. 在你的代码中引入 SheetJS ```javascript import XLSX from 'xlsx-style'; ``` 3. 编写导出函数 ```javascript exportExcel() { // 获取 table 元素 const table = document.querySelector('#my-table'); // 将 table 转换为 SheetJS 的 worksheet const worksheet = XLSX.utils.table_to_sheet(table); // 创建 workbook const workbook = XLSX.utils.book_new(); // 将 worksheet 添加到 workbook 中 XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); // 生成二进制流并下载 XLSX.writeFile(workbook, 'my-table.xlsx', { bookType: 'xlsx', bookSST: false, type: 'binary' }); } ``` 4. 在 table 中定义需要导出样式 ```html <table id="my-table"> <thead> <tr> <th style="background-color: #ccc; color: #fff;">Column 1</th> <th style="background-color: #ccc; color: #fff;">Column 2</th> <th style="background-color: #ccc; color: #fff;">Column 3</th> </tr> </thead> <tbody> <tr> <td style="background-color: #f00; color: #fff;">1</td> <td style="background-color: #0f0; color: #fff;">2</td> <td style="background-color: #00f; color: #fff;">3</td> </tr> <tr> <td style="background-color: #0ff; color: #000;">4</td> <td style="background-color: #f0f; color: #000;">5</td> <td style="background-color: #ff0; color: #000;">6</td> </tr> </tbody> </table> ``` 在导出时,SheetJS 会自动将表格中的样式应用到导出的 excel 文件中。不过需要注意的是,SheetJS 对于某些 CSS 样式可能不支持,导致导出的 excel 文件中样式不完全一致。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值