需求
- 提供一个 Excel 文件，将里面的内容导出成 JSON 数组
- 提供一个 JSON 数组，生成 Excel 文件并下载
表格
数据
一、安装依赖
npm install xlsx --save
二、使用
import * as XLSX from 'xlsx' // Vue3 版本
三、导出
const ExportXlsx = () => {
// 创建工作表
const data = XLSX.utils.json_to_sheet(props.table.tableData)
// 创建工作簿
const wb = XLSX.utils.book_new()
// 将工作表放入工作簿中
XLSX.utils.book_append_sheet(wb, data, 'data')
// 生成文件并下载
XLSX.writeFile(wb, 'test.xlsx')
}
初始化导出
导出之后发现数据结构不是我们想要的那种，此时就能通过以下方法转换。
转换前的数据
转换后的数据
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
})
最终导出样式
更改列宽
更改列宽
四、导入
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中含有日期，需要解析时间格式的内容。
excel数据
导入数据
XLSL.read会默认解析为天数的时间戳字符串(从1900年算起到当前日期的天数)
解决办法
const workbook = XLSX.read(data, {
type: 'binary',
cellDates: true //设为true，将天数的时间戳转为时间格式
})
转换成中国标准时间,我最终想要的是转换成自己想要的时间格式，需要moment工具类
import moment from "moment";
注意的点：xlsx将excel中的时间内容解析后，会小一天
如2020/11/3，xlsx会解析成 Mon Nov 02 2020 23:59:17 GMT+0800 小了43秒
当再用moment转换成日期时：
Mon Nov 02 2020 23:59:17 GMT+0800 会转成2020/11/2 所以需要在moment转换后＋1天
// 这里我将日期和表格中文转换放在一起处理了
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
}
最终导入效果
