一、适用场景

1、所有存在print方法的浏览器

2、想要打印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>浏览器打印</title>
  </head>
  <style></style>
  <body>
    <div style="text-align: left;">
      <button id="btn-print" style="margin: 20px 200px;">打印</button>
      <!-- 注意！！ 打印的文档样式必须用内联样式，写在元素上，不能用class，否则打印的时候没法识别样式， -->
      <div id="print" style="display: flex;justify-content: center; max-height: 600px;width: 595px;margin-top: 20px; text-align: center; overflow: auto">
        <div id="print-area" style="width: 595px;text-align: center;">
          <!-- 通过调整宽度，对齐，以及内外边距调整打印的效果 -->
          <div
            id="print-list"
            style="
              padding: 30px 40px;
              text-align: left;
            "
          >
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    // 生成测试的节点数据
    const fragment = document.createDocumentFragment();
    for (let i = 0; i < 100; i++) {
      const div = document.createElement("div");
      div.innerHTML = "我是用来测试打印的测试数据";
      fragment.append(div);
    }

    document.querySelector("#print-list").append(fragment);
    // 注册打印事件
    document.querySelector("#btn-print").addEventListener("click", function () {
      print('print-area');
    });

    /**
     * @returns {void} 浏览器打印
     * description：因为浏览器打印只能是window.open()方法，打印的是整个document文档，所以通过创建iframe用来打印局部内容，才不会影响当前文档的内容
     * 像此类小功能插件，就用这个方法修改扩展就可以满足绝大部分场景了
     * params: id — 需要打印文档内容的容器元素的id
     */
    function print(id) {
      const printArea = document.querySelector("#"+id);
      // 不存在iframe的时候创建iframe元素对象
      if (!document.querySelector("#iframe-print")) {
        const print = document.createElement("iframe");
        print.id = "iframe-print";
        document.body.append(print);
      } else {
        document.querySelector("#iframe-print").style.display = "block";
      }
      // 获取iframe的window对象
      const iframeW = document.querySelector("#iframe-print").contentWindow;
      // 注意： 将文档中的dom元素插入到其他元素节点中之后，原文档中的dom元素就会被移除，整个过程属于元素转移
      iframeW.document.body.append(printArea);
      document.querySelector("#print").innerHTML = "";
      // 在iframe内打印文档
      iframeW.print();
      // 打印完成后清空html
      iframeW.document.body.innerHtml = "";
      // 隐藏iframe的元素
      document.querySelector("#iframe-print").style.display = "none";
      // 因为打印的文档被转移到了iframe中，所以这里需要重新将打印的文档插入到原来的元素节点下
      document.querySelector("#print").append(printArea);
    }
  </script>
</html>

浏览器中实现局部页面打印

一、适用场景

二、代码实现