You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.02 04:06:31