contentWindow.print() 打印

系列文章目录

提示：这里是使用的 iframe 进行实现打印的

前言

这段代码是一个JavaScript函数，用于打印指定元素的内容。它的功能是将指定元素的innerHTML获取到，然后创建一个隐藏的iframe元素，并将获取到的内容赋值给iframe的文档对象的body.innerHTML。接着，调用iframe的contentWindow.print()方法来触发打印操作。最后，将iframe从文档中移除。

这段代码的作用是在网页中实现打印指定元素的功能。你可以将需要打印的内容放在一个具有唯一id的元素中，然后调用这个函数并传入该元素的id，即可实现打印该元素的内容

一、contentWindow.print()

二、完整代码

代码如下（示例）：

   <iframe style="display: none">

      <div id="test">

        <img

          style="width: 100%; height: 100%"

          v-for="(item, index) in imgList"

          :key="index"

          :src="'data:image/png;base64,' + item"

          alt=""

        />

      </div>

    </iframe>

 

 printElementById(elementId) {     
      var printContent = document.getElementById(elementId).innerHTML;
      var iframe = document.createElement("iframe");   
      document.body.appendChild(iframe);  
      var doc = iframe.contentDocument || iframe.contentWindow.document; 
      doc.body.innerHTML = printContent; 
      iframe.contentWindow.print();  
      document.body.removeChild(iframe);   
 },

  this.printElementById("test");  事件直接使用 传递 打印展示id

2.使用 bug

代码如下（示例）：

  async PrintingClick() {

      if (this.selectionListSub.length) {

        let ids = this.selectionListSub.map((item) => item.tbmmu002aId);

        try {

          const res = await getImages(ids.join(","));

          this.imgList = [];

          if (res.data.code == 200) {

            let { code, data } = res.data;

            if (code === 200) {

              this.imgList = data.map((item) => item);

              const checkImagesLoaded = () => {

                return new Promise((resolve) => {

                  const loadPromises = this.imgList.map((image) => {

                    return new Promise((resolve, reject) => {

                      if (image.complete) {

                        resolve();

                      } else {

                        image.onload = resolve;

                        image.onerror = reject;

                      }

                    });

                  });

                  Promise.all(loadPromises).then(resolve).catch(resolve);

                });

              };

              await checkImagesLoaded();

              this.printElementById("test");

            }

          }

        } catch (error) {

          console.error(error);

        }

      } else {

        this.$message({

          message: "至少勾选一条数据",

          type: "warning",

        });

      }

    },

 打印过程中有遇到 dom渲染 展示问题 点击打印的时候 由于接口数据dom没有渲染完成 就已经调用了打印方法 导致打印展示没有全部展示成功  以上是修复后的代码        

这段代码是一个异步函数，名为PrintingClick。它首先检查this.selectionListSub数组是否有元素。如果有元素，它会提取出每个元素的tbmmu002aId属性，并将这些属性的值以逗号分隔的形式拼接成字符串ids。

然后，它调用getImages函数，并传入ids作为参数。getImages函数返回一个Promise对象，该对象包含一个响应数据res。如果res的code属性等于200，它会将this.imgList数组清空，并将res的data属性赋值给this.imgList数组。

接下来，它定义了一个名为checkImagesLoaded的函数，该函数返回一个Promise对象。在该函数内部，它创建了一个loadPromises数组，其中每个元素都是一个Promise对象。这些Promise对象用于检查this.imgList数组中的每个图片是否加载完成。如果图片已经加载完成，它会调用resolve函数，否则，它会将resolve函数赋值给image.onload，并将reject函数赋值给image.onerror。

然后，它使用Promise.all函数等待所有的loadPromises数组中的Promise对象都被解决（即图片加载完成）。一旦所有的Promise对象都被解决，它会执行resolve函数。

接着，它调用await checkImagesLoaded()，等待所有图片加载完成。

最后，它调用printElementById函数，并传入参数"test"。

如果this.selectionListSub数组为空，它会显示一条警告消息，提示至少勾选一条数据。

结果展示：