uniapp导出excel

H5可用、IOS手机无效、安卓无效、小程序无效。无效的原因未知，如有兴趣，可自行研究。此插件是我在搞VUE项目时，PC端的web后台用的小功能。搞到uni-app后，发现只有H5有用，扔了觉得可惜，还是放上来吧。使用了vue-json-excel插件，需要先安装此插件。复制代码npm install vue-json-excel或npm i vue-json-excel然后在main.js文件里加

汪小敏同学

5800人浏览 · 2020-09-07 18:04:30

汪小敏同学 · 2020-09-07 18:04:30 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^