正文：

在Web开发中，将HTML表格内容转换为PDF并嵌入页面预览是常见的需求，例如报表导出、数据存档等场景。以下是5种实用的实现方式，每种方法各有优劣，开发者可根据项目需求灵活选择。

1. 使用原生JavaScript + window.print()

适用于简单表格的快速导出，但预览效果依赖浏览器打印功能。

function exportToPDF() {
  const table = document.getElementById('myTable');
  const win = window.open('', '', 'width=800,height=600');
  win.document.write(table.outerHTML);
  win.document.close();
  win.focus();
  setTimeout(() => {
    win.print(); // 触发打印预览（可另存为PDF）
  }, 500);
}

优点：无需第三方库，兼容性好。
缺点：样式可能丢失，无法自定义PDF参数。

2. 嵌入jsPDF库

jsPDF是轻量级PDF生成库，支持自定义表格样式和分页。

import { jsPDF } from 'jspdf';
function generatePDF() {
  const doc = new jsPDF();
  doc.autoTable({ html: '#myTable' });
  doc.output('dataurlnewwindow'); // 在新窗口预览
}

优点：支持复杂表格布局，可添加页眉页脚。
缺点：需额外加载库（约50KB）。

3. 使用PDF.js嵌入预览

Mozilla开源的PDF.js可直接渲染PDF文件，适合需要高精度预览的场景。

// 1. 生成PDF Blob（假设通过后端或jsPDF生成）
const pdfBlob = new Blob([pdfData], { type: 'application/pdf' });

// 2. 使用PDF.js渲染
const viewer = document.getElementById('pdfViewer');
PDFJS.getDocument(URL.createObjectURL(pdfBlob)).promise.then(pdf => {
  pdf.getPage(1).then(page => {
    const viewport = page.getViewport({ scale: 1.0 });
    const canvas = document.createElement('canvas');
    viewer.appendChild(canvas);
    page.render({ canvasContext: canvas.getContext('2d'), viewport });
  });
});

优点：支持缩放、文本选择等交互。
缺点：实现复杂度较高。

4. iframe嵌入Base64 PDF

将PDF转换为Base64数据后直接嵌入iframe，适合已生成PDF文件的场景。

const iframe = document.createElement('iframe');
iframe.src = `data:application/pdf;base64,${base64Data}`;
document.body.appendChild(iframe);

优点：浏览器原生支持，渲染效果好。
缺点：大文件可能导致性能问题。

5. 服务端生成 + 前端下载预览

通过后端（如Node.js + Puppeteer）生成PDF，前端提供下载和预览按钮。

后端示例（Node.js）:

const puppeteer = require('puppeteer');
async function generatePDF(html) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setContent(html);
  return await page.pdf({ format: 'A4' });
}

前端调用:

fetch('/generate-pdf', {
  method: 'POST',
  body: JSON.stringify({ html: table.outerHTML })
}).then(response => {
  window.open(response.url); // 预览PDF
});

优点：处理复杂表格更稳定。
缺点：需后端配合，延迟较高。

总结：
- 简单需求：优先选择window.print()或jsPDF。
- 高交互需求：PDF.js是最佳选择。
- 企业级应用：推荐服务端生成方案。

通过合理选择嵌入方式，开发者可以平衡性能、体验和开发成本，实现高效的PDF预览功能。