vue --- the export json method of Excel

In doing data table rendering, often encountered needs it is to export excel, using the following method vue project data export.

First, install dependencies

Elevation and -S file- saver 
altitude and -S xlsx

Second, create a new directory in the src folder utilsl, New json2excel.js, and the introduction of dependence

{} saveAs Import from  ' File-Saver ' 
Import XLSX from  ' xlsx / dist / xlsx.full.min ' 

// the data processing format xlsx json desired 
function datenum (V, date1904) {
     IF (date1904) = V + 1462 
    the let Epoch = Date.parse (V)
     return (Epoch - new new a Date (The Date.UTC ( 1899 , . 11 , 30 ))) / ( 24 * 60 * 60 * 1000 ) 
} 
 
function data2ws (Data) { 
    const WS = { }
    const range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}}
    for (let R = 0; R != data.length; ++R) {
        for (let C = 0; C != data[R].length; ++C) {
            if (range.s.r > R) range.s.r = R
            if (range.s.c > C) range.s.c = C
            if (range.e.r < R) range.e.r = R
            if (range.e.c < C) range.e.c = C
            const cell = { v: data[R][C] }
            if (cell.v == null) continue
            const cell_ref = XLSX.utils.encode_cell({c: C, r: R})
 
            if (typeof cell.v === 'number') cell.t = 'n'
            else if (typeof cell.v === 'boolean') cell.t = 'b'
            else if (cell.v instanceof Date) {
                cell.t = 'n'
                cell.z = XLSX.SSF._table[14]
                cell.v = datenum(cell.v)
            }
            else cell.t = 's'
 
            ws[cell_ref] = cell
        }
    }
    if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range)
    return ws
}
// 导出Excel
function Workbook() {
    if (!(this instanceof Workbook)) return new Workbook()
    this.SheetNames = []
    this.Sheets = {}
}
 
function s2ab(s) {
    const buf = new ArrayBuffer(s.length)
    const view = new Uint8Array(buf)
    for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF
    return buf
}
 
/*
* th => 表头
* data => 数据
* fileName => 文件名
* fileType => 文件类型
* sheetName => sheet页名
*/
export default function toExcel ({th, data, fileName, fileType, sheetName}) {
    data.unshift(th)
    const wb = new Workbook(), ws = data2ws(data)
    sheetName = sheetName || 'sheet1'
    wb.SheetNames.push(sheetName)
    wb.Sheets[sheetName] = ws
    fileType = fileType || 'xlsx'
    var wbout = XLSX.write(wb, {bookType: fileType, bookSST: false, type: 'binary'})
    fileName = fileName || '列表'
    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), `${fileName}.${fileType}`)
}

Specific use:

The first way: introduction assembly

<template>
  <div style="padding:40px;">
    <el-button type="primary" size="small" @click="downExcel">导出EXCEL</el-button>
  </div>
</template>

<script>
import toExcel from '@/utils/json2excel'
export default {
  name: "landing-page",
  data() {
    return {
      excelData: [
        {name: '张三',birthday: new Date('1990-01-01'),sex: '男',age: 28},
        {name: '李四',birthday: new Date('1991-01-01'),sex: 'Woman ', Age: 27 
  },
    };
      ]}
  Mounted () {}, 
  Methods: { 
     downExcel () { 
      const TH = [ 'name', 'date of birth "," gender "," Age " ] 
      const filterVal = [' name ',' Birthday ',' Sex ',' Age ' ] 
      const Data = the this .excelData.map (V => filterVal.map (K => V [K])) 
      const [fileName, fileType, sheetName] = [' test download ',' xlsx ',' test page ' ] 
      ToExcel ({TH, Data, fileName, fileType, sheetName}) 
    } 
  } 
};
 </ Script>

The second: global mount use

1, in the global mount toExcel method main.js

import toExcel from '@/excel/json2excel'
Vue.prototype.$toExcel = toExcel

2, call the method toExcel export excel in assembly

<template>
  <div style="padding:40px;">
    <el-button type="primary" size="small" @click="downExcel">导出EXCEL</el-button>
  </div>
</template>

<script>
import toExcel from '@/utils/json2excel'
export default {
  name: "landing-page",
  data() {
    return {
      excelData: [
        {name: '张三',birthday: new Date('1990-01-01'),sex: '男',age: 28},
        {name: '李四',birthday: new Date('1991-01-01'),sex: 'Woman ', Age: 27 
  },
    };
      ]}
  Mounted () {}, 
  Methods: { 
     downExcel () { 
      const TH = [ 'name', 'date of birth "," gender "," Age " ] 
      const filterVal = [' name ',' Birthday ',' Sex ',' Age ' ] 
      const Data = the this .excelData.map (V => filterVal.map (K => V [K])) 
      const [fileName, fileType, sheetName] = [' test download ',' xlsx ',' test page ' ]
       the this $ ToExcel ({TH, Data, fileName, fileType, sheetName}). 
    } 
  } 
};
 </ Script>

 Technical support: Kunming kitty Technology