How to export excel file in vue?

I encountered something during development today, which is how to export excel files using existing data. There are many methods on the Internet, and some talk about using data flow, https://www .cnblogs.com/yeqrblog/p/9758981.html, but now my idea is to just use array data and not to implement it with data flow. Facts have proved that it is possible:

1 .Install dependencies

//npm 
npm install -S file-saver xlsx
npm install -D script-loader

2.Import Bolb.js and Export2Excel.js

in main.js. Two js file addresses:

Link: https://pan.baidu.com/s/1ib2Ox18FngVlhKxs6l8OZQ
Extraction code: sirm

import Blob from './excel/Blob'
import Export2Excel from './excel/Export2Excel.js'

3. Use in components

//导出的方法
exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('../excel/Export2Excel');
        const tHeader = ['序号', '昵称', '姓名'];
        // 上面设置Excel的表格第一行的标题
        const filterVal = ['index', 'nickName', 'name'];
        // 上面的index、nickName、name是tableData里对象的属性
        const list = this.tableData;  //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '列表excel');
      })
    },

    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))

tHeader is the table header, the data in filterVal is the field of the table, tableData stores the data in the table, the type is an array, and objects are stored in it. Each row of the table is an object.

That’s it.

Related recommendations:

2020 front-end vue interview questions summary (with answers)

vue tutorial Recommendation: The latest 5 vue.js video tutorial selections in 2020

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of How to export excel file in vue?. For more information, please follow other related articles on the PHP Chinese website!