如何为HTML网页添加一键转PDF并下载的功能？

直接用下面的步骤实现按钮点击导出可选中文本的PDF，无需在线服务，也不会转图片导致画质损失：

1. 添加导出按钮到HTML #

在你的网页中插入触发导出的按钮：

<button id="export-pdf-btn">导出为PDF</button>

2. 引入依赖库 #

使用CDN引入jsPDF和html2canvas（两者配合实现HTML到矢量PDF的转换）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

3. 编写导出逻辑 #

添加JavaScript代码实现点击按钮后的PDF生成与下载：

const exportBtn = document.getElementById('export-pdf-btn');

exportBtn.addEventListener('click', async () => {
  const { jsPDF } = window.jspdf;
  const doc = new jsPDF('portrait', 'mm', 'a4'); // 纵向A4页面

  // 要转换的页面元素，这里用整个网页，可替换为特定DOM节点（比如document.getElementById('main-content')）
  const targetElement = document.body;

  try {
    await doc.html(targetElement, {
      callback: (pdfDoc) => {
        pdfDoc.save('我的网页导出.pdf'); // 自定义下载文件名
      },
      x: 10, // PDF内容的X偏移
      y: 10, // PDF内容的Y偏移
      html2canvas: {
        scale: 2, // 缩放比例，提升清晰度
        useCORS: false // 处理跨域图片需设为true，需服务器支持CORS
      }
    });
  } catch (err) {
    console.error('PDF导出失败:', err);
    alert('导出失败，请查看控制台日志');
  }
});

关键说明 #

• 所有转换逻辑在浏览器端完成，无需依赖外部服务
• 生成的PDF保留文本可选中特性，不会转成图片
• 支持自定义导出范围（替换targetElement为你需要的DOM节点即可）
• 复杂CSS样式（如渐变、特殊字体）可能存在细微显示差异，建议测试后调整样式兼容性
• 超长页面会自动分页，无需额外处理

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