vue print 打印

泥巴客

已于 2025-05-29 09:38:32 修改

阅读量775

点赞数 19

分类专栏： VUE 文章标签： vue.js 前端 javascript vue打印

于 2025-02-09 11:25:15 首次发布

本文链接：https://blog.youkuaiyun.com/zhu_lizhen/article/details/145528268

版权

VUE 专栏收录该内容

20 篇文章

订阅专栏

文章目录

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 下，不然会丢失