网页内容导出 PDF 实战：基于 html2canvas + jsPDF 的完整方案

// src/utils/exportPdf.js
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'

/**
 * 导出DOM元素为PDF
 * 高端的导出方法只需要采用最简单的办法
 * 获取浏览器dom就可以了...
 */
export const exportToPdf = async (element, options = {}) => {
  const {
    filename = 'document',
    scale = 2,
    showLoading = true,
    showSuccess = true,
    showError = true
  } = options

  // 获取DOM元素
  let targetElement
  if (typeof element === 'string') {
    targetElement = document.querySelector(element)
  } else {
    targetElement = element
  }

  if (!targetElement) {
    const errorMsg = '未找到要导出的元素'
    if (showError) console.error(errorMsg)
    throw new Error(errorMsg)
  }

  try {
    // 显示加载提示
    if (showLoading) {
      console.log('正在生成PDF...')
      // 如果使用Element UI，可以这样：this.$message.loading('正在生成PDF...')
    }

    // 滚动到元素位置
    targetElement.scrollIntoView({ behavior: 'smooth' })

    // 转换为canvas
    const canvas = await html2canvas(targetElement, {
      scale: scale,
      useCORS: true,
      backgroundColor: '#ffffff',
      logging: false,
      allowTaint: true
    })

    // 创建PDF
    const imgData = canvas.toDataURL('image/png', 1.0)
    const imgWidth = 210 // A4宽度(mm)
    const imgHeight = (canvas.height * imgWidth) / canvas.width

    const pdf = new JsPDF('p', 'mm', 'a4')
    let heightLeft = imgHeight
    let position = 0
    const pageHeight = 297 // A4高度(mm)

    // 添加第一页
    pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight)
    heightLeft -= pageHeight

    // 分页处理
    while (heightLeft > 0) {
      position = heightLeft - imgHeight
      pdf.addPage()
      pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight)
      heightLeft -= pageHeight
    }

    // 保存文件
    pdf.save(`${filename}.pdf`)

    // 显示成功提示
    if (showSuccess) {
      console.log('PDF导出成功！')
      // 如果使用Element UI，可以这样：this.$message.success('PDF导出成功！')
    }

    return true

  } catch (error) {
    console.error('导出PDF失败:', error)
    
    if (showError) {
      console.error('导出失败:', error.message)
    }
    
    throw error
  }
}

<template>
  <div>
    <el-button type="primary" @click="download">导出当前报表</el-button>
    <div ref="report">……你的表格/图表/一切……</div>
  </div>
</template>

<script setup>
import { exportToPdf } from '@/utils/exportPdf'

function download() {
  exportToPdf(this.$refs.report, { filename: '月度报表_202509' })
}
</script>