vue 는 js XLSX 를 사용 하여 엑셀 변환 날짜 형식 을 읽 습 니 다.

5111 단어 전단vuejavaScript
최근 에 하나의 기능 을 실현 하려 면 아마도 전단 에서 엑셀 파일 을 읽 고 엑셀 내용 을 페이지 에 보 여 주 는 것 입 니 다.사용자 가 확인 한 후에 백 엔 드 에 올 립 니 다.사용 하 는 XLSX 로 엑셀 을 해석 하고 날 짜 를 읽 을 때 숫자 입 니 다.이 문 제 를 해결 하 는 데 시간 이 오래 걸 렸 습 니 다.기록 하 세 요.
공식 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')
    }

마지막 으로 모든 코드 에 첨부



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')
    }
  }
}




좋은 웹페이지 즐겨찾기