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>javascript">
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 样式丢失
javascript"><style>#print {//样式如果写在这个下面，就会造成样式丢失}
</style>
若要打印 print 里面的，则样式只能在 info下面，不能写在 print 下，不然会丢失
