需求

1. 提供一個(gè) Excel 文件，將里面的內(nèi)容導(dǎo)出成 JSON 數(shù)組
2. 提供一個(gè) JSON 數(shù)組，生成 Excel 文件并下載

表格

數(shù)據(jù)

一、安裝依賴

npm install xlsx --save

二、使用

import * as XLSX from 'xlsx' // Vue3 版本

三、導(dǎo)出

const ExportXlsx = () => {
  // 創(chuàng)建工作表
  const data = XLSX.utils.json_to_sheet(props.table.tableData)
  // 創(chuàng)建工作簿
  const wb = XLSX.utils.book_new()
  // 將工作表放入工作簿中
  XLSX.utils.book_append_sheet(wb, data, 'data')
  // 生成文件并下載
  XLSX.writeFile(wb, 'test.xlsx')
}

初始化導(dǎo)出

導(dǎo)出之后發(fā)現(xiàn)數(shù)據(jù)結(jié)構(gòu)不是我們想要的那種，此時(shí)就能通過以下方法轉(zhuǎn)換。

轉(zhuǎn)換前的數(shù)據(jù)

轉(zhuǎn)換后的數(shù)據(jù)

let head = {
  date: '日期',
  name: '姓名',
  address: '地址',
}

const list = props.table.tableData.map(item => {
  const obj = {}
  for (const k in item) {
    if (head[k]) {
      obj[head[k]] = item[k]
    } 
  }
  return obj
})

最終導(dǎo)出樣式

更改列寬

更改列寬

四、導(dǎo)入

const ImportXlsx = e => {
  const file = e.target.files[0]
  const reader = new FileReader()
  reader.readAsArrayBuffer(file)
  reader.onload = e => {
    let data = e.target.result
    constworkbook = XLSX.read(data, { type: 'binary', cellDates: true })
    const wsname = workbook.SheetNames[0]
    const outdata = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
    console.log(outdata);
  }
}

如果excel中含有日期，需要解析時(shí)間格式的內(nèi)容。

excel數(shù)據(jù)

導(dǎo)入數(shù)據(jù)

XLSL.read會(huì)默認(rèn)解析為天數(shù)的時(shí)間戳字符串(從1900年算起到當(dāng)前日期的天數(shù))

解決辦法

const workbook = XLSX.read(data, { 
  type: 'binary', 
  cellDates: true  //設(shè)為true，將天數(shù)的時(shí)間戳轉(zhuǎn)為時(shí)間格式
})

轉(zhuǎn)換成中國標(biāo)準(zhǔn)時(shí)間,我最終想要的是轉(zhuǎn)換成自己想要的時(shí)間格式，需要moment工具類

import moment from "moment";

注意的點(diǎn)：xlsx將excel中的時(shí)間內(nèi)容解析后，會(huì)小一天
如2020/11/3，xlsx會(huì)解析成 Mon Nov 02 2020 23:59:17 GMT+0800 小了43秒
當(dāng)再用moment轉(zhuǎn)換成日期時(shí)：
Mon Nov 02 2020 23:59:17 GMT+0800 會(huì)轉(zhuǎn)成2020/11/2 所以需要在moment轉(zhuǎn)換后＋1天

// 這里我將日期和表格中文轉(zhuǎn)換放在一起處理了
const key = {
  日期: 'date',
  姓名: 'name',
  地址: 'address',
}

const deal = data => {
  data.forEach(item => {
    Object.keys(item).map(keys => {
      let newKey = key[keys]
      if (newKey) {
        item[newKey] = item[keys]
        delete item[keys]
      }
    })
  })
  data.forEach(item => {
    item.date = moment(item.date).add(1, 'd').format('YYYY-MM-DD')
  })
  return data
}

最終導(dǎo)入效果