H5可用、IOS手机无效、安卓无效、小程序无效。
无效的原因未知,如有兴趣,可自行研究。
此插件是我在搞VUE项目时,PC端的web后台用的小功能。
搞到uni-app后,发现只有H5有用,扔了觉得可惜,还是放上来吧。

使用了 vue-json-excel 插件,需要先安装此插件。

复制代码npm install vue-json-excel
或
npm i vue-json-excel

然后在 main.js 文件里加入

复制代码import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

最后在需要使用的地方

复制代码<download-excel 
    :data="json_data" 
    name="excel.xls"
>
    下载文件
</download-excel>

 

属性名 类型 说明
data Array 要导出的数据
fields Object 要导出的Json对象中的字段。如果没有给定,则导出Json中的所有属性
export-fields (exportFields) Object 这个支持用于修复其他使用变量字段的组件的问题,比如vee-validate。exportFields的工作原理与字段完全相同
type string mime类型[xls, csv],默认值:xls
name string 要导出的文件名,默认值:data.xls
title string/Array 数据的标题可以是字符串或字符串数组(多个标题)
footer string/Array 数据的页脚可以是字符串或字符串数组(多个页脚)
default-value (defaultValue) string 当行没有字段值时用作回退,默认值为:"
worksheet string 工作表选项卡的名称。默认值:“Sheet1”
fetch Function 回调获取下载前的数据,如果设置了,它会在鼠标点击后立即运行,并在下载过程之前运行。重要提示:只有在没有定义数据支柱时才有效
before-generate Function 在生成/获取数据之前调用方法的回调,例如:显示加载进度
before-finish Function

回调在下载框弹出之前调用方法,例如:隐藏加载进度

 

例子:

<download-excel :data="list" name="excel.xls" title="展会用户数据" worksheet="展会数据"> 下载文件 </download-excel>
 

Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐