如何解决SurveyJS导出PDF时因未定义变量引发的TypeError？

问题背景 #

按照SurveyJS官方步骤实现多页面表单的PDF导出功能，功能无响应，控制台抛出两类错误：

初始压缩库错误信息 #

Uncaught TypeError: Cannot read properties of undefined (reading 'Serializer')
    at survey.pdf.min.js:2:33043
    at survey.pdf.min.js:2:179807
    at survey.pdf.min.js:2:179813
    at survey.pdf.min.js:2:306
    at survey.pdf.min.js:2:326

survey.js:33 Uncaught ReferenceError: SurveyPDF is not defined
    at savePdf (survey_rct_wrapper.js:33:23)
    at t.action (survey_rct_wrapper.js:41:19)
    at HTMLInputElement.<anonymous> (survey.jquery.min.js:11:47630)
    at HTMLInputElement.dispatch (jquery.min.js:2:40035)
    at v.handle (jquery.min.js:2:38006)

切换未压缩库后的错误信息 #

使用以下PUG最小复现代码：

doctype html
html
  head
    <!-- jsPDF library -->
    <script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.js"></script>

    <!-- SurveyJS PDF Generator library -->
    <script src="https://unpkg.com/survey-pdf/survey.pdf.js"></script>

控制台输出更详细错误：

flat_question.ts:170 Uncaught TypeError: Cannot read properties of undefined (reading 'Serializer')
    at ./src/flat_layout/flat_question.ts (flat_question.ts:170:1)
    at __webpack_require__ (bootstrap:19:1)
    at ./src/flat_layout/flat_repository.ts (flat_rating.ts:98:61)
    at __webpack_require__ (bootstrap:19:1)
    at ./src/helper_survey.ts (flat_textbox.ts:28:60)
    at __webpack_require__ (bootstrap:19:1)
    at ./src/doc_controller.ts (index.js:46:1)
    at __webpack_require__ (bootstrap:19:1)
    at ./src/survey.ts (pdf_titlepanel.ts:18:2)
    at __webpack_require__ (bootstrap:19:1)

问题原因 #

SurveyPDF库依赖SurveyJS核心库提供的Serializer等核心对象，当前代码只导入了PDF生成库和jsPDF，缺少必要的SurveyJS核心库依赖，导致初始化失败。

修复步骤 #

1. 补充导入SurveyJS核心库 #

根据项目环境选择对应核心库，比如jQuery环境导入survey-jquery，纯JS环境导入survey-core+survey-knockout，且必须保证核心库与PDF库版本一致。

修正后的PUG示例（jQuery环境）：

doctype html
html
  head
    <!-- jQuery依赖（使用survey-jquery时需要） -->
    <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
    <!-- jsPDF库 -->
    <script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.js"></script>
    <!-- SurveyJS核心库（jQuery版本） -->
    <script src="https://unpkg.com/survey-jquery@latest/survey.jquery.min.js"></script>
    <!-- SurveyPDF生成库（与核心库版本一致） -->
    <script src="https://unpkg.com/survey-pdf@latest/survey.pdf.min.js"></script>

2. 正确初始化SurveyPDF #

确保在核心库加载完成后再初始化SurveyPDF对象，示例代码：

function savePdf() {
  // 你的调查JSON结构
  const surveyJson = {
    title: "测试表单",
    pages: [
      {
        elements: [
          { type: "text", name: "name", title: "姓名" }
        ]
      }
    ]
  };

  // 先初始化Survey核心对象（可选，用于验证表单数据）
  const surveyModel = new Survey.Model(surveyJson);
  
  // 检查SurveyPDF是否加载完成
  if (typeof SurveyPDF !== 'undefined') {
    const pdfGenerator = new SurveyPDF.SurveyPDF(surveyJson);
    pdfGenerator.save("survey-export.pdf");
  } else {
    console.error("SurveyPDF未正确加载，请检查库依赖顺序");
  }
}

3. 版本匹配注意事项 #

如果遇到版本兼容性问题，建议指定具体版本号，比如：

<script src="https://unpkg.com/survey-jquery@1.9.100/survey.jquery.min.js"></script>
<script src="https://unpkg.com/survey-pdf@1.9.100/survey.pdf.min.js"></script>

替代方案 #

如果上述方案仍有问题，可以尝试以下替代方法：

• HTML转PDF：先用html2canvas将渲染后的SurveyJS表单转为图片，再用jsPDF将图片插入生成PDF（适合结构简单的表单）
• 后端生成：将表单数据发送到后端，使用后端PDF生成工具（如Node.js的pdfkit、Java的iText）生成PDF后返回给前端

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