Blazor项目调用html2pdf报ReferenceError未定义的问题咨询

问题背景 #

在Blazor项目中已在主HTML文件的main.js之前引入html2pdf.bundle.min.js，浏览器网络面板显示该JS文件加载状态码为200，但调用自定义JS函数printDiv时控制台抛出FAILED: ReferenceError: html2pdf is not defined异常。相同代码在旧版本项目中可正常运行。

涉及代码 #

调用html2pdf的函数（main.js中）：

function printDiv(divName) {
  let element = document.getElementById(divName);
  let clone = document.getElementById("clone");
  try {
    let opt = {
      margin: 0,
      filename: 'myfile.pdf',
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 1, clone: clone, removeContainer: true },
      jsPDF: { unit: 'mm', format: 'a4', clone: clone, orientation: 'landscape' }
    };
    html2pdf().set(opt).from(element).toContainer().save();
  } catch  (e) {
    console.error("FAILED:", e);
  }
}

App.razor中的脚本引入：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="@Assets["app.css"]" />
    <link rel="stylesheet" href="@Assets["/css/styles.css"]" />
    
    <ImportMap @rendermode="InteractiveServer" />
    <link rel="icon" type="image/png" href="/Assets/logo.png" />
    <HeadOutlet @rendermode="InteractiveServer" />
</head>

<body style="height:100dvh;width:100dvw">
    <Routes @rendermode="InteractiveServer" />

    <script src="_framework/blazor.web.js"></script>
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
    <script src="_content/MudBlazor.Markdown/MudBlazor.Markdown.min.js"></script>
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>

    <script src="js/html2pdf.bundle.min.js"></script>
    <script src="js/main.js?v=1.0.0.9"></script>
</body>

</html>

可能的原因及解决方法 #

• html2pdf版本升级导致全局暴露变更
  新版本的html2pdf可能改为ES模块导出，不再自动将html2pdf挂载到全局window对象。解决方法：在html2pdf脚本后添加代码手动暴露全局变量：

  <script src="js/html2pdf.bundle.min.js"></script>
  <script>window.html2pdf = html2pdf;</script>
  

  或者如果使用模块模式，需在main.js中通过import html2pdf from './html2pdf.bundle.min.js'导入（此时脚本需添加type="module"属性）。

• InteractiveServer渲染模式的脚本执行时机问题
  Blazor的交互式服务器渲染可能干扰全局上下文初始化。可尝试：

  1. 给html2pdf脚本添加defer属性，确保DOM加载完成后执行：

     <script src="js/html2pdf.bundle.min.js" defer></script>
     

  2. 在main.js中等待页面加载完成后再定义函数：

     window.addEventListener('load', () => {
       window.printDiv = function(divName) {
         // 原函数逻辑
       };
     });
     

• 浏览器缓存导致脚本不匹配
  html2pdf脚本未加版本参数，浏览器可能缓存了旧版本。给html2pdf脚本添加版本号强制刷新：

  <script src="js/html2pdf.bundle.min.js?v=1.0.0.9"></script>
  

• Blazor核心脚本的作用域干扰
  blazor.web.js的执行可能修改全局作用域，尝试将html2pdf脚本移到blazor.web.js之前引入：

  <script src="js/html2pdf.bundle.min.js"></script>
  <script src="_framework/blazor.web.js"></script>
  <!-- 其他第三方脚本 -->
  <script src="js/main.js?v=1.0.0.9"></script>
  

• printDiv函数未暴露到全局作用域
  确保printDiv函数挂载到window对象上，否则Blazor互操作无法调用，同时也可能因作用域问题无法访问全局的html2pdf：

  window.printDiv = function(divName) {
    // 原函数内容
  };
  

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