当前位置：首页 > 前端教程

elementui export

2026-03-05 21:37:40前端教程

ElementUI 导出功能实现方法

ElementUI 提供了多种导出功能，包括表格导出为 Excel、PDF 等格式。以下是常见的实现方式：

表格导出为 Excel

安装依赖包 xlsx 和 file-saver：

npm install xlsx file-saver --save

使用以下代码实现导出功能：

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

exportExcel() {
  const tableDom = document.querySelector('.el-table')
  const wb = XLSX.utils.table_to_book(tableDom)
  const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
  FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '表格数据.xlsx')
}

使用 el-table 的导出功能

ElementUI 的表格组件可以通过自定义方法实现导出：

handleExport() {
  this.$confirm('确认导出所有数据吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const tHeader = ['列名1', '列名2', '列名3']
    const filterVal = ['prop1', 'prop2', 'prop3']
    const data = this.formatJson(filterVal, this.tableData)
    import('@/vendor/Export2Excel').then(excel => {
      excel.export_json_to_excel({
        header: tHeader,
        data,
        filename: '导出文件名'
      })
    })
  })
}

formatJson(filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]))
}

PDF 导出实现

安装 html2canvas 和 jspdf：

npm install html2canvas jspdf --save

实现代码：

import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'

exportPDF() {
  const element = document.getElementById('pdfDom')
  html2canvas(element).then(canvas => {
    const contentWidth = canvas.width
    const contentHeight = canvas.height
    const pageHeight = contentWidth / 592.28 * 841.89
    let leftHeight = contentHeight
    let position = 0
    const imgWidth = 595.28
    const imgHeight = 592.28 / contentWidth * contentHeight
    const pageData = canvas.toDataURL('image/jpeg', 1.0)
    const PDF = new jsPDF('', 'pt', 'a4')
    if (leftHeight < pageHeight) {
      PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
    } else {
      while (leftHeight > 0) {
        PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
        leftHeight -= pageHeight
        position -= 841.89
        if (leftHeight > 0) {
          PDF.addPage()
        }
      }
    }
    PDF.save('导出文件.pdf')
  })
}

注意事项