将页面中表格数据导出excel格式的文件（vue）

　　近期由于项目需要，需要将页面中的表格数据导出excel格式的文件，折腾了许久，在网上各种百度，虽然资料不少，但是大都不全，踩了许多坑，总算是皇天不负有心人，最后圆满解决了。

　　1、安装相关依赖(npm安装可能会出现某些错误，可以使用cnpm)：

npm install file-saver --save   // 保存文件用
npm install xlsx --save    // 转二进制用
npm install script-loader --save-dev    // xlsx核心文件

　　2、下载两个核心js文件，Blob.js和 Export2Excel.js 下载地址：Blob.js和 Export2Excel.js文件

　　3、在src目录下新建vendor文件夹，将Blob.js和 Export2Excel.js放进去。

　　4、更改webpack.base.conf.js配置。

　　在resolve的alias里添加如下代码：

'vendor': path.resolve(__dirname, '../src/vendor')

　　5、在需要导出excel格式文件的页面中写入以下两个方法，如：

methods: {formatJson(filterVal, jsonData) {return jsonData.map(v => filterVal.map(j => v[j]))},export2Excel() {const _this = thisrequire.ensure([], () => {const { export_json_to_excel } = require('../vendor/Export2Excel');const tHeader = ['ID', '封面', '小说名','二级分类','作者','进度','更新时间', '状态'];const filterVal = ['novelId', 'imageUrl', 'title', 'categoryName', 'author', 'completeStatus', 'updateTime', 'status'];const list = _this.dataList;const data = _this.formatJson(filterVal, list);export_json_to_excel(tHeader, data, '小说列表');})}}

　　注意：tHeader表示表头的标题，filterVal表示表头的字段名，可通过点击事件调用导出方法。

<button type="primary" @click="export2Excel">导出</button>

转载于:https://www.cnblogs.com/sunjuncoder/p/9894691.html

将页面中表格数据导出excel格式的文件（vue）相关推荐

DataTable中的数据导出Excel文件
DataTable中的数据导出Excel文件 View Code ///<summary> /// 将DataTable中的数据导出到指定的Excel文件中 ///</summary ...
在vue中把数据导出Excel文件
在vue中把数据导出Excel文件第一次尝试写文章在vue中把数据导出成Excel格式的文件,话不多,上代码: 第一步我们要先安装几个集成的插件 npm install -S file-saver ...
将Excel中的数据导入html以及将html表格数据导出Excel
导入Excel: html: <input type="file" onchange="importExcel(this,false,function(data){ ...
vue表单中批量导入功能_vue实战(11)——vue+element UI实现表格数据导出Excel功能
一.应用场景按照需求导出功能分为勾选批量导出及按照查询结果导出,考虑到接口操作导出的复杂性,因此实现了js控制导出的功能导出功能截图二.安装相关依赖 cnpm install --save xl ...
ASP.NET中GridView数据导出EXCEL小结
本周按业务部门的要求,做一个客户拜访登记管理的小程序(B/S模式),在这里面用到了GridView来显示根据条件查询到的数据,但业务部门同时要求数据要导出为EXCEL方面使用,在网上查找了很多资料,汇 ...
easyUI中表格实现导出excel功能
今天在工作过程中,遇到一个导出功能,希望分享给大家. 导出: 1:首先写入导出按钮和需要导出的datagrid列表:(代码如下) 2:点击导出按钮:获得需要导出的字段与不需要导出的数据进行数据处理,并 ...
如何把 word 文档中表格数据导出
1.问题 word文档表格中字段数据中有段落标记(^p)符号,导致复制粘贴数据到 excel 中l时 ,会因为标记符号把本应是一个字段分成多个字段存储在不同的单元格中. 2.解决方法: 1.选中所有单 ...
Navicat Premium 15 无法导出excel格式的文件
博主使用的Navicat版本是15.0.25,目前的最新版. 今天有业务需要导出一个excel的文件, 但是在执行导出的过程中一直报错.如下图示: 其他格式可以正常导出,只有在执行xls和xlsx格式 ...
将Html中表格数据导出为Excel
1.自定义JavaScript函数实现 <input type="button" name="out_excel" onClick="Autom ...

将页面中表格数据导出excel格式的文件（vue）

将页面中表格数据导出excel格式的文件（vue）相关推荐

最新文章

热门文章