【前端】前端页面导出功能实现

1、转换接口返回二进制流

  // result 接口返回的二进制流
 // 该方法支持的浏览器不多（IE10支持），但效率更好
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveOrOpenBlob(result, 'ccc.xlsx')
          } else {
            const link = document.createElement('a')
            link.href = window.URL.createObjectURL(new Blob([result]))
            link.download = 'c'c'c.xlsx'
            link.click()
            window.URL.revokeObjectURL(link.href)
          }

2、页面表格直接导出

const table = document.querySelector('#xlsxTable').cloneNode(true)
      // 因为element-ui的表格的fixed属性导致多出一个table，会下载重复内容，这里删除掉
      table.removeChild(table.querySelector('.el-table__fixed-right'))
      table.removeChild(table.querySelector('.el-table__fixed'))
      const wb = XLSX.utils.table_to_book(table, { raw: true })
      /* get binary string as output */
      // let excName = this.companyReport
      // if (this.dataEndDate) {
      //   excName += '(' + this.dataEndDate + ')'
      // }
      const wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream' }),
          // 设置导出文件名称
          'c'c'c.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout