html2pdf如何设置让生成PDF在当前/新标签页打开而非下载弹窗
实现逻辑说明
html2pdf 自带的 .save() 方法默认逻辑就是触发浏览器下载弹窗,要实现PDF直接打开预览,不需要调用save方法,只需要拿到生成的PDF二进制数据,生成浏览器可识别的Blob地址,直接跳转该地址即可触发内置PDF阅读器打开,不会弹出下载选择框。
可直接替换的代码
const previewPdf = () => { const element = document.getElementById("element-to-print"); const opt = { filename: patientName + "_Report.pdf", image: { type: "jpeg", quality: 0.98 }, html2canvas: { scale: 2 }, jsPDF: { unit: "in", format: "a4", orientation: "landscape" }, }; html2pdf() .set(opt) .from(element) // 输出PDF的Blob格式数据,不触发保存 .outputPdf('blob') .then(pdfBlob => { // 生成临时访问地址 const pdfPreviewUrl = URL.createObjectURL(pdfBlob); // 两种打开方式二选一即可: // 1. 新标签页打开 window.open(pdfPreviewUrl, '_blank'); // 2. 当前标签页打开 // window.location.href = pdfPreviewUrl; }); };
注意事项
- 如果用户浏览器本身设置了始终下载PDF文件,依然会触发下载,这是浏览器全局设置导致的,代码层面无法绕过
- 预览完成后可以调用
URL.revokeObjectURL(pdfPreviewUrl)释放临时地址占用的内存,避免不必要的内存开销 - 原代码里的
.save()调用必须删除,该方法是强制触发下载的核心逻辑
内容的提问来源于stack exchange,提问作者Magnoom
相关产品推荐
相关产品推荐

