纯前端导出

最新推荐文章于 2025-08-05 15:34:09 发布

罗生不可说

最新推荐文章于 2025-08-05 15:34:09 发布

阅读量123

点赞数

CC 4.0 BY-SA版权

文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_45551442/article/details/132535101

本文介绍了如何使用JavaScript库XLSX将HTML表格转换为Excel文件，包括表格数据转换、样式设置（如单元格边框和颜色）、以及合并范围的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

exportExcel() {
      let excelName = this.version.customerPrjName + '_' + this.version.weekVersion
      const $el = this.$refs.table.$el
      let $table = $el.querySelector('.el-table__fixed')
      if (!$table) $table = $el
      let ws = XLSX.utils.table_to_sheet($table, {raw: true})
      // 创建一个workbook对象
      let wb = XLSX.utils.book_new()
      // 把worksheet对象添加进workbook对象，第三个参数是excel中sheet的名字
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
      // 设置列宽 字号等 如果无需多余的样式则省略
      this.setExcelStyle(wb['Sheets']['Sheet1'])
      this.addRangeBorder(wb['Sheets']['Sheet1']['!merges'], wb['Sheets']['Sheet1'])
      let wbout = XLSXSTYLE.write(wb, {type: 'buffer'})
      try {
        FileSaver.saveAs(
          new Blob([wbout], {type: 'application/octet-stream'}),
          `${excelName}.xlsx`,
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.error(e)
      }
    },
    setExcelStyle(data) {
      // 单元格外侧框线
      let borderAll = {
        top: {
          style: 'thin',
        },
        bottom: {
          style: 'thin'
        },
        left: {
          style: 'thin'
        },
        right: {
          style: 'thin'
        }
      }
      let types = [
        'FC',
        'Cum FC',
        'Commit',
        'Cum Commit',
        'Commit VS FC Wkly Delta',
        'Commit VS FC Cum Delta',
        'FC v2v',
        'commit v2v',
        'Gating Item'
      ]
      data['!cols'] = []
      for (let key in data) {
        if (data[key] instanceof Object) {
          let number = this.str2Number(data[key].v)
          data[key].s = {
            border: borderAll,
            alignment: {
              // 水平居中对齐
              horizontal: 'right',
              vertical: 'right'
            },
            font: {
              sz: 12,
              color: {
                rgb: !isNaN(number) && number < 0 ? 'ff0000' : '000'
              }
            }
          }
          if (data[key].v) {
            let wpx = data[key].v === '类型' || types.includes(data[key].v) ? 170 : 110
            data['!cols'].push({wpx: wpx})
          }
        }
      }
      return data
    },
    addRangeBorder(range, ws) {
      let cols = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
      range.forEach(item => {
        let style = {
          s: {
            border: {
              top: {style: 'thin'},
              left: {style: 'thin'},
              bottom: {style: 'thin'},
              right: {style: 'thin'}
            }
          }
        }
        // 处理合并行
        for (let i = item.s.c; i <= item.e.c; i++) {
          ws[`${cols[i]}${Number(item.e.r) + 1}`] = ws[`${cols[i]}${Number(item.e.r) + 1}`] || style
          // 处理合并列
          for (let k = item.s.r + 2; k <= item.e.r + 1; k++) {
            ws[cols[i] + k] = ws[cols[k] + item.e.r] || style
          }
        }
      })
      return ws;
    },