vue-json-excel在vue当中的安装和使用【uniapp同理】
该插件优点在于体积小,21k左右,缺点在于只能用于h5,H5可用、IOS手机无效、安卓无效、小程序无效。安装:1、下载标准:npm install vue-json-excel国内:yarn add vue-json-excel2、引用mail.jsimport JsonExcel from 'vue-json-excel'Vue.component('downloadExcel', JsonEx
·
该插件优点在于体积小,21k左右,缺点在于只能用于h5,
H5可用、IOS手机无效、安卓无效、小程序无效。
安装:
1、下载
标准:
npm install vue-json-excel
国内:
yarn add vue-json-excel
2、引用
mail.js
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
3、使用
<download-excel
:data="json_data"
name="excel.xls"
>
下载文件
</download-excel>
全部使用方式:(新建一个vue全部复制进去即可)
<template>
<download-excel
class = "export-excel-wrapper"
:data = "json_data"
:fields = "json_fields"
footer='页脚'
header='标题'
name = "filename.xls">
<!-- 上面可以自定义自己的样式,还可以引用其他组件button -->
<button type="primary" size="small">导出EXCEL</button>
</download-excel>
</template>
<script>
export default {
data() {
return {
json_fields: {
"Complete name": "name", //常规字段
Telephone: "phone.mobile", //支持嵌套属性
"Telephone 2": {
field: "phone.landline",
//自定义回调函数
callback: value => {
console.log(value);
return `Landline Phone - ${value}`;
}
}
},
json_data: [
{
name: "Tony Peña",
city: "New York",
country: "United States",
birthdate: "1978-03-15",
phone: {
mobile: "1-541-754-3010",
landline: "(541) 754-3010"
}
},
{
name: "Thessaloniki",
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 "
}
]
]
};
}
}
</script>
4、参数说明
5、官网
https://github.com/jecovier/vue-json-excel
6、报错及修复教程
更多推荐
已为社区贡献15条内容
所有评论(0)