vue 导出Excel

我会带着你远行 2022-12-27 08:00 184阅读 0赞

### 目录 ###

*  vue 实现前端导出Excel
 *   *  安装依赖
     *  添加js文件
     *  实现代码

# vue 实现前端导出Excel #

## 安装依赖 ##

1.  npm install -S file-saver xlsx
2.  npm install -D script-loader

## 添加js文件 ##

添加 js 文件 Export2Excel.js  
[资源链接][Link 1]

在/src目录下 新建vendor文件夹  
![在这里插入图片描述][20201209101701904.png]

## 实现代码 ##

按钮代码

<el-form-item>
       <el-button  style="margin:0 0 20px 20px;" type="primary" icon="el-icon-document" @click="handleDownload">导出 Excel
       </el-button>
    </el-form-item>

导出代码

// 导出
        handleDownload() { 
          import('@/vendor/Export2Excel').then(excel => { 
          	// 定义表头
            const tHeader = ['车道', '公司编号', '箱体注册码', '检验码', '箱体重量', '危险标识', '箱体残损', '封签状态', '获取时间']
            // 表头对应字段
            const filterVal = ['groupName', 'ownerCode', 'registrationCode', 'checkDigit', 'containerSize', 'dangerousMark', 'containerStatus', 'sealStatus','recordDate']
            const list = this.list // 表格数据
            const data = this.formatJson(filterVal, list)
            excel.export_json_to_excel({ 
              header: tHeader,
              data,
              filename: '历史记录', //文件名
              autoWidth: true,//autoWidth
              bookType: 'xlsx' //类型
            })
          })
        },
        formatJson(filterVal, jsonData) { 
          return jsonData.map(v => filterVal.map(j => { 
            if (j === 'timestamp') { 
              return parseTime(v[j])
            } else { 
              return v[j]
            }
          }))
        }

[Link 1]: https://download.csdn.net/download/weixin_44933530/13602265
[20201209101701904.png]: /images/20221120/b731c9419e914e14bb62c9bf43e5644a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue导出excel 纯前端

下载 npm install vue-json-excel --save 使用 import JsonExcel from 'vue-json-excel

灰太狼/ 2023年01月10日 14:44/ 0 赞/ 164 阅读

相关 vue 导出Excel

目录 vue 实现前端导出Excel 安装依赖添加js文件实现代码 vue 实现前端导出Excel 安装依赖

我会带着你远行/ 2022年12月27日 08:00/ 0 赞/ 185 阅读

相关 vue导出excel

1.安装相关依赖 npm install file-saver -S npm install xlsx -S npm install script-l

野性酷女/ 2022年12月04日 09:18/ 0 赞/ 170 阅读

相关 vue前端导出excel

vue前端导出excel教程，如此简单解决方法： 1.安装依赖，如果下载慢，npm也可以换成cnpm npm install file-saver -S npm

小咪咪/ 2022年12月04日 09:15/ 0 赞/ 202 阅读

相关 VUE导出excel表格

本来想直接白嫖文档demo和大佬博客的demo，发现白嫖失败，于是写下自己踩坑过程目录安装命令在src下新建立一个verdor文件

╰半橙微兮°/ 2022年10月08日 02:30/ 0 赞/ 280 阅读

相关 Vue +springboot 导出excel

两种实现方式：1.后台返回json，前台通过xlsx解析，然后生成excel文件；2.后台返回文件流；第一种方式：贴出前台代码，后台的就不需要了吧，就是很简单的json数据

秒速五厘米/ 2022年04月25日 01:24/ 0 赞/ 432 阅读

相关 vue 导出Excel

[原博主地址][Link 1] [https://blog.csdn.net/u010427666/article/details/79208145][Link 1]

我就是我/ 2022年03月02日 01:20/ 0 赞/ 288 阅读

相关 vue-cli3导出表格excel，Export2Excel导出表格，导出多sheet excel，vue导出多页表格

目录（一）直接调用（二）、封装导出函数调用 -------------------- 最近做项目中有一个导出excel表格的需求具体思路是：后端返回给我j

痛定思痛。/ 2022年01月30日 07:45/ 0 赞/ 964 阅读

相关 vue导出excel文件

首先需要设置请求类型blob。axios.get(url, \{params\},responseType: 'blob') 请求成功后通过Blob方法实现下载

深碍√TFBOYSˉ_/ 2021年10月01日 10:18/ 0 赞/ 486 阅读

相关 Vue中导出Excel

目录方式一：vue-json-excel 1、引入vue-json-excel 2、 main.js中全局注册 3、使用 4、效果图方式二：file

- 日理万妓/ 2021年07月25日 11:09/ 0 赞/ 1397 阅读