vue导出excel(简单方法完整介绍)

1.安装插件

cnpm install vue-json-excel

2.min.js中引入使用

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

3.直接在页面中使用

<download-excelclass = "export-excel-wrapper":data = "json_data":fields = "json_fields"name = "远程诊断报告导出.xls"><!-- 上面可以自定义自己的样式，还可以引用其他组件button --><el-button type="primary" size="small">导出EXCEL</el-button>
</download-excel>

data() {return {json_fields: {"头部-诊断名称": "name",    //常规字段"头部-联系电话": "phone.mobile", //支持嵌套属性"头部-损坏区域代码": {field: "phone.landline",//自定义回调函数callback: value => {return `损坏区域代码 - ${value}`;}}},json_data: [{name: "损坏的组件一",city: "New York",country: "United States",birthdate: "1978-03-15",phone: {mobile: "1-541-754-3010",landline: "(541) 754-3010"}},{name: "损坏的组件二",city: "Athens",country: "Greece",birthdate: "1987-11-23",phone: {mobile: "+1 855 275 5071",landline: "(2741) 2621-244"}}],json_meta: [[{" key ": " charset "," value ": " utf- 8 "}]]};}

ps：

json_data: 需要导出的数据

json_fields: 自主选择要导出的字段，指定嵌套数据并将标签分配给键是标签的字段，值是JSON字段。这将“按原样”导出字段数据。如果需要自定义导出的数据，可以定义回调函数。里面的属性是excel表每一列的title,注意多个词组组成的属性名要加双引号

如果需要自定义导出的数据，可以定义回调函数。

还有一种比较复杂的方法，但是比较好控制 https://www.cnblogs.com/Mrfan217/p/6944238.html

vue导出excel(简单方法完整介绍)相关推荐

vue导出excel加一个进度条_vue导出excel遇到的问题解决方法
本篇文章给大家带来的内容是关于vue导出excel遇到的问题解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 需求: Vue+element UI el-table下的导出当前 ...
vue导出excel加一个进度条_Vue实现在前端导出Excel
安装依赖进入项目文件夹,打开cmd或者在Webstorm中的Terminal中输入: npm install -S file-saver xlsx npm install -D script-loa ...
懒人小工具1：winform自动生成Model,Insert,Select,Delete以及导出Excel的方法
懒人小工具2:T4自动生成Model,Insert,Select,Delete以及导出Excel的方法 github地址:https://github.com/Jimmey-Jiang/J ...
vue导出excel功能实现
vue导出excel功能实现第一步安装依赖包第二步在项目中assets创建一个新的文件夹js用于存放Blob和Export2Excel两个js文件第三步在你那个组件中使用写事件方法 Expor ...
封装vue导出excel组件（扩展嵌入图片、操作工作表、表格样式等功能）
导出的excel中嵌入图片,同时还需要操作多个工作表与表格样式, 看了一些java的插件不太适合,因为我这边的需求是动态表单,字段不固定.后端的插件大部分依赖实体类注解,要不就是操作比较繁琐.又看了一 ...
vue导出excel表的时候有多张图片
vue导出excel的时候多张图片遇到数据结构是[ { id:id, image:['图片','图片','图片'] } ] 这样的数据导出,使用插件 js-table2excel 导出的时候发现它只 ...
(vue)vue导出excel文件打不开，或者文件内容为object object
(vue)vue导出excel文件打不开,或者文件内容为object object[已解决] bug: 主要原因:没有注意到后端返回的数据格式,需要的是res而不是res.data 正确写法: < ...
vue导出excel （兼容ie）
参考文章链接首先在公共js文件里新建exportExcel.js文件,输出一个exportMethod函数 import axios from "axios"; // 导出Exc ...
csv和excel php 解析_PHP 高效导入导出Excel(csv)方法之fgetcsv()和fputcsv()函数
CSV,是Comma Separated Value(逗号分隔值)的英文缩写,通常都是纯文本文件. 一.CSV数据导入函数fgetcsv() fgetcsv() 函数从文件指针中读入一行并解析 CSV ...

vue导出excel(简单方法完整介绍)

vue导出excel(简单方法完整介绍)相关推荐

最新文章

热门文章