sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色,居中,自动换行,宽度,百分数展示等

本文介绍了如何在前端利用sheetJs和xlsx-style库实现导出带有背景色、居中、自动换行、宽度调整和百分比显示等功能的Excel表格。通过npm安装相关库,解决变量冲突问题,并详细阐述了从获取页面数据到导出的每一步骤,包括设置单元格样式、宽度、百分比和工作簿操作。示例代码展示了具体实现方式。
摘要由CSDN通过智能技术生成

之前写过一篇博客,是关于elementUi—table组件+xlsx插件实现导出——sheetJs的,之前实现的功能有:

  1. 根据dom获取内容
  2. 创建工作簿
  3. 调整单元格的宽度
  4. 实现百分数的展示
  5. 插入到工作表中
  6. 导出到浏览器中

博客地址如下:
elementUi—table组件+xlsx插件实现导出——sheetJs:https://blog.csdn.net//article/details/123554455?spm=1001.2014.3001.5501

但是上面的并不能完全满足用户的需求,用户需要实现单元格内容换行、设置单元格背景色及单元格内容居中等功能。

此时单纯的引入sheetJs是不能满足要求了,此时还需要一个xlsx-js的文件,专门用于处理sheetJs的样式问题。

我从网上找了好久,终于找到了对应的文件。

特别感谢大神的链接:
使用js-xlsx纯前端导出excel:https://www.likecs.com/show-203708170.html

上面的地址内容超级详细,而且一步步的将内容引出并提供解决方案,这才是一篇好的技术博客,赞!!!

直接上解决办法,有空的同学可以仔细阅读上面的博客链接。

1. 引入两个js——xlsx.extendscript.jsxlsx.full.min.js

这两个文件其实可以通过使用npm的方式来安装到本地,然后就能从本地文件中找到响应的js了。

1.1 通过npm install xlsx

安装后dist文件夹下有一个文件xlsx.extendscript.js,引入到项目中

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值