Vue实现excel文件下载

话不多说，直接上代码
1、安装插件

cnpm install vue-json-excel

2、main.js里面引入

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

3、导出按钮

      <!--导出用户信息excel表格--><download-excelclass = "export-excel-wrapper":data = "json_data":fields = "json_fields"name = "用户信息列表.xls"><el-button type="primary" size="small">导出EXCEL</el-button></download-excel>

4、data区写想要导出的字段以及导出的数据(数据写死测试，后续可调接口进行传值)

        //导出exceljson_fields: {"姓名": "name",    //常规字段"用户名":"username","所属组织":"organization","权限":"auth",},json_data: [//写死，后续可通过接口进行传值{name:'汤姆',username:'admin1',organization:'地球村',auth:'超级管理员'},{name:'杰米',username:'admin2',organization:'地球村',auth:'超级管理员'}],json_meta: [[{" key ": " charset "," value ": " utf- 8 "}]]

5、点击下载按钮
5、excel下载成功

*

兄弟萌，赶快试试吧

Vue实现excel文件下载相关推荐

Vue的Excel文件下载
最早开始接触下载是后端直接返回一个链接,通过a标签直接下载,甚至再简单点直接window.open直接下载.恰巧今天第一次经历文件流下载,代码如下 this.$http.get(`xxx`).then ...
VUE前端Excel文件下载，使用后台文件名
第1步:在后台响应response中增加: response.setHeader("Content-Disposition", "attachment;fileName= ...
vue 实现本地excel文件下载功能
今天后端开发人员给了我一个excel文件,跟我说要实现excel下载功能,就是将给的excel文件下载下来. 所以我刚开始就直接还用之前用过的方法来实现,不过有一点小瑕疵,就是名字是默认的不能修改.先 ...
Vue 下载 Excel 文件
Vue 下载 Excel 文件 Vue前端将List列表下载为Excel文件安装依赖包首先前端将List列表生成Excel文件需要下载几个依赖包. npm install -S file-save ...
Vue实现Excel模板文件的上传与下载
Vue实现Excel模板文件的上传与下载一.前言越来越多的项目开始使用前后端分离的方式来进行开发了,前端使用的vue来进行页面处理的,所以正常的文件下载和上传肯定是少不了的,因为这也是自己第一次使 ...
SpringBoot+Vue下载Excel文件流（No converter、Excel乱码）
目录介绍 No converter Excel乱码正确代码后端代码前端代码方法1 方法2 方法3 介绍后端使用SpringBoot.Mybatis Plus,前端使用Vue,进行Excel ...
vue xlsx 导入导出_只需三步vue实现excel文件数据提取并存为json数据
前言: 以前将excel数据导入到数据库是通过前端,将excel文件上传到后端,通过后端语言进行相应的加工将excel文件中的数据取出并存入数据库:从而实现数据库的存入流程.但是这也带来了一些问题,首 ...
js-xlsx vue导入excel在线预览
js-xlsx vue导入excel在线预览导入XLSX库官方地址Github 安装 npm install xlsx --s 引入 import XLSX from 'xlsx' HTML &l ...
vue导出excel加一个进度条_vue导出excel遇到的问题解决方法
本篇文章给大家带来的内容是关于vue导出excel遇到的问题解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 需求: Vue+element UI el-table下的导出当前 ...
(vue)vue导出excel文件打不开，或者文件内容为object object
(vue)vue导出excel文件打不开,或者文件内容为object object[已解决] bug: 主要原因:没有注意到后端返回的数据格式,需要的是res而不是res.data 正确写法: < ...

Vue实现excel文件下载

Vue实现excel文件下载

兄弟萌，赶快试试吧

Vue实现excel文件下载相关推荐

最新文章

热门文章