1、安装依赖
cnpm i xlsx --D
2、某个模块中引入或者全局引入
import XLSX from 'xlsx'
3、导入excel
- commonjs(公共函数)
/**
* 1、 String.fromCharCode(65 + i) + 1 : A1,B1,C1....
* 2、 String.fromCharCode(65 + j) + (i + 2) A2,B2,C2...
* A3,B3,C3...
* 测试：
* const headers = [{ key: 'date', title: '日期' }, { key: 'name', title: '名称' }]
* const data = [{ date: '2019-05-31', name: 'megen.huang' }, { date: '2019-06-20', name: '小明' }]
* console.log(exportJsonToExcel(headers, data))
* 使用xlsx插件将json数据导出到Excel中----针对表格数据
* @param {Array} headers 表头:[{key: 'date', title: '日期'}, {key: 'name', title: '名称'}]
* @param {Array} data 表体数据:[{date: '2019-05-31', name: 'megen.huang'}, {date: '2019-06-20', name: '小明'}]
* @param {String} fileName 导出的文件名称 :'export.xlsx'
*/
export function exportJsonToExcel (headers = [], data = [], fileName = 'export.xlsx') {
// 先处理数据
data = handleCSV(data)
const _headers = headers
.map((item, i) => Object.assign({}, { key: item.key, title: item.title, position: String.fromCharCode(65 + i) + 1 }))
.reduce((prev, next) => Object.assign({}, prev, { [next.position]: { key: next.key, v: next.title }}), {})
const _data = data
// 二维数组
.map((item, i) => headers.map((key, j) => Object.assign({}, { content: item[key.key], position: String.fromCharCode(65 + j) + (i + 2) })))
// 二维转一维
.reduce((prev, next) => prev.concat(next))
// 转成worksheet需要的数据结构
.reduce((prev, next) => Object.assign({}, prev, { [next.position]: { v: next.content }}), {})
// 合并 headers 和 data
const output = Object.assign({}, _headers, _data)
console.log('output', output)
// 获取所有单元格的位置
const outputPos = Object.keys(output)
// 计算出范围 ,["A1",..., "H2"]
const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}`
console.log('ref', ref)
// 构建 workbook 对象
const wb = {
SheetNames: ['mySheet'],
Sheets: {
mySheet: Object.assign(
{},
output,
{
'!ref': ref,
'!cols': headers.map(item => ({ wpx: 120 }))// width in screen pixels
}
)
}
}
// 导出 Excel
XLSX.writeFile(wb, fileName)
}
// 防止CSV注入处理
export function handleCSV (arr) {
const reg = new RegExp('(^=|^-)')
if (Array.isArray(arr) && arr.length > 0) {
for (const item of arr) {
Object.keys(item).forEach(key => {
if (item[key] && reg.test(item[key])) {
item[key] = '\'' + item[key]
}
})
}
}
return arr
}
/**
* 日期格式转换
* `第一个参数为传入的以毫秒为单位的时间戳，第二个参数为格式，具体说明见代码;
* 不传参则返回当前日期，则为“'yyyy年MM月dd日'”格式显示.`
* @param {object} _date 日期
* @param {string} _format 转换后的日期格式
*/
export function FormatDate (_date, _format) {
if (_format && !_date) {
return ''
}
var date = _date || new Date()
var format = _format || 'yyyy/MM/dd'
date = new Date(_date)
var map = {
M: date.getMonth() + 1, // 月份
d: date.getDate(), // 日
h: date.getHours(), // 小时
m: date.getMinutes(), // 分
s: date.getSeconds(), // 秒
q: Math.floor((date.getMonth() + 3) / 3), // 季度
S: date.getMilliseconds() // 毫秒
}
format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
var v = map[t]
if (v !== undefined) {
if (all.length > 1) {
v = '0' + v
v = v.substr(v.length - 2)
}
return v
} else if (t === 'y') {
return (date.getFullYear() + '').substr(4 - all.length)
}
return all
})
return format
}- html
从Excel导入
- js
import { exportJsonToExcel, deepClone, FormatDate } from '@/utils'
data(){
return {
outJson: [], // 最后要发送给后台的json数据
// 导入表头必填字段
excelHeaderRequired: [
'序号（必填）',
'子任务名称（必填）',
'子任务内容（必填）',
'执行人（必填）',
'预计开始时间（必填）',
'预计完成时间（必填）',
'紧急程度（必填）'
],
exportHeader: Object.freeze([{
key: 'index', title: '序号' }, {
key: 'workItem', title: '事项名称' }, {
key: 'taskName', title: '子任务名称' }, {
key: 'remark', title: '子任务内容' }, {
key: 'executor', title: '执行人' }, {
key: 'planStarttime', title: '预计开始时间' }, {
key: 'planEndtime', title: '预计完成时间' }, {
key: 'actualStarttime', title: '实际开始时间' }, {
key: 'actualEndtime', title: '实际完成时间' }, {
key: 'tagList', title: '标签' }, {
key: 'orderNum', title: '紧急程度' }, {
key: 'taskProgress', title: '工作进展' }
]),
order: Object.freeze({
'紧急': 0,
'一般': 1,
'重要紧急': 2
}),
orderObj: Object.freeze({
0: '紧急',
1: '一般',
2: '重要紧急'
}),
}
}
methods:{
beforeAvatarUpload (file) {
if (!file) {
// 没有文件
return false
} else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
// 格式根据自己需求定义
this.$message.error('上传格式不正确，请上传xls或者xlsx格式')
return false
}
this.handleExcel(file)// 处理数据
this.$refs.upload.clearFiles()
},
handleExcel (file) {
// 表格导入
const files = file // excel文件
const fileReader = new FileReader()
fileReader.onload = ev => {
try {
const data = ev.target.result
const workbook = XLSX.read(data, {
type: 'binary',
cellDates: true
})
const wsname = workbook.SheetNames[0]// 取第一张表
const tempArr = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) // 生成json表格内容,如果某个字段列没有填，则解析出来就会没有该字段
console.log('解析出来的数据', tempArr)
this.outJson = []
let isValidPass = true
for (const item of tempArr) {
console.log('几次', item)
const obj = {}
const bool = this.validFieldRequired(item)
if (!bool) { // 如果不是true，说明有些必填字段没有填
isValidPass = false
break
}
const isValidSuccess = this.handleoutJson(item, obj)
if (!isValidSuccess) {
isValidPass = false
break
} else {
this.outJson.push(this.successObj)// this.outJson放的就是需要返回给后台的
}
}
if (isValidPass) {
// 如果this.outJson有数据说明已经全部校验成功可以传给后台了
batchSaveTask(this.outJson).then(res => {
this.$message.success('导入成功')
this.init()
}).catch(e => {})
}
} catch (e) {
console.log(e)
return false
}
}
fileReader.readAsBinaryString(files)
},
// 校验必填字段的值是否存在
validFieldRequired (item) {
let boolean = true
for (const el of this.excelHeaderRequired) {
if (!Object.keys(item).includes(el)) {
this.$message.error(`${el}`)
boolean = false
break
}
}
return boolean
},
// 将解析的json转为后台需要的字段
handleoutJson (item, obj) {
// if (item['事项名称（必填）']) {
// }
this.successObj = {}
obj['matterId'] = this.$route.query.id
obj['taskName'] = item['子任务名称（必填）'].trim()
obj['remark'] = item['子任务内容（必填）'].trim()
// 人员的需要传三个参数
obj['executorAccount'] = item['执行人（必填）'].trim()
obj['executorId'] = ''
obj['executor'] = ''
if (!DataType(item['预计开始时间（必填）'], 'date')) {
this.$message.error('预计开始时间格式不符合')
return false
}
if (!DataType(item['预计完成时间（必填）'], 'date')) {
this.$message.error('预计结束时间格式不符合')
return false
}
if (item['预计开始时间（必填）'] > item['预计完成时间（必填）']) {
this.$message.error('预计开始时间不能晚于预计结束时间')
return false
} else {
// 需要对时间进行处理
obj['planStarttime'] = FormatDate(item['预计开始时间（必填）'], 'yyyy-MM-dd hh:mm:ss')
// 需要对时间进行处理
obj['planEndtime'] = FormatDate(item['预计完成时间（必填）'], 'yyyy-MM-dd hh:mm:ss')
}
console.log(item['预计开始时间（必填）'], item['预计完成时间（必填）'])
if (item['紧急程度（必填）'] && Object.keys(this.order).includes(item['紧急程度（必填）'].trim())) {
// 需要把汉字转成key传过去
obj['orderNum'] = this.order[item['紧急程度（必填）'].trim()]
} else {
this.$message.error('任务等级不存在')
return false
}
this.successObj = { ...obj }
return true
},
}4、导出excel
- js
// 导出
exportMatter (type, tag) {
if (type === '1' && this.completeList.length > 0) {
// 这里深copy防止污染原数据
const arr = deepClone(this.completeList)
// 需要处理数据
const sourceData = arr.map((item, index) => {
item['index'] = index + 1
item['tagList'] = this.tagsText(item.tagList)
item['orderNum'] = this.orderObj[item.orderNum]
item['planStarttime'] = item.planStarttime ? FormatDate(item.planStarttime, 'yyyy/MM/dd hh:mm:ss') : ''
item['planEndtime'] = item.planEndtime ? FormatDate(item.planEndtime, 'yyyy/MM/dd hh:mm:ss') : ''
item['actualStarttime'] = item.actualStarttime ? FormatDate(item.actualStarttime, 'yyyy/MM/dd hh:mm:ss') : ''
item['actualEndtime'] = item.planStarttime ? FormatDate(item.actualEndtime, 'yyyy/MM/dd hh:mm:ss') : ''
Object.keys(item).forEach(key => {
item[key] = item[key] === null ? '' : item[key]
})
return item
})
exportJsonToExcel(this.exportHeader, sourceData, 'exportSubTask.xlsx')
} else {
this.$message.error('没有可导出的已完成任务')
}
},