平台兼容性
仔仔-导出excel 使用说明
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 | 回调在下载框弹出之前调用方法,例如:隐藏加载进度 |
官方说明:
Important! Extra prompt in Microsoft Excel The method implemented in this component use HTML tables to draw the .xls files, Microsoft Excel no longer recognize HTML as native content so will prompt a warning message before open the file. The content will be rendered perfectly but the message can't be avoid.
重要!这个组件中实现的方法使用HTML表格来绘制.xls文件,Microsoft Excel不再将HTML作为原生内容,因此将在打开文件之前提示一条警告消息。内容将被完美呈现,但消息是无法避免的。