html2pdf、html2canvas、jsPDF无法正常导出HTML select选中项求助

选中下拉框里的Saab后导出PDF，结果PDF里始终显示第一个选项Volvo，完全不符合预期。

环境版本 #

{
    "html2canvas": "^1.3.3",
    "html2pdf.js": "^0.10.1",
    "jspdf": "^2.4.0",
    "jspdf-html2canvas": "^1.4.9",
}

相关代码 #

HTML #

<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

JavaScript #

const opt = {
  jsPDF: {
    unit: "in",
    format: "A4",
    orientation: "portrait",
    compress: true,
  },
  html2canvas: {
    scale: 2,
    useCORS: true,
  },
  image: { type: "png" },
  margin: [0, 0, 0, 0],
  filename: pdfFileName,
  pagebreak: { mode: ["avoid-all", "css"], after: afterBreak },
};

html2pdf()
  .set(opt)
  .from(elementToPrint)
  .save()
  .then(() => {
    $(".card").css(
      "box-shadow",
      "0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12)"
    );
  });

解决办法 #

1. 临时调整option顺序（快速修复） #

html2canvas对原生select的动态选中状态捕获存在bug，因为原生select是浏览器自带组件，并非纯DOM渲染。可以在导出前把选中的option移到第一个位置，导出后再恢复原样：

const selectEl = document.getElementById('cars');
// 保存原始状态
const originalOptions = Array.from(selectEl.options).map(opt => opt.outerHTML);
const selectedVal = selectEl.value;

// 临时重排option
selectEl.innerHTML = '';
originalOptions.forEach(html => {
  const opt = document.createElement('option');
  opt.innerHTML = html;
  if (opt.value === selectedVal) {
    selectEl.prepend(opt);
  } else {
    selectEl.appendChild(opt);
  }
});
selectEl.value = selectedVal;

// 执行导出
html2pdf()
  .set(opt)
  .from(elementToPrint)
  .save()
  .then(() => {
    // 恢复原始select状态
    selectEl.innerHTML = originalOptions.join('');
    selectEl.value = selectedVal;
    $(".card").css(
      "box-shadow",
      "0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12)"
    );
  });

2. 升级html2canvas版本 #

你当前使用的1.3.3版本较老，对表单元素的支持不完善。升级到最新稳定版（比如1.4.1及以上），大概率已经修复了这个问题。

3. 改用自定义下拉框 #

换掉原生select，用纯HTML+CSS写一个模拟的下拉组件（比如用div、ul/li实现），这样所有元素都是普通DOM节点，html2canvas能准确捕获选中的内容。

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