Vue3中实现HTML转可搜索/可点击PDF的方案咨询

针对你的需求，推荐两种兼顾下载体验与PDF质量的方案，均能生成可搜索、可复制的矢量PDF，且适配Vue3项目：

方案一：前端纯JS实现（pdfmake + html-to-pdfmake） #

这个组合能直接将HTML节点转换为pdfmake支持的文档结构，生成原生矢量PDF，无需后端依赖，操作简单。

步骤： #

1. 安装依赖

npm install pdfmake html-to-pdfmake --save

2. 在Vue组件中实现逻辑
   为需要生成PDF的内容单独准备一个展开状态的隐藏模板，避免受页面折叠面板样式影响：

<template>
  <div>
    <!-- 页面上的折叠面板 -->
    <el-collapse v-model="activeNames">
      <!-- 你的结果列表内容 -->
    </el-collapse>

    <!-- 用于生成PDF的隐藏模板（展开状态） -->
    <div ref="pdfContent" class="pdf-template" style="display: none;">
      <div v-for="item in resultList" :key="item.id" class="pdf-item">
        <h3>{{ item.title }}</h3>
        <p>{{ item.content }}</p>
        <a :href="item.link">{{ item.linkText }}</a>
      </div>
    </div>

    <button @click="generatePDF">下载PDF</button>
  </div>
</template>

<script setup>
import pdfMake from 'pdfmake/build/pdfmake'
import pdfFonts from 'pdfmake/build/vfs_fonts'
import htmlToPdfmake from 'html-to-pdfmake'

// 注册内置字体
pdfMake.vfs = pdfFonts.pdfMake.vfs

const resultList = ref([]) // 从API获取的结果列表
const pdfContent = ref(null)

const generatePDF = () => {
  // 提取隐藏模板的HTML内容
  const html = pdfContent.value.innerHTML
  // 转换为pdfmake可识别的文档结构
  const docDefinition = {
    content: htmlToPdfmake(html),
    // 可选配置：页面尺寸、边距
    pageSize: 'A4',
    pageMargins: [40, 60, 40, 60]
  }

  // 生成并触发PDF下载
  pdfMake.createPdf(docDefinition).download('结果列表.pdf')
}

// 从API获取数据的逻辑
const fetchData = async () => {
  const res = await fetch('/api/results')
  resultList.value = await res.json()
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.pdf-item {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}
</style>

注意事项： #

• 隐藏模板的样式需单独定义，避免继承页面其他样式
• 如需自定义字体，需额外配置pdfmake的字体加载规则

方案二：后端渲染生成（Puppeteer） #

如果HTML结构复杂、样式要求极高，前端方案可能出现样式偏差，这时可以用Puppeteer在后端渲染完整的Vue页面，生成高精度的可搜索PDF。

步骤： #

1. 后端设置（Node.js为例）
   安装Puppeteer依赖：

npm install puppeteer --save

编写PDF生成接口：

const express = require('express')
const puppeteer = require('puppeteer')
const app = express()

app.get('/generate-pdf', async (req, res) => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()

  // 渲染专门用于PDF生成的Vue页面（需提前开发展开状态的列表页面）
  await page.goto('https://your-domain.com/pdf-preview', {
    waitUntil: 'networkidle0' // 等待页面资源加载完成
  })

  // 生成PDF
  const pdfBuffer = await page.pdf({
    format: 'A4',
    printBackground: true,
    margin: { top: '40px', right: '40px', bottom: '40px', left: '40px' }
  })

  await browser.close()

  // 设置响应头触发下载
  res.setHeader('Content-Type', 'application/pdf')
  res.setHeader('Content-Disposition', 'attachment; filename="结果列表.pdf"')
  res.send(pdfBuffer)
})

app.listen(3000)

2. 前端Vue组件调用接口

<template>
  <button @click="downloadPDF">下载PDF</button>
</template>

<script setup>
const downloadPDF = async () => {
  const res = await fetch('/generate-pdf')
  const blob = await res.blob()
  const url = window.URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = '结果列表.pdf'
  document.body.appendChild(a)
  a.click()
  window.URL.revokeObjectURL(url)
  document.body.removeChild(a)
}
</script>

优势： #

• 完全还原页面样式，包括复杂CSS布局
• 支持所有HTML元素的PDF转换，链接、文本保持可交互状态

方案对比 #

内容的提问来源于stack exchange，提问作者tanbog