Export Excel in Vue

table of Contents

Method 1: vue-json-excel

1. Introduce vue-json-excel

2. Global registration in main.js

3. Use

4. Effect picture

 ​​

Method 2: file-saver, xlsx, script-loader

1. Introduce dependencies

2. Download and import Blob.js and Export2Excel.js

3. Use

4. Effect picture

Export specified records

1. Introduce dependencies

2. Use

 3. Effect picture

---

Method 1: vue-json-excel

This method will export the xls suffix format

1. Introduce vue-json-excel

cnpm i -S vue-json-excel

2. Global registration in main.js

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

3. Use

<!--home-->
<template>
  <div class="home">
    <download-excel
      class="export-excel-wrapper"
      :data="json_data"
      :fields="json_fields"
      type="xls"
      worksheet="My Worksheet"
      name="用户信息"
    >
      <el-button>导出EXCEL</el-button>
    </download-excel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      json_fields: {
        年龄: "age", //常规字段
        姓名: "info.name", //支持嵌套属性
        密码: {
          field: "info.phone",
          //自定义回调函数
          callback: value => {
            return `+86 ${value}`;
          }
        }
      },
      json_data: [
        {
          age: 22,
          info: {
            name: "张三",
            phone: 12222222222
          },
          sex: "男"
        },
        {
          age: 23,
          info: {
            name: "李四",
            phone: 13333333333
          },
          sex: "女"
        }
      ]
      // json_meta: [
      //   [
      //     {
      //       " key ": " charset ",
      //       " value ": " utf- 8 "
      //     }
      //   ]
      // ]
    };
  }
};
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
  background-color: rgb(128, 126, 126);
}
</style>

Explain the various properties of the component here

• json_data: the data to be exported
• json_fields: Choose the fields you want to export. If you don’t specify it, all fields in all data centers will be exported by default.

Attribute name	Types of	description
data	Array	Need to export data, support Chinese
fields	Object	Define the fields that need to be exported
name	String	Export the file name of excel
type	String	Export excel file type (xls, csv), the default is xls

 

4. Effect picture

 

Method 2: file-saver, xlsx, script-loader

1. Introduce dependencies

cnpm i -S file-saver xlsx
cnpm i -D script-loader

2. Download and import Blob.js and Export2Excel.js

Create an excel file in the src directory, and put two files Blob.js and Export2Excel.js in it

Download    link : https://pan.baidu.com/s/14cYTqYx7M0oyyYawsB0jjQ Extraction code: ksnq

3. Use

<template>
  <div>
    <el-button type="primary" @click="export2Excel()">导出Excel</el-button>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      tableData: [
        { index: 0, username: "张三", password: 333, age: 22 },
        { index: 1, username: "李四", password: 444, age: 23 }
      ]
    };
  },
  props: {},
  created() {},
  mounted() {},
  computed: {},
  methods: {
    export2Excel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/Export2Excel");
        const fieldName = ["索引", "用户名", "密码"];
        const filterVal = ["index", "username", "password"];
        const data = this.tableData.map(v => filterVal.map(j => v[j]));
        export_json_to_excel(fieldName, data, "用户列表");
      });
    }
  },
  watch: {}
};
</script>

<style lang="scss" scoped>
</style>

parameter	Description	Types of	Optional value	Defaults
header	The header of the exported data	Array	/	[]
data	Specific data exported	Array	/	[]
filename	Export file name	String	/	excel-list
autoWidth	Whether the cell should be adaptive width	Boolean	true / false	true
bookType	Export file type	String	xlsx, csv, txt, more	xlsx

 

4. Effect picture

 

Export specified records

1. Introduce dependencies

cnpm i -S file-saver xlsx
cnpm i -D script-loader

2. Use

<template>
  <div>
    <el-button type="primary" @click="exportExcel">导出文件</el-button>

    <el-table :data="tableData" style="width: 100%" id="out-table">
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="age" label="年龄" width="80"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
    </el-table>
  </div>
</template>
  
  
<script>
//引入安装的依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  data() {
    return {
      tableData: [
        {
          name: "张三",
          age: 22,
          date: "2016-05-02"
        },
        {
          name: "王小虎",
          age: 23,
          date: "2016-05-04"
        }
      ]
    };
  },
  methods: {
    // XLSX.uitls.table_to_book( 放入的是table 的DOM 节点 ) ，sheetjs.xlsx 即为导出表格的名字，可修改！
    exportExcel() {
      let wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
      let wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      FileSaver.saveAs(
        new Blob([wbout], { type: "application/octet-stream" }),
        "用户列表.xlsx"
      );

      return wbout;
    }
  }
};
</script>
  
<style scoped>
</style>

 3. Effect picture

 

In addition, if you want to export the specified records, you can refer to this article: https://www.jianshu.com/p/2819b563bfd7