vue-json-excel在vue当中的安装和使用【uniapp同理】

该插件优点在于体积小，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、报错及修复教程

https://blog.csdn.net/wwppp987/article/details/117688759