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

发布于
2023-10-20 浙江

更新于
2023-10-20

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

实际打印：textarea内容不显示，复选框也不显示高亮

源码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>

前端 html javascript

阅读 836

AI BotBETA

这个问题可能涉及到JavaScript代码和HTML页面的复杂性。通常，当我们在JavaScript中修改了表单的内容，这些更改应该在页面上立即反映出来。然而，有些情况下，当我们尝试打印表单时，可能会出现一些问题。

以下是一些可能的原因和解决方案：

打印设置: 在某些浏览器中，你可能需要调整打印设置以确保正确显示表单。例如，在Chrome中，你可以右键点击打印按钮并选择“更多设置”-> "布局" -> "缩放" -> "缩放以适合纸张宽度"。
CSS样式: 如果你的CSS样式规则可能影响打印输出，尝试使用@media print查询来定义只在打印时应用的样式。
JavaScript与打印: 如果你使用JavaScript来动态修改表单内容，可能需要确保在打印前已经完全加载和渲染了这些内容。例如，你可以尝试在打印前通过window.print()方法来触发打印。
兼容性问题: 检查你的代码是否与使用的浏览器和操作系统兼容。
异步加载问题: 如果表单内容是异步加载的，可能需要确保在打印前这些内容已经完全加载。
使用库或插件: 如果你经常需要打印表单，可能值得考虑使用一些库或插件来帮助处理这个问题。

如果以上提到的方法都不适用或不能解决问题，建议提供更多的代码和上下文信息以便更好地帮助你解决问题。

2 个回答

得票最新

唯一丶

23.1k103743

发布于
2023-10-21 美国

更新于
2023-10-24

✓ 已被采纳

你这里之前时对外面的盒子调用了 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>

打印效果：

fang

86313

发布于
2023-10-21 福建

docHtml1得到的是字符串，所以是没有这些状态的，把click函数里面的一大串直接改成window.print

<!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();
    // console.log(doc1,'doc1',docHtml1,'html')
    // iframe1.contentWindow.focus();
    // iframe1.contentWindow.print();
    window.print();

  })

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

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

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

你尚未登录，登录后可以

扁平化数组转换成树形?

js 如何将Key属性相同的放在同一个数组？

省市区街道数据在哪里可以下载？

两个promise问题？

如何自定义设置虚线边框的样式？

在Electron中，我们想要创建特定的BrowserWindow，想要使用react组件作为BrowserWindow的内容，请问如何实现呢？

Object assgin拷贝问题？