npm install xlsx 前端导出Excel

最新推荐文章于 2024-05-11 15:22:12 发布

pure_light

最新推荐文章于 2024-05-11 15:22:12 发布

阅读量2w

点赞数 1

分类专栏： web React javascript 文章标签： sheetJS JS excel

本文链接：https://blog.csdn.net/qq_27727251/article/details/97814671

版权

web 同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

React

5 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

前言：博主后端java 出身，关于导出excel文件，后端可以使用 POI 或者阿里模板 EasyPOI来实现。没想到js 通过插件也能实现同样的功能！

背景：早上打卡后，博主准备划水时，老大突然叫我去看一个问题（苦逼。。）。老大说线上导出excel文件发现不能使用SUM（）函数。让我看一下是什么原因。所以就有了这篇文章。

博主根据excel 大致推测时不能使用sum函数的这列应该时，cell 格式应该不对，Excel没法识别。所以楼主正准备去后台开始扒拉代码。找了好久，tmd 咋没有POI 相关的类。

没办法，又打开了前端代码。 F12 追踪后，发现导出 excel 功能是一个 js 文件。我擦勒。这么nb!

一番研究过后（百度、谷歌之后）。才发现，原来 js 有个插件可以实现文件导出，厉害厉害。

插件安装：

npm install xlsx

大概是这个东东。但是问题又来了，这js怎么操作cell 修改样式啊！怎么没有cell 相关的概念，头大啊。。。。

?，继续百度之。。发现写法都一样啊，但是没出现我们老大的问题？还是他们不用sum() 函数。。。苦逼

换成google 继续。最后发现有一个解决方案！看着靠谱叫sheetjs 的玩意！链接：http://sheetjs.com/demos/table.html

可以实现我的需求！

继续百度sheetjs 。下面是真正的解决方案！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
</head>

<body>
<button onclick="downloadExl(jsono)">导出</button>
<script type="text/javascript">
    window.onload=function () {
      
        var filename = "file.xlsx"; //文件名称
        var data = [[1,2,3],[true, false, null, "sheetjs"],["foo","bar",new Date("2014-02-19T14:30Z"), "0.3"], ["baz", null, "qux"]];  //数据，一定注意需要时二维数组
        var ws_name = "Sheet1"; //Excel第一个sheet的名称
        var wb = XLSX.utils.book_new(), ws = XLSX.utils.aoa_to_sheet(data);
        XLSX.utils.book_append_sheet(wb, ws, ws_name);  //将数据添加到工作薄
        XLSX.writeFile(wb, filename); //导出Excel
    }
</script>

</body>

</html>

最后完美解决！

pure_light

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
7
评论
npm install xlsx 前端导出Excel

前言：博主后端java 出身，关于导出excel文件，后端可以使用 POI 或者阿里模板EasyPOI来实现。没想到js 通过插件也能实现同样的功能！背景：早上打卡后，博主准备划水时，老大突然叫我去看一个问题（苦逼。。）。老大说线上导出excel文件发现不能使用SUM（）函数。让我看一下是什么原因。所以就有了这篇文章。博主根据excel 大致推测时不能使用sum函数的这列应该...
复制链接

扫一扫