contentWindow.print() 打印

最新推荐文章于 2024-07-12 22:54:26 发布

小孙爱出bug

最新推荐文章于 2024-07-12 22:54:26 发布

阅读量839

点赞数 19

文章标签： javascript 前端 html css vue.js es6

本文链接：https://blog.csdn.net/DivBOxp/article/details/139671852

版权

系列文章目录

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

文章目录

一、contentWindow.print()
二、完整代码
总结

前言

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

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

一、contentWindow.print()

iframe.contentWindow.print(); 调用iframe的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数组为空，它会显示一条警告消息，提示至少勾选一条数据。