vue 는 js XLSX 를 사용 하여 엑셀 변환 날짜 형식 을 읽 습 니 다.
5111 단어 전단vuejavaScript
공식 github
1.먼저 XLSX 설치
npm install xlsx
npm install moment
2.다시 가 져 오기
import XLSX from 'xlsx'
import moment from 'moment'
3.element-ui 의 el-uproad 구성 요소 업로드,귀속 upload 를 사용 합 니 다.
upload (file, fileList) {
let files = {0: file.raw}
this.readExcel1(files)
}
4.엑셀 을 읽 으 려 면 날짜 형식 에 cellDates:true 를 추가 해 야 합 니 다. 매개 변수 el-table-column 표시 할 때 도 포맷 해 야 합 니 다.
readExcel1 (files) {
// console.log(files)
if (files.length <= 0) {
return false
} else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
this.$Message.error(' , xls xlsx ')
return false
}
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 ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])// json
this.list = ws
} catch (e) {
return false
}
}
fileReader.readAsBinaryString(files[0])
}
dateFormat: function (row, column) {
var date = row[column.property]
if (date === undefined) {
return ''
}
return moment(date).format('YYYY-MM-DD')
}
마지막 으로 모든 코드 에 첨부
xlsx ,
import XLSX from 'xlsx'
import moment from 'moment'
export default {
name: 'importAdIncome',
data () {
return {
fileList: [],
downloadLoading: false,
listLoading: false,
list: []
}
},
created () {
},
methods: {
submitUpload () {
this.$refs.upload.submit()
},
handleRemove (file, fileList) {
// console.log(file, fileList)
},
handlePreview (file) {
// console.log(file)
},
handleAvatarSuccess (response, file, fileList) {
// console.log(response)
if (response && response.code === '200') {
this.$notify.success({
title: ' ',
message: ' '})
}
},
upload (file, fileList) {
let files = {0: file.raw}
this.readExcel1(files)
},
readExcel1 (files) {
// console.log(files)
if (files.length <= 0) {
return false
} else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
this.$Message.error(' , xls xlsx ')
return false
}
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 ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])// json
this.list = ws
} catch (e) {
return false
}
}
fileReader.readAsBinaryString(files[0])
},
uploadUrl () {
return process.env.BASE_API + '/upload/importIncomeExcel'
},
dateFormat: function (row, column) {
var date = row[column.property]
if (date === undefined) {
return ''
}
return moment(date).format('YYYY-MM-DD')
}
}
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
전단 자동화 워 크 플 로 의 hooks예 를 들 어 우 리 는 git commt 전에 eslint 코드 검사, npm install 전에 프로젝트 의존 도 를 검사 하고 싶 습 니 다.전형 적 인 상황 에서 각종 도 구 는 특정한 동작 이 발생 할 때 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.