使用Printjs打印Bootstrap表单选中项遇到问题

我之前也踩过这个坑！问题出在浏览器和Print.js对下拉框状态的处理差异上，咱们来拆解一下：

为啥会出现这个问题？ #

当你在页面上选了下拉框的新选项时，浏览器只是在内存里更新了DOM的选中状态，但不会自动修改HTML里的selected属性。而Print.js默认是直接抓取元素的原始HTML代码，不是当前实时的DOM状态，所以它只会打印一开始默认选中的那个选项。

怎么搞定？打印前手动同步选中状态 #

解决思路很简单：在调用Print.js打印之前，手动把当前选中的下拉框选项的selected属性加上，这样Print.js就能抓到正确的选中项了。

给你写个实用的示例代码：

// 同步下拉框选中状态到HTML属性的函数
function syncSelectStates() {
  // 替换成你的表单ID，或者直接选页面所有select元素
  const allSelects = document.querySelectorAll('#your-form-container select');
  
  allSelects.forEach(select => {
    // 先清空所有选项的selected属性
    Array.from(select.options).forEach(opt => opt.removeAttribute('selected'));
    // 给当前选中的选项加上selected属性
    select.options[select.selectedIndex].setAttribute('selected', 'selected');
  });
}

// 触发打印的函数
function printMyForm() {
  // 先同步状态
  syncSelectStates();
  // 调用Print.js打印指定区域
  printJS({
    printable: 'your-form-container', // 你的表单/目标区域ID
    type: 'html',
    targetStyles: ['*'] // 确保Bootstrap样式能被打印出来
  });
}

额外小提示 #

• 如果你的下拉框是通过JS动态生成的，确保querySelectorAll能正确抓到这些元素（可以调整选择器范围）。
• 加上targetStyles: ['*']能避免打印时丢失Bootstrap的表单样式，让打印出来的内容和页面上的视觉效果一致。

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