楔子

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

正文

• 网页效果：
  

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

• 思路：点击打印按钮时，将整个页面的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{}中的样式在不打印的时候不会生效，因此打印时的样式要写两遍，里面和外面各一遍*/
  

• 此时点击打印按钮的效果为

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

  @page{
      size: landscape;
      margin: 0 ;
    }
  

• 最终的css部分

<style scoped>
	...在网页中正常显示的样式...
	@media print{
		@page{  
        size: landscape; /*对打印的尺寸进行设置*/
        margin: 0 ;  /*去掉上面的水印*/
      }
      ...在打印时需要保留的样式...
    }
</style>

• 最后，在打印的选项中，选择纸张尺寸为Ledger即可
  

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

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()直接打印即可

近期着手项目任务的打印功能，在此作个记录，本文介绍基于React的一种调用浏览器打印页面指定内容的方法。

整体思路： 通过构建一个隐藏的元素（该元素包裹需打印的内容），当打印行为触发时，将页面其他的一些不需要打印的元素隐藏，然后将需打印的元素追加到body中，打印完成后，再恢复初始状态即可。浏览器打印的本质还是将web页面中的元素打印出来而已。

1. 构建待打印元素

在页面中构建一个display为none的元素，里面的内容为你需要打印的内容。我们还需要设置包裹打印内容的元素的ref属性，以便于后面获取到元素。

<div style={{ display: 'none' }}>
	<div ref={el => (this.printRef = el)}>
	{ 打印内容 }
	</div>
</div>

2. 打印动作触发时的处理

处理流程：

1. 获取待打印元素；
2. 将根元素隐藏；
3. 将待打印元素追加到body中；
4. 调用浏览器的打印预览；
5. 预览界面关闭后，将待打印元素从body中移除，将原始页面恢复。

let printView = this.state.printRef  //获取待打印元素
document.querySelector('#root').className = 'print-hide'  //将根元素隐藏
document.body.appendChild(printView) //将待打印元素追加到body中
window.print() //调用浏览器的打印预览
document.body.removeChild(printView) //将待打印元素从body中移除
document.querySelector('#root').className = '' //将原始页面恢复

对应的CSS设置：

@page {
  size: A4;
  margin: 0;
}
@media print {
	html, body {
	    min-width: 0;
	    width: 210mm; 
	    height: 297mm;
	}
	.print-hide {
		visibility: hidden!important;
		display: none!important;
	}
}

其中，@page中的size可以自己设置纸张的大小，如果是A4纸可以直接设置值为A4，媒体查询@media print中设置的是打印时的样式，因为打印设备知道其输出区域的物理大小，所以使用厘米（cm）、毫米（mm）、英寸（in）等作为打印设计的单位完全可行。

补充（其他原生的打印方法）

1. 直接替换body的内容为要打印的内容，之后再重新刷新页面。

const old = window.document.body.innerHTML //备份原来的页面
window.document.body.innerHTML = ''
window.document.body.appendChild(/* 将你要打印的内容附加到这 */)
window.print() //调用print()函数时，会跳出打印预览的界面，以下的代码被阻塞，关闭预览界面后继续执行
window.document.body.innerHTML = old
window.location.reload() //重新加载旧页面

2. 打开一个新窗口，将打印内容放到新窗口打印，打印结束后关闭新窗口

const newWindow = window.open("打印窗口", "_blank")
const docStr = '<div>test</div>'  //需要打印的内容
newWindow.document.write(docStr)
const styles = document.createElement("style")
styles.setAttribute('type', 'text/css') //media="print"
styles.innerHTML = ''
newWindow.document.getElementsByTagName('head')[0].appendChild(styles)
newWindow.print()
newWindow.close()

以上两种方法可能会造成CSS样式应用无效的问题。

3. 注意点

1. 第二小节的步骤2中的意思是：将页面中所有不需要打印的元素隐藏，特别注意像模态窗Model这些元素，也要为它们加上'print-hide'className属性。
2. 如果需要在特定位置强制分页打印，可以尝试在对应元素上设置page-break-before：always !important、page-break-after：always !importantCSS属性，该属性只对块级元素有效（这个非常重要，就被这个坑了）。
3. 进入打印预览后，我们无法获知用户最终是选择了打印，还是选择了取消。这里若有人知道解决方法的话，欢迎留言。
   
4. JS能实现谷歌和IE浏览器打印预览，火狐不行，火狐浏览器对于JS的操作权限有极为严格的限制，其基本原则是JS无法操作页面外事务,可以试试用JS调用HTML5机制模拟打印界面输出到打印机，不通过浏览器来完成。
5. 在使用口袋打印机（喵喵机）打印，如果打印内容有二维码的时候，要注意二维码的分辨率问题。（我就踩了一个坑：二维码组件生成二维码，默认是以canvas的形式，这样打印出来导致整个内容模糊，改成svg就可以清晰打印了）
   
   

若对你有帮助，可以支持一下作者创作更多好文章哦~

EXCEl有自动调整行高的功能，但是自动调整的行高十份紧凑，打印时会出现部分行的字下半截看不见的问题。

行不多时，可以手动调整行高，但行数超过百行后，手动工作量太大， 现使用VBA的方式进行批量调整行高，对微软和WPS的excel都适用，这里我使用WPS。

1.调出开发工具标签

依次选择 文件->选项->自定义功能区->勾选开发工具

2.插入代码

在开发工具栏中选择VB编辑器

粘贴入下面代码

Sub HeightTo()

    Application.ScreenUpdating = False
    For i = 1 To ActiveSheet.UsedRange.Rows(ActiveSheet.UsedRange.Rows.Count).Row
        If Application.WorksheetFunction.CountA(Rows(i)) > 0 Then
            Rows(i).RowHeight = Rows(i).RowHeight + 14
        End If
    Next i
    Application.ScreenUpdating = True

End Sub

代码中有两个参数可以根据实际情况自行修改

For i = 1 To ActiveSheet.UsedRange.Rows(ActiveSheet.UsedRange.Rows.Count).Row

上述 1 表示从第1行开始自动调整行高，根据自己表格进行修改。

 Rows(i).RowHeight = Rows(i).RowHeight + 14

上述的 14 ，表示每行增加的行高是多少，可根据自己表格情况和打印机情况进行修改。

3.批量调整行高

选择表格所有列，并在任一列的间隔处双击，使用excvel自动调整行高功能，使表格变得紧缩。
回到VBA编辑界面，单击运行按钮。

完成！