纯前端实现excel的导入导出

最新推荐文章于 2024-04-29 13:41:53 发布

·枫

最新推荐文章于 2024-04-29 13:41:53 发布

阅读量148

点赞数

文章标签： excel 前端 javascript

本文链接：https://blog.csdn.net/w_z_bin/article/details/130422823

版权

安装

$ yarn add xlsx@0.16.9

前端导入excel

    async analyseExcelToJson(file) {
      // 这里new一个Promise作为异步处理
      return new Promise((resolve, reject) => {
        // 判断file是不是文件类型
        if (file instanceof File) {
          const reader = new FileReader()
          reader.onloadend = () => {
            const arrayBuffer = reader.result
            const options = { type: 'array' }
            const workbook = XLSX.read(arrayBuffer, options)
            const sheetName = workbook.SheetNames[0]
            const sheet = workbook.Sheets[sheetName]
            const json = XLSX.utils.sheet_to_json(sheet)
            resolve(json)
          }
          reader.readAsArrayBuffer(file)
        } else {
          reject(new Error('入参不是 File 类型'))
        }
      })
    },

然后进行调用这段函数，传入excel的文件

    async Import() {
      // 获取文件的[0]
      const file = this.$refs.dle.files[0]
      if (file instanceof File) {
        try {
          // 调用函数拿到值
          const sheet = await this.analyseExcelToJson(file)
          // 对拿到的值进行遍历处理
          const data = Object.values(sheet).map((row) => {
            // console.log(row)
            // 值是表头下的值
            return {
              date: row.date,
              name: row.name,
              province: row.province,
              city: row.city,
              address: row.address,
              zip: row.zip,
            }
          })
          // 最后返回问数组包对象的格式
          console.log(data)
        } catch (error) {
          console.error(error)
        }
      } else {
        console.error(new Error('入参不是 File 类型'))
      }
    },

前端导出excel

    // 这个是表格导出
    excel() {
      const sheet = XLSX.utils.json_to_sheet(this.tableData)
      const workbook = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1')
      return XLSX.writeFile(workbook, 'ccc.xlsx', { type: 'binary' })
    },