如何使用jsPDF在保存/下载PDF文件前实现预览功能？

嘿，我来帮你搞定这个问题！要在下载前预览jsPDF生成的PDF，核心思路是利用jsPDF的output方法生成PDF的Data URL，然后把这个URL嵌入到页面的iframe里或者打开新窗口来展示。下面是具体的实现方案：

核心原理 #

jsPDF提供了output方法，可以将生成的PDF转换为不同格式的输出，其中datauristring格式会返回一个以data:application/pdf;base64,...开头的URL，这个URL可以直接被浏览器识别并渲染PDF内容。

具体代码实现 #

方案1：页面内嵌入iframe预览（推荐） #

这种方式可以让用户在当前页面直接查看PDF，不需要跳转：

// 初始化并生成PDF内容
const mydoc = new jsPDF();
mydoc.text("Welcome", 10, 10); // 添加坐标参数确保文本显示位置正确

// 生成PDF的Data URL
const pdfDataUrl = mydoc.output('datauristring');

// 创建iframe元素用于预览
const previewIframe = document.createElement('iframe');
previewIframe.src = pdfDataUrl;
previewIframe.style.width = '100%';
previewIframe.style.height = '600px';
previewIframe.style.border = '1px solid #ccc';

// 将iframe添加到页面的指定容器中（比如id为preview-container的div）
const container = document.getElementById('preview-container');
if (container) {
  container.appendChild(previewIframe);
} else {
  // 如果没有指定容器，就添加到页面末尾
  document.body.appendChild(previewIframe);
}

// 保留下载功能，比如给按钮绑定点击事件
const downloadBtn = document.createElement('button');
downloadBtn.textContent = '下载PDF';
downloadBtn.addEventListener('click', () => {
  mydoc.save("test.pdf");
});
document.body.appendChild(downloadBtn);

方案2：新窗口打开预览 #

如果需要在新窗口单独展示PDF，可以用window.open：

const mydoc = new jsPDF();
mydoc.text("Welcome", 10, 10);

const pdfDataUrl = mydoc.output('datauristring');
// 打开新窗口预览
const previewWindow = window.open(pdfDataUrl, '_blank');
if (!previewWindow) {
  alert('浏览器弹窗拦截器阻止了预览窗口，请允许弹窗后重试');
}

// 下载按钮逻辑
document.getElementById('downloadBtn').addEventListener('click', () => {
  mydoc.save("test.pdf");
});

注意事项 #

• 调用mydoc.text时最好传入坐标参数（x, y），否则文本可能会显示在不可见的位置
• 对于大型PDF，Data URL可能会比较长，但现代浏览器都能很好地处理
• 如果需要更美观的预览界面，可以结合一些PDF预览库，但上面的原生方法已经能满足基础需求

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