转载
组件
<template>
<div class="print">
<iframe id="iframe" style="display: none;"></iframe>
</div>
</template>
<script>
export default {
name: "print",
props: {
html: {
type: String,
default: ""
}
},
watch: {
html(val) {
if (val) {
this.setBodyHtml(val);
}
}
},
methods: {
setBodyHtml(html) {
const document = window.document;
const iframe = window.frames[0];
iframe.document.head.innerHTML = document.head.innerHTML;
iframe.document.body.innerHTML = html;
Promise.all([this.loadStyle(), this.loadImage()]).then(res => {
iframe.window.print();
});
},
loadStyle() {
const iframe = window.frames[0];
const styles = iframe.document.head.getElementsByTagName("style");
const links = iframe.document.head.getElementsByTagName("link");
let arrs = [];
arrs = arrs.concat(...styles, ...links);
return new Promise((resolve, reject) => {
for (let i = 0; i < arrs.length; i++) {
arrs[i].onload = function() {
if (i === arrs.length - 1) {
console.log("style 样式加载完成");
resolve("style 样式加载完成");
}
};
}
});
},
loadImage() {
const iframe = window.frames[0];
const imgs = iframe.document.body.getElementsByTagName("img");
return new Promise((resolve, reject) => {
for (let i = 0; i < imgs.length; i++) {
imgs[i].onload = function() {
if (i === imgs.length - 1) {
console.log("img 加载完成");
resolve("img 加载完成");
}
};
}
});
}
}
};
</script>
<div style="position: relative;" id="print">
内容内容
<el-button @click="print">打印</el-button>
引入组件
<print-view :html="printHtml" />
</div>
print(){
this.printHtml = document.getElementById("print").innerHTML
},