Cordova应用表单内容无法渲染至PDF的技术求助

嘿，我来帮你搞定这个头疼的问题！你遇到的核心问题是：插件在生成PDF/打印时，没有捕获到用户填写后的表单实时数据，而是加载了原始的静态HTML内容。下面给你几个针对性的解决方案：

1. 修正cordova.plugins.printer.print的调用方式 #

你之前直接传location.href，插件会重新请求本地的原始HTML文件，自然拿不到用户输入的内容。应该把当前已修改的DOM转换成HTML字符串再传给插件，还要先同步表单实时值到DOM属性里：

// 同步用户输入的表单值到DOM的属性中（关键步骤）
function syncFormValues() {
  const inputs = document.querySelectorAll('#this-form input, #this-form textarea, #this-form select');
  inputs.forEach(el => {
    if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') {
      el.setAttribute('value', el.value);
    } else if (el.tagName === 'SELECT') {
      // 重置下拉框选中状态，再设置当前选中项
      Array.from(el.options).forEach(opt => opt.removeAttribute('selected'));
      el.options[el.selectedIndex].setAttribute('selected', 'selected');
    }
  });
}

function printPage() {
  syncFormValues();
  // 获取当前页面完整的HTML内容（包含用户填写的数据）
  const pageContent = document.documentElement.outerHTML;
  cordova.plugins.printer.print(pageContent, 'Document.html');
}

2. 修复pdf.fromData的参数问题 #

你之前直接传DOM元素给data字段，很多PDF生成插件需要的是HTML字符串，而且landscape参数应该是布尔值，不是字符串"portrait"：

function createPDF() {
  syncFormValues();
  const divToPrint = document.getElementById("this-form");
  // 把表单DOM转换成HTML字符串
  const formHtml = divToPrint.outerHTML;
  pdf.fromData({
    data: formHtml,
    documentSize: "A4",
    landscape: false, // 用布尔值控制横竖版，true为横版，false为竖版
    type: "share"
  }, this.success, this.failure);
}

额外排查建议 #

• 确保使用的Cordova插件是最新版本：旧版本的cordova-plugin-printer或PDF生成插件可能对动态DOM的支持不完善，更新后可能解决问题。
• 优先在真机测试：模拟器的WebView环境和真机有差异，有些插件的功能在模拟器上可能表现异常。
• 检查表单元素的命名：确保没有重复的id或name，这可能导致插件无法正确识别表单数据。

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