Error in v-on handler: “TypeError: Cannot read properties of null (reading ‘getElementsByTagName‘)“

博客内容讲述了在导出表格时遇到由于ID获取错误导致的故障。作者发现封装的方法里虽然有ID参数,但实际页面中未找到对应的ID,从而引发错误。为解决此问题,作者建议在表格元素上添加ID属性,例如`id='outTable'`,并展示了修正后的代码片段。通过这样做,导出功能得以正常工作。
摘要由CSDN通过智能技术生成

在表格导出的时候出现这个错误,是因为把id获取错误
因为封装的方法里有id,但是页面上面没有找到,所以报错

 /**
   * 导出
   * @param mainTitle 主标题
   * @param subTitle 副标题
   * @param reqData
   * @returns {any}
   */
  exportTable(mainTitle,subTitle,reqData){
    /* generate workbook object from table */
    var timeTitle ='';
    console.log('reqData:',reqData)
    if(reqData.beginTime&&reqData.endTime){
      timeTitle = "-"+reqData.beginTime+"-"+reqData.endTime;
    }
    if(subTitle){
      subTitle='-'+subTitle
    }else{
      subTitle = '';
    }
    let sheetjs=mainTitle+subTitle+timeTitle;

    let xlsxParam = { raw: true }
    var wb = XLSX.utils.table_to_book(document.querySelector('#outTable'),xlsxParam)
    /* get binary string as output */
    var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
    try {
      FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), sheetjs+".xlsx")
    } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
    return wbout
  },

给表格添加上id就好了

<el-table
      :data="reportData" stripe border style="width:100%;" :height="tableHeight" highlight-current-row
      :header-cell-style="headerCellStyle" id='outTable' class="tableStyle" v-loading="loading">
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="50"
        >
      </el-table-column>
</el-table>

使用导出方法:

exportExcel () {
  comon.exportTable('xxx表','',this.reqData)
 }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

屿-·

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值