js打印表单时，为什么表单内容修改后有的不起效？

站长

2024年06月25日 09:30 · 阅读数 17

js打印表单时，为什么表单内容修改后有的不起效？如下：页面填写：

实际打印：textarea内容不显示，复选框也不显示高亮 js打印表单时，为什么表单内容修改后有的不起效？

源码demo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
  <div id="divKanZhengPanel-binli">
    <input type="text">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <div class="checkDiv">
      <input autocomplete="off" class="inputs" type="checkbox" name="yangwei" value="正位"><label>正位</label>
      <input autocomplete="off" class="inputs" type="checkbox" name="yangwei" value="外显斜"><label>外显斜</label>
      <input autocomplete="off" class="inputs" type="checkbox" name="yangwei" value="内显斜"><label>内显斜</label>
      <input autocomplete="off" class="inputs" type="checkbox" name="yangwei" value="外隐斜"><label>外隐斜</label>
      <input autocomplete="off" class="inputs" type="checkbox" name="yangwei" value="内隐斜"><label>内隐斜</label>
  </div>
  </div>
<button id="dw">点我打印</button>
<script>
  document.getElementById('dw').addEventListener('click', function() {
    // window.print();
    let docHtml1 = ''
    docHtml1 += $("#divKanZhengPanel-binli").prop("outerHTML");
    $('#print-iframe').remove(); // 每次打印前移除先前生成的元素
    // 开始打印
    let iframe1 = document.createElement('IFRAME');
    let doc1 = null;
    iframe1.setAttribute("id", "print-iframe");
    iframe1.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-0px;top:-0px;visibility: auto;');
    document.body.appendChild(iframe1);
    doc1 = iframe1.contentWindow.document;

    doc1.write(docHtml1);
    doc1.close();
    iframe1.contentWindow.focus();
    iframe1.contentWindow.print();
  })

</script>
</body>
</html>

1个回答

test

2024-06-25

你这里之前时对外面的盒子调用了 outerHTML ，是拿不到实际的值的（你直接把结果 console.log 出来就能看到了），你点击那个按钮打印看到的预览效果也应该是没有的，至少我这里是这样。

你应该使用 cloneNode ，去克隆你原来的节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div id="divKanZhengPanel-binli">
    <div>
        <input type="text">
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <div class="checkDiv">
            <input autocomplete="off" class="inputs" type="checkbox" name="yangwei" value="正位"><label>正位</label>
            <input autocomplete="off" class="inputs" type="checkbox" name="yangwei" value="外显斜"><label>外显斜</label>
            <input autocomplete="off" class="inputs" type="checkbox" name="yangwei" value="内显斜"><label>内显斜</label>
            <input autocomplete="off" class="inputs" type="checkbox" name="yangwei" value="外隐斜"><label>外隐斜</label>
            <input autocomplete="off" class="inputs" type="checkbox" name="yangwei" value="内隐斜"><label>内隐斜</label>
        </div>
    </div>
</div>
<button id="dw">点我打印</button>
<script>
    document.getElementById('dw').addEventListener('click', function () {
        $('#print-iframe').remove(); // 每次打印前移除先前生成的元素
        // 开始打印
        let iframe1 = document.createElement('IFRAME');
        let doc1 = null;
        iframe1.setAttribute('id', 'print-iframe');
        iframe1.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-0px;top:-0px;visibility: auto;');
        document.body.appendChild(iframe1);
        setTimeout(function () {
            doc1 = iframe1.contentWindow.document;
            doc1.body.appendChild(document.querySelector('#divKanZhengPanel-binli').cloneNode(true));
            doc1.close();
            iframe1.contentWindow.focus();
            iframe1.contentWindow.print();
        });
    });

</script>
</body>
</html>

打印效果：

answer image

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容