vue 点击打印页面部分内容，或者打印弹窗内的内容
打印页面部分内容
<template>
<div>
<div id="print">
<div class="info">
<div class="bx_title">费用报销单<span class="code">NO.<span class="code-num">2008359</span></span></div>
<div class="list">
<div class="list_item" style="width: 22%;">部门：财务部</div>
<div class="list_item" style="width: 22%;">报销人：李四</div>
<div class="list_item" style="width: 30%;">日期：2021 年 06 月 01 日</div>
<div class="list_item" style="width: 22%;">领款人：李四</div>
</div>
<div class="approval">
<div>XXX审批：</div>
<div>XXX审批：</div>
<div>XXX审批：</div>
<div>XXX审批：</div>
</div>
</div>
</div>
<div style="display: flex; justify-content: flex-end; padding-top: 20px">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="handleClick">打印</el-button>
</div>
</div>
</template>
<script>
export default {
name: "Detail",
data() {
return {
data: []
};
},
methods: {
handleClick() {
const printContents = document.getElementById('print').innerHTML;
const printWindow = window.open('', '', 'width=800,height=1000');
printWindow.document.open();
printWindow.document.write('<html><head><title>打印</title>');
// 复制原页面的样式
const links = document.getElementsByTagName('link');
for (let i = 0; i < links.length; i++) {
if (links[i].rel === 'stylesheet') {
printWindow.document.write(`<link rel="stylesheet" type="text/css" href="${links[i].href}">`);
}
}
// 复制原页面的内联样式
const styleTags = document.getElementsByTagName('style');
for (let i = 0; i < styleTags.length; i++) {
printWindow.document.write(styleTags[i].outerHTML);
}
printWindow.document.write('</head><body>');
printWindow.document.write(printContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
// // 等待样式加载完成后再调用打印
printWindow.onload = function () {
printWindow.print();
printWindow.close();
};
}
}
}
</script>
遇到问题
1、css 样式丢失
检测是否使用less/scss嵌入式样式风格，全部改成原生的css的写法。
2、指定具体标签内元素打印，css 样式丢失
<style>
#print {
//样式如果写在这个下面，就会造成样式丢失
}
</style>
若要打印 print 里面的，则样式只能在 info下面，不能写在 print 下，不然会丢失
