需求
- 提供一個 Excel 文件晴竞，將里面的內(nèi)容導(dǎo)出成 JSON 數(shù)組
- 提供一個 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)不是我們想要的那種，此時就能通過以下方法轉(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中含有日期，需要解析時間格式的內(nèi)容悼泌。
excel數(shù)據(jù)
導(dǎo)入數(shù)據(jù)
XLSL.read會默認(rèn)解析為天數(shù)的時間戳字符串(從1900年算起到當(dāng)前日期的天數(shù))
解決辦法
const workbook = XLSX.read(data, {
type: 'binary',
cellDates: true //設(shè)為true誉结，將天數(shù)的時間戳轉(zhuǎn)為時間格式
})
轉(zhuǎn)換成中國標(biāo)準(zhǔn)時間,我最終想要的是轉(zhuǎn)換成自己想要的時間格式，需要moment工具類
import moment from "moment";
注意的點：xlsx將excel中的時間內(nèi)容解析后券躁，會小一天
如2020/11/3惩坑，xlsx會解析成 Mon Nov 02 2020 23:59:17 GMT+0800 小了43秒
當(dāng)再用moment轉(zhuǎn)換成日期時：
Mon Nov 02 2020 23:59:17 GMT+0800 會轉(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)入效果
