vue 前端读取Excel文件并解析

文章讲述了前端如何在项目中使用XLSX库解析Excel文件,包括安装插件、处理文件、校验数据、转换为JSON格式,并通过自定义函数和上传组件与后台接口交互的过程。
摘要由CSDN通过智能技术生成

前端读取Excel文件并解析

平时项目中对于Excel的导入解析是很常见的功能,一般都是放在后端执行;但是也有特殊的情况,偶尔也有要求说前端执行解析,判空,校验等,最后组装成后端接口想要的数据结构。

前端如何解释Excel呢

因为我使用插件执行的 you know

  • 安装插件
npm install xlsx@0.14.1   // 0.14.1 是我使用的版本
  • 还有个nanoid
npm i nanoid 

此处我没有使用安装的这个 而是使用 自定的代码如下:

// index.js
const createId =  () => {
  return (
    Number(Math.random().toString().substr(2, 7) + Date.now()).toString(36) +
    Date.now()
  )
}
export {
  createId as default,
  createId
}
  • 安装已经完成了 当然 依然 you know
import XLSX from 'xlsx'
import nanoid from 'xxxx/xxx/index'
  • 报一丝 差点忘记了 template
<el-upload class="upload" action="" :auto-upload="false" :show-file-list="false" :multiple="false" :on-change="(file, fileList) => importTemp(file, fileList)">
          <el-button v-permission="'are you ok'" type="primary" size="small" plain class="flex" >you know the name of the custom button</el-button>
        </el-upload>
  • finally
methods: {
	importTemp(file, fileList) {
      const fileReader = new FileReader()
      fileReader.onload = ev => {
        try {
          const data = ev.target.result
          const workbook = XLSX.read(data, {
            type: 'binary'
          })
          const sheet = Object.keys(workbook.Sheets)[1] // 我是用的是第二个
          const json = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]) // 
          const worksheet = workbook.Sheets[sheet]
          const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
          if (!jsonData.length) return
          const headers = jsonData[0]
          if (!headers.length) return
          const colorParam = headers.find(i => /xxx/.test(i))
          const transtypeParam = headers.find(i => /xxx/.test(i))
          const operationTypeParam = headers.find(i => /xxx/.test(i))
          const systemCodeParam = headers.find(i => /xxx/.test(i))
          const platCodeParam = headers.find(i => /xxx/.test(i))
          const truckingBillNoParam = headers.find(i => /xxx/.test(i))
          const delivyPlanTypeParam = headers.find(i => /xxx/.test(i))
          const targetObj = {}
          const nameMap = { // 定义必填的字段
            systemCode: systemCodeParam,
            platCode: platCodeParam,
            operationType: operationTypeParam,
            truckingBillNo: truckingBillNoParam,
            transType: transtypeParam,
            vehicleNumber: '车牌号',
            carColor: colorParam,
            driverName: '司机姓名',
            idcard: '司机身份证号',
            driverPhone: '司机手机号',
            clientCompanyCode: 'xxx',
            clientCompanyName: 'xxx名称',
            // messageBatchNo: 'xxx批次号',
            // detailsCounts: '明细条数',
            billId: 'xxx',
            billDependId: 'xxx',
            factoryBillId: 'xxx',
            delivyPlanType: delivyPlanTypeParam
          }
          for (let [idx, el] of json.entries()) {
            let tempObj = {
            }
            for (const key of Object.keys(nameMap)) {
              const value = el[nameMap[key]]
              if (!value && value !== 0) {
                this.$message.warning(`第${idx + 2}行,字段: ${nameMap[key]} 为必填值`)
                return
              }
              tempObj[key] = value
            }
            tempObj = {
              ...tempObj,
              queueId: el['车辆排队号']
            }
            if (targetObj[tempObj.truckingBillNo]) {
              targetObj[tempObj.truckingBillNo].push(tempObj)
            } else {
              targetObj[tempObj.truckingBillNo] = [tempObj]
            }
          }
          const targetList = Object.keys(targetObj).map((key, i) => {
            const mainitem = targetObj[key][0]
            const target = {}
            Object.keys(mainitem).map(key => {
              if (!['qqq', 'xxxx', 'ssss', 'wwww'].includes(key)) {
                const val = (mainitem[key] + '').replace(/\s/gi, '')
                target[key] = ['null', 'undefined'].includes(val) ? '' : val // 判空下
              }
            })
            target.details = targetObj[key].map(item => {
              return {
                billId: item.qqq,
                billDependId: item.xxxx,
                factoryBillId: item.ssss,
                delivyPlanType: item.wwww
              }
            })
            target.detailsCounts = target.details.length
            target.messageBatchNo = nanoid() + i
            return target
          })

          // 后台请求接口
          import({ // 你自己的哦
            importDataList: targetList
          }).then(res => {
            const { msg, status } = res
            if (status) {
              this.$message.success('发送成功')
            } else {
              this.$message.error(msg ?? '操作失败')
            }
          })
        } catch (e) {
          console.log(e, 'error')
        }
      }
      fileReader.readAsBinaryString(file.raw)
    }
}
  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue读取Excel文件并回显,可以使用第一种方法,即前端解析文件后将数据返回给后端。以下是一个简单的示例代码: 1. 首先,需要在Vue组件中定义一个方法来处理上传文件: ```javascript methods: { handleFileUpload(event) { const file = event.target.files\[0\]; const reader = new FileReader(); reader.onload = (e) => { const data = new Uint8Array(e.target.result); const workbook = XLSX.read(data, { type: 'array' }); const worksheet = workbook.Sheets\[workbook.SheetNames\[0\]\]; const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); // 在这里可以对jsonData进行处理,比如将数据保存到data中 this.data = jsonData; }; reader.readAsArrayBuffer(file); } } ``` 2. 在模板中添加一个文件上传的input元素,并绑定change事件: ```html <template> <div> <input type="file" @change="handleFileUpload"> <!-- 在这里可以使用this.data来回显Excel文件的数据 --> </div> </template> ``` 这样,当用户选择一个Excel文件后,文件将被读取解析,数据将保存在Vue组件的data属性中,你可以根据需要对数据进行处理和回显。请注意,上述代码中使用了XLSX库来处理Excel文件,你需要在项目中引入该库。 #### 引用[.reference_title] - *1* *3* [Vue中如何导入并读取Excel数据](https://blog.csdn.net/a736755244/article/details/99568133)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Vue 读取excel文件的两种方式](https://blog.csdn.net/noeal/article/details/127995380)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值