vue---将json導出Excel的方法

在做資料表格渲染的時候，經常遇到的需求的就是将導出excel，下面是使用vue進行項目資料進行導出的方法。

一、安裝依賴

npm i -S file-saver
npm i -S xlsx      

二、在src目錄下建立utilsl檔案夾，建立json2excel.js，并引入依賴

import { saveAs } from \'file-saver\'
import XLSX from \'xlsx/dist/xlsx.full.min\'

// 将json資料處理為xlsx需要的格式
function datenum(v, date1904) {
    if (date1904) v += 1462
    let epoch = Date.parse(v)
    return (epoch - new Date(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}`)
}      

具體使用：

第一種方式：元件引入

<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: \'女\',age: 27}
      ]
    };
  },
  mounted() {},
  methods: {
     downExcel() {
      const th = [\'姓名\', \'生日\', \'性别\', \'年齡\']
      const filterVal = [\'name\', \'birthday\', \'sex\', \'age\']
      const data = this.excelData.map(v => filterVal.map(k => v[k]))
      const [fileName, fileType, sheetName] = [\'測試下載下傳\', \'xlsx\', \'測試頁\']
      toExcel({th, data, fileName, fileType, sheetName})
    }
  }
};
</script>      

第二種：全局挂載使用

1、在main.js中全局挂載toExcel方法

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

2、在元件中調用toExcel方法導出excel

<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: \'女\',age: 27}
      ]
    };
  },
  mounted() {},
  methods: {
     downExcel() {
      const th = [\'姓名\', \'生日\', \'性别\', \'年齡\']
      const filterVal = [\'name\', \'birthday\', \'sex\', \'age\']
      const data = this.excelData.map(v => filterVal.map(k => v[k]))
      const [fileName, fileType, sheetName] = [\'測試下載下傳\', \'xlsx\', \'測試頁\']
      this.$toExcel({th, data, fileName, fileType, sheetName})
    }
  }
};
</script>      

 技術支援：昆明貓咪科技