Vue中打印网页的指定部分的几种方法

楔子

  • 这里是以下会用到的一些知识和说明
  • 可以在GitHub上下载打印插件,但是自己写更简单,所以我就自己写了
  • 本例为打印网页上的一个表格
  • window.print()打印的是整个网页的HTML内容,不包括CSS
  • @media print{ ... }可以设置打印时样式

正文

  • 网页效果:
    《Vue中打印网页的指定部分的几种方法》

  • 目标:右键点击打印按钮时能打印表格,忽略下方的文字和图片,并且保留样式

  • 思路:点击打印按钮时,将整个页面的HTML替换为目标区域的HTML,配合@media print{}保留样式,但是页面的HTML被替换后造成页面的改变,因此最后需要刷新一下页面

  • 代码:

      <!--HTML部分-->
      <!--将需要打印的部分用一个div框起来,给div一个id,这里用print-->
      <div id="print">
      	<table>...表格里面的内容...</table>
      </div>
     
     <!--将下面的打印函数绑定到打印按钮上-->
     <button @click=print()>打印报销单</button>
    
    //JS部分
    //将这个函数绑定到打印按钮上
    print(){ 
            let print = document.getElementsByClassName("print")[0]  //获取目标区域的HTML结构
            document.body.innerHTML = print.innerHTML   //替换网页的html内容
            window.print()   //打印
            window.location.reload()  //刷新页面,因为网页的html被替换后很丑
          }
    
    /*css部分*/
    /*用@media print{}保留打印时的样式*/
    ...直接写在style下的样式,在打印时会丢失,比如:... table{ border: 2px solid black;width: 80%;margin: 0 auto;border-collapse: collapse}
    ...写在@media print{ }中的样式,打印时会保留,比如...
    @media print { 
    	table{ border: 2px solid black;width: 80%;margin: 0 auto;border-collapse: collapse}
    }
    /*写在@media print{}中的样式在不打印的时候不会生效,因此打印时的样式要写两遍,里面和外面各一遍*/
    
  • 此时点击打印按钮的效果为《Vue中打印网页的指定部分的几种方法》

  • 打印的效果并不理想,因为使用的是A4纸的尺寸,我们可以通过在@media print中设置size配合打印时的设置来解决这个问题

    @page{ 
        size: landscape;
        margin: 0 ;
      }
    
  • 最终的css部分

<style scoped>
	...在网页中正常显示的样式...
	@media print{ 
		@page{   
        size: landscape; /*对打印的尺寸进行设置*/
        margin: 0 ;  /*去掉上面的水印*/
      }
      ...在打印时需要保留的样式...
    }
</style>
  • 最后,在打印的选项中,选择纸张尺寸为Ledger即可
    《Vue中打印网页的指定部分的几种方法》

  • 除了这种方法,还有其他的打印思路

  1. 将html刷新到iframe中,打印iframe 【不需刷新页面,但无法保留样式】
    <!--HTML部分-->
    <!--在html中插入一个iframe节点,插在哪里都行-->
    <iframe src="" frameborder="0" width="0" height="0"></iframe>
    
    //打印函数
    print(){ 
            let print = document.getElementsByClassName("print")[0]  //获取目标区域
        	doc = iframe.contentWindow.document
            doc.write(print.innerHTML)  //将目标区域的html写入iframe
            iframe.contentWindow.focus()
    		iframe.contentWindow.print()  //打印iframe
          }
    
  2. 将页面中不需要打印的部分隐藏掉 【不需刷新页面,可以保留样式,但是对绝对定位的元素不生效】
    操作方法:在@media print{}中写一个no-print样式,例如:
    @media print{ 
    	.no-print:{ display:none}
    }
    

    将这个类放到不需要打印的标签上,实现打印是隐藏
    然后在打印按钮上绑定window.print()直接打印即可

    原文作者:对啊我是太阳啊
    原文地址: https://blog.csdn.net/qq_42034123/article/details/102783126
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞