vue实现pdf导出解决生成canvas模糊等问题(推荐)

使用Vue实现PDF导出功能需要涉及到以下几个步骤：

1. 安装依赖

npm install jspdf jspdf-autotable --save

1. 引入jspdf和jspdf-autotable包

import jsPDF from 'jspdf'
import 'jspdf-autotable'

1. 编写导出PDF的方法

exportPdf() {
  // 新建一个jspdf实例
  let doc = new jsPDF('p', 'pt', 'a4')
  // 获取需要导出的表格div
  let table = this.$refs.table
  // 使用html2canvas将表格内容渲染成canvas对象
  html2canvas(table).then(canvas => {
    let width = canvas.width
    let height = canvas.height
    let imgData = canvas.toDataURL('image/jpeg', 1.0)
    // 将canvas生成的图片添加到PDF中，保证清晰度
    doc.addImage(imgData, 'JPEG', 0, 0, width, height)
    // 下载PDF文件
    doc.save('test.pdf')
  })
}

1. 在Vue组件中调用导出PDF的方法

<template>
  <div>
    <!-- 导出按钮 -->
    <el-button type="primary" icon="el-icon-download" @click="exportPdf">导出PDF</el-button>
    <!-- 需要导出的表格 -->
    <div ref="table">
      <el-table :data="tableData">
        <!-- 省略表格列 -->
      </el-table>
    </div>
  </div>
</template>

这样就实现了简单的PDF导出功能。但是，对于一些复杂表格，导出的PDF可能会因为生成canvas时内容过多导致模糊等问题。下面介绍一些解决方案。

1. 按列导出
   对于列数量过多的表格，可以选择按列导出PDF。代码如下：

exportPdf() {
  // 新建一个jspdf实例
  let doc = new jsPDF('p', 'pt', 'a4')
  // 获取需要导出的表格div
  let table = this.$refs.table
  // 获取表头数组
  let headers = []
  this.$refs.table.$children[0].columns.forEach(item => {
    headers.push(item.label)
  })
  // 将表头数组转为table分页
  let headRows = []
  for (let i = 0; i < headers.length / 3; i++) {
    headRows.push(headers.slice(i * 3, i * 3 + 3))
  }
  // 循环处理每一列，生成单独的PDF，并将其合并
  let i, j, temparray, chunk = 3;
  for (i = 0, j = headers.length; i < j; i += chunk) {
    temparray = headers.slice(i, i + chunk);
    // 渲染并生成当前列的canvas对象
    html2canvas(table, {
      width: table.offsetWidth,
      height: table.offsetHeight,
      windowWidth: table.offsetWidth,
      windowHeight: table.offsetHeight + i * 35,
      scrollX: 0,
      scrollY: -(i * 35)
    }).then(canvas => {
      let width = canvas.width
      let height = canvas.height - i * 35
      let imgData = canvas.toDataURL('image/jpeg', 1.0)
      // 将聚焦在当前列的图片添加到PDF文档，需根据列宽度设置坐标
      doc.addImage(imgData, 'JPEG', 40 + i / 3 * 195, 60, width / (height / 500), 500)
      // 当前页插入表头
      doc.autoTable({
        startY: 20,
        head: headRows,
        theme: 'striped',
        styles: {
          fontSize: 12
        },
        margin: {
          top: 40 + i * 2,
          left: 40 + i / 3 * 195
        }
      })
      // 当前页插入表格数据，从第二页开始插入
      if (i > 0) {
        doc.addPage()
        doc.autoTable({
          body: this.tableData,
          columns: temparray,
          styles: {
            fontSize: 10
          },
          startY: 60,
          margin: {
            top: i * 70
          }
        })
      } else {
        doc.autoTable({
          body: this.tableData,
          columns: temparray,
          styles: {
            fontSize: 10
          },
          startY: 120,
          margin: {
            top: i * 70
          }
        })
      }
      // 当最后一列处理完之后，保存并下载PDF文件
      if (i + chunk >= headers.length) {
        doc.save('test.pdf')
      }
    })
  }
}

1. 将表格分页
   对于表格行数过多的情况，可以将表格分页，生成多个PDF。代码如下：

exportPdf() {
  // 新建一个jspdf实例
  let doc = new jsPDF('p', 'pt', 'a4')
  // 获取需要导出的表格div
  let table = this.$refs.table
  // 获取表头数组
  let headers = []
  this.$refs.table.$children[0].columns.forEach(item => {
    headers.push(item.label)
  })
  // 将表头数组转为table分页
  let headRows = []
  for (let i = 0; i < headers.length / 3; i++) {
    headRows.push(headers.slice(i * 3, i * 3 + 3))
  }
  // 计算表格分页数
  let rowsCount = this.tableData.length
  let pageCount = Math.ceil(rowsCount / 22)
  // 分页处理每一部分数据，将其添加到PDF中
  for (let i = 0; i < pageCount; i++) {
    // 获取当前分页需要渲染的数据
    let pageTableData = this.tableData.slice(i * 22, i * 22 + 22)
    html2canvas(table, {
      windowWidth: table.offsetWidth,
      windowHeight: table.offsetHeight + i * 500,
      scrollY: -(i * 500),
      onclone: (clone) => {
        clone.querySelector('.el-table__fixed-body').style.transform = 'translate(0, 0)'
      }
    }).then(canvas => {
      let width = canvas.width
      let height = canvas.height - i * 500
      let imgData = canvas.toDataURL('image/jpeg', 1.0)
      // 将可以完整包含表格内容的图片添加到PDF文档
      doc.addImage(imgData, 'JPEG', 40, 40, width / (height / 500), 500)
      // 第一页添加表头
      if (i === 0) {
        doc.autoTable({
          startY: 20,
          head: headRows,
          theme: 'striped',
          styles: {
            fontSize: 12
          },
          margin: {
            top: 60
          }
        })
        doc.autoTable({
          body: pageTableData,
          columns: headers,
          styles: {
            fontSize: 10
          },
          startY: 120,
          margin: {
            top: 60
          }
        })
      } else {
        // 从第二页开始不再添加表头
        doc.autoTable({
          body: pageTableData,
          columns: headers,
          styles: {
            fontSize: 10
          },
          startY: 60,
          margin: {
            top: 60
          }
        })
      }
      // 当最后一页处理完并且保存完毕之后，下载PDF文件
      if (i + 1 >= pageCount) {
        doc.save('test.pdf')
      } else {
        // 新建一页PDF
        doc.addPage()
      }
    })
  }
}

以上就是使用Vue实现PDF导出功能的攻略，包括了解决生成canvas时内容过多而导致模糊的问题的两种方法：按列导出和将表格分页。