vue匯出excel(簡單方法完整介紹)

1.安裝外掛

cnpm install vue-json-excel

2.min.js中引入使用

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

3.直接在頁面中使用

<download-excel
      class = "export-excel-wrapper"
      :data = "json_data"
      :fields = "json_fields"
      name = "遠端診斷報告匯出.xls">
      <!-- 上面可以自定義自己的樣式，還可以引用其他元件button -->
      <el-button type="primary" size="small">匯出EXCEL</el-button>
</download-excel>

data() {
    return {
      json_fields: {
        "頭部-診斷名稱": "name",    //常規欄位
        "頭部-聯絡電話": "phone.mobile", //支援巢狀屬性
        "頭部-損壞區域程式碼": {
          field: "phone.landline",
                    //自定義回撥函式
          callback: value => {
            return `損壞區域程式碼 - ${value}`;
          }
        }
      },
      json_data: [
        {
          name: "損壞的元件一",
          city: "New York",
          country: "United States",
          birthdate: "1978-03-15",
          phone: {
            mobile: "1-541-754-3010",
            landline: "(541) 754-3010"
          }
        },
        {
          name: "損壞的元件二",
          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 "
          }
        ]
      ]
    };
  }

ps：

json_data: 需要匯出的資料

json_fields: 自主選擇要匯出的欄位，指定巢狀資料並將標籤分配給鍵是標籤的欄位，值是JSON欄位。這將“按原樣”匯出欄位資料。如果需要自定義匯出的資料，可以定義回撥函式。裡面的屬性是excel表每一列的title,注意多個片語組成的屬性名要加雙引號

如果需要自定義匯出的資料，可以定義回撥函式。

還有一種比較複雜的方法，但是比較好控制 https://www.cnblogs.com/Mrfan217/p/6944238.html