json数据转成Excel文件插件

本节主要介绍基于vue2的json数据转成Excel文件插件的使用。

优势：

1. 逐页从后端拉取数据，对服务器压力很小
2. 转换全在客户端完成，速度非常快
3. 可转换条数理论上无上限，依客户端电脑配置而定
4. 转换有百分比进度提示
5. 无需处理长数字字段和日期格式问题，拉取的是什么数据存入到EXCEL的就是什么数据

6. 会向后端提交两种分页参数，第一种是get方式提交当前分页页码，第二种是post方式提交offset和limit分页查询参数

7. 源码地址： https://github.com/emei8/vue-export-excel

8. npmjs地址： https://www.npmjs.com/package/vue-export-excel

使用方法：

第一种：页面引入链接方式

<div id="app">
    <button onclick="exportExcel()" id="toExcel" class="btn btn-default">导出</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="exportExcel/exportExcel.js"></script>
<script>

    function exportExcel() {
        (new Vue).$exportExcel({
            target: 'toExcel', //必须, 触发导出的DOM元素ID
            result: 'export_result', //显示导出进度的DOM元素ID
            columns: [
                { 'label':'订单号', 'prop': 'erp_orders_sn' },
                { 'label':'订单sku', 'prop': 'orders_sku' },
                { 'label':'产品名称', 'prop': 'sku_name' },
                { 'label':'品牌', 'prop': 'brand' },
                { 'label':'净重', 'prop': 'net_weight' },
                { 'label':'毛重', 'prop': 'gross_weight' },
                { 'label':'商品条码', 'prop': 'code' },
                { 'label':'更新时间', 'prop': 'update_time' }
            ], //必须, 列头与字段名映射  如 [{'label':'用户名', 'prop': 'username'},{'label':'角色','prop': 'role'}]
            url: 'http://www.xxxxxx.com/api/Table/index' //后端请求数据地址， 必须
            page: 'page', //请求分页的参数名称，会向后端get方式发此参数的分页数，默认为page, 可选
            parames: {}, //post参数，搜索表单，会向后端post参数外，还会post提交offset和limit分页参数，默认为{}, 可选
            pageSize: 50, //每次拉取数据条数，数字越大下载越快，根据服务器响应速度确定， 默认50, 可选
            fileName: '',//保存的文件名称, 默认为当前日期， 可选
            fileType: 'xlsx' //保存的文件类型， 支持的类型  xlsx, csv, txt, xml，  默认为 xlsx, 可选
        })
    }
</script>

第二种： Vue项目中使用

先在命令行安装

npm install vue-export-excel -S

<template>
    <div id="app">
        <button @click="exportExcel">导出 </button>
    </div>
</template>

<script>
var app = new Vue({
        el: '#app',
        data: {
            percentage: 0
        },
        methods:{
            exportExcel: function () {
                this.$exportExcel({
                      target: 'toExcel', //必须, 触发导出的DOM元素ID
                      result: 'export_result', //显示导出进度的DOM元素ID
                      columns: [
                          { 'label':'订单号', 'prop': 'orders_sn' },
                          { 'label':'订单sku', 'prop': 'orders_sku' },
                          { 'label':'产品名称', 'prop': 'sku_name' },
                          { 'label':'品牌', 'prop': 'brand' },
                          { 'label':'净重', 'prop': 'net_weight' },
                          { 'label':'毛重', 'prop': 'gross_weight' },
                          { 'label':'商品条码', 'prop': 'code' },
                          { 'label':'更新时间', 'prop': 'update_time' }
                      ], //必须, 列头与字段名映射  如 [{'label':'用户名', 'prop': 'username'},{'label':'角色','prop': 'role'}]
                      url: 'http://www.xxxxxx.com/api/Table/index' //后端请求数据地址， 必须
                      page: 'page', //请求分页的参数名称，默认为page, 可选
                      parames: {}, //post参数，搜索表单，默认为{}, 可选
                      pageSize: 50, //每次拉取数据条数，数字越大下载越快，根据服务器响应速度确定， 默认50, 可选
                      fileName: '',//保存的文件名称, 默认为当前日期， 可选
                      fileType: 'xlsx' //保存的文件类型， 支持的类型  xlsx, csv, txt, xml，  默认为 xlsx, 可选
                  })
            }
        }
    })

</script>

后端接口返回JSON 格式

{
    "total": 35374,
    "data": [
        {
            "id": "16170",
            "sku_name": "大号10孔木制双锤打地鼠玩具",
            "orgin": "中国"
        },
        {
            "id": "16140",
            "sku_name": "激光翻页笔",
            "orgin": "中国"
        }
    ]
}