vue中把table导出表格excel

1.首先下载2个js，我的百度网盘有

2.安装依赖

npm install -S file-saver xlsx（这里其实安装了2个依赖）

npm install -D script-loader

3.项目中新建一个文件夹：（vendor---名字任取）

你在哪个页面用导出这个功能，也可以直接跟这个页面同级新建这个文件夹

4.在你要导出文件的这个vue页面中写2个方法

//        导出excle的2个方法        export2Excel(){          require.ensure([], () => {const { export_json_to_excel } = require('./vendor/Export2Excel');const tHeader = [ '时间', '地址', '姓名'];const filterVal = ['date', 'address', 'name'];const list = this.tableData;const data = this.formatJson(filterVal, list);export_json_to_excel(tHeader, data, '列表excel'); }) },formatJson(filterVal, jsonData){return jsonData.map(v => filterVal.map(j => v[j])) },

5.点击导出按钮调用这个方法--》export2Excel

this.export2Excel()

6.如果报错的话在build----webpack.base.conf.js中resolve的alias加入 'vendor':path.resolve(__dirname,'../src/views/Sign/vendor'),即可解决这个路径根据实际来调

这个js里面也要根据实际路径来相对的调整

7.导出结果（你想要啥子结果就去这个方法里面去配置啊）之前一直有个问题，日妈的原来是老眼昏花把ths.tableData  没换成我自己的表格数组 ，所以数据源这里要注意换，如果你要导出全部数据的话 分页那里选择  +9999这样就可以全部导出了

 BUG:当数据过大时，导出的excel可能为空？为啥呢？应为

应为ajax默认是异步请求，当你请求完毕这个导出js后，说不定你导出按钮调的接口还没跑完，所以可能导致请求的数据为空，导出的excel也只有页头，要么写promise,要么写在请求数据的里面，成功了在调excel这个js

转载于:https://www.cnblogs.com/myfirstboke/p/8243800.html

vue中把table导出表格excel相关推荐

在vue中把数据导出Excel文件
在vue中把数据导出Excel文件第一次尝试写文章在vue中把数据导出成Excel格式的文件,话不多,上代码: 第一步我们要先安装几个集成的插件 npm install -S file-saver ...
vue项目+xlsx+xlsx-style 实现table导出为excel的功能——技能提升
vue项目+xlsx+xlsx-style 实现table导出为excel的功能最近遇到一个需求,后端提供一组数据,根据这组数据,导出为一个excel表格. 步骤如下: 1. 导出内容的预览如下:包 ...
C# html的Table导出到Excel中
C#中导出Excel分为两大类.一类是Winform的,一类是Web.今天说的这一种是Web中的一种,把页面上的Table部分导出到Excel中. Table导出Excel,简单点说,分为以下几步: ...
如何将html表格导出到excel,html 页面导出到excel表格数据类型-如何将html里面的table导出成excel...
怎么把html导出到excel表格 1先,我们打开要转换成THML的表格文件.下是我用的WPS2019版截图,EXCEL软件操作上差不多 2.接下来,点击左上角的[文件] 3.在[文件]菜单里找到并点 ...
Vue中对Table表格中的输入项进行校验
项目开发中,经常会遇到的场景:对table表格的输入项字段进行校验,同时提交时整体校验. 这个坑真的爬了好久,几个需求做完了,校验也没实现,挫败!后来看到一个博主Element UI from实现校验 ...
vb 读取oracle中的表格数据,如何将数据库信息读取导出excel表格中-VB 从SQL数据库中把数据导出到Excel表格中，怎么写？...
VB 从SQL数据库中把数据导出到Excel表格中,怎么写? INSERT INTO OpenDataSource('Microsoft.Jet.OLEDB.4.0', 'Data Source=&q ...
vue 中luckysheet实现导出
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 vue 中luckysheet实现导出文章目录 vue中luckysheet实现导出二.使用步骤 1.引入库 2.vue 组件中初 ...
使用js代码将HTML Table导出为Excel
使用js代码将HTML Table导出为Excel的方法: 直接上源码 <html> <head> <meta http-equiv="Content-Type ...
Vue将echarts数据导出成excel文件
Vue将echarts数据导出成excel文件一.下载vendor插件下载 vendor 文件放置项目的 src 目录下链接:https://pan.baidu.com/s/1XYYQ186zo ...
Vue中使用Transfer实现表格穿梭框（可搜索）
Vue中使用Transfer实现表格穿梭框(可搜索) 需求:使用Transfer实现带分页并可搜索的穿梭框.给不同用户分配不同的应用服务. 前端 1.注册组件(main.js) import { Tr ...

vue中把table导出表格excel

vue中把table导出表格excel相关推荐

最新文章

热门文章