兼容性 h5 ✅ iosA 在 main.js 文件里加入PP ❎ AndroidAPP ❎ weixin小程序 ❎
1、安装 vue-json-excel 插件
npm install vue-json-excel
2、在 main.js 文件里加入
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
3、页面添加
<download-excel :data="json_array" name="excel.xls" title="标题" worksheet="表格名称">导出Excel
</download-excel>
4、示例使用
<download-excel :data="userlist" :fields="json_fields" name="用户信息.xls" title="线上工具小程序-所有用户" worksheet="用户信息">
<button class="uni-button" type="primary" size="mini">导出Excel</button>
</download-excel>
userlist = [
{name:'张三',status:false},
{name:'张s',status:false}
]
json_fields:{
用户昵称:"name",
状态: {
field: "status",
callback: (value) => {
return value === true ? "已禁用" : "正常";
},
}
}
备注
| 属性名 | 类型 | 说明 |
|---|---|---|
| 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 | 当行没有字段值时用作回退，默认值为:" |
