vue实现前端导出excal(后端返回json数据即可)

本是古典何须时尚 2021-12-10 03:35 554阅读 0赞

使用工具 : vue-json-excel

npm安装依赖包

npm install vue-json-excel

项目入口文件引进注册并且使用

import Vue from 'vue'
    import JsonExcel from 'vue-json-excel'
    Vue.component('downloadExcel', JsonExcel)

在页面中使用

<download-excel
        class = "export-excel-wrapper"
        :data = "json_data"
        :fields = "json_fields"
        name = "filename.xls">
        
        
    </download-excel>

简单说明一下组件属性

*  json\_data: 需要导出的数据
 *  json\_fields: 自主选择要导出的字段，指定嵌套数据并将标签分配给键是标签的字段，值是JSON字段。这将“按原样”导出字段数据。如果需要自定义导出的数据，可以定义回调函数。

![在这里插入图片描述][20190715141128264.png]  
可能上面描述不是很明白，下面给个实例，  
**注意一下几点**

*  json\_fields里面的属性是excel表每一列的title,注意多个词组组成的属性名要加双引号
 *  如果需要自定义导出的数据，可以定义回调函数。

data() {
        return {
          json_fields: {
            "Complete name": "name",    //常规字段
            Telephone: "phone.mobile", //支持嵌套属性
            "Telephone 2": {
              field: "phone.landline",
                        //自定义回调函数
              callback: 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 "
              }
            ]
          ]
        };
      }

**注意**    在我使用过程当中发现由后台请求过来的数据无法导出。
    解决办法 :  重新定义一个按钮作为导出excal按钮，把插件中的组件按钮定位到屏幕之外(position:absolute；left:-1000px;);点击自定义excal按钮时请求数据,赋值给json_data, 数据赋值完成之后执行一次点击组件按钮的方法,导出成功

![在这里插入图片描述][20190723153715206.jpg]

[20190715141128264.png]: /images/20211209/8ed0b7af1686435ea4b28a8e7b2de591.png
[20190723153715206.jpg]: https://img-blog.csdnimg.cn/20190723153715206.jpg