js如何导出exel文件？

JavaScript010

js如何导出exel文件？,第1张

简单的办法：使用js生成一个table，可以直接复制到excel中，网上有很多表格插件。

复杂的办法：js传递数据到服务器，服务器生成表格后返回一个下载链接。

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

在1995年时，由Netscape公司的BrendanEich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。

MicrosoftExcel是微软公司的办公软件Microsoftoffice的组件之一，是由Microsoft为Windows和AppleMacintosh操作系统的电脑而编写和运行的一款试算表软件。Excel是微软办公套装软件的一个重要的组成部分，它可以进行各种数据的处理、统计分析和辅助决策操作，广泛地应用于管理、统计财经、金融等众多领域。

    最近公司项目要求对之前后端excel操作做优化，需要放到前端来做。讲道理，我觉得没啥子必要，尤其是当我在官网导入一张5k+的excel时浏览器卡死后更是觉得需求之智障。但是没法子，还是要先自己做出来看看实际效果才行，我直接原地6个点......

导出

     安装依赖

        cnpm i xlsx --save

     实现

         定义公共组件Excel，该组件需要提供导出按钮，当点击时触发相应逻辑

         组件可接收的参数如下

                默认值如下

             根据传入的type类型决定到底是显示导入、导出、预览按钮还是都显示

             当点击导出按钮，触发回调

                引入xlsx

                导出逻辑

                首先要做的就是校验是否用户自己实现了导出函数，以及传入的数据是否为数据且是否为空，由于不止导出要用，故放到untils中作公共函数，其他的辅助函数也从中导出

                     isVoid函数

                      getTable函数

                     getSheetHead函数

                     format函数

                     getCharCol函数

             导出结果如下

     改进

        可能你也发现了，导出的结果是没有样式信息的,那么如何增加样式呢？答案是xlsx-style

         安装依赖

            cnpm i xlsx-style --save

            npm install file-saver --save

         xlsx-style导入报错

            将报错文件copy一份，修改后放到assets目录下

            找到umijs的webpack配置文件，新增如下配置

         增加文字颜色和首行高亮处理

                增加辅助函数calculateWidth

                增加辅助函数addHeadlineStyle

                导出方式使用filesave

                效果如下

导入

        现在，我们来完成导入功能，并且导入后需要使用表格进行分页预览

         新增modal弹窗，用作预览界面

        对应函数renderBody如下

        对应函数renderButton如下

        对应函数onPageChange如下

        点击导入按钮，回调处理如下

        新增的辅助函数如下

        新增组件状态如下

        导入预览效果如下

文档

    https://www.npmjs.com/package/xlsx-style

    https://github.com/eligrey/FileSaver.js

    https://www.npmjs.com/package/xlsx?activeTab=readme

如有问题，欢迎评论指正哦~~

最后，还有个很重要的事情，点个赞再走吧，客官~~

导入

导入时使用excelio的open方法，在successCallBack回掉中我们可以获取到Spread.Sheets的JSON对象。

导出

导出时使用save方法，传递json对象，在successCallBack中会获得一个Excel文件的blob对象。您可以在前段通过使用FileSaver.js直接保存Excel，也可将blob提交服务器处理。

具体的代码实现，请参考下面的博客

http://blog.gcpowertools.com.cn/post/spreadsheetsv10-clientside-excelio.aspx