文章目录
1. 构建待打印元素
2. 打印动作触发时的处理
补充（其他原生的打印方法）
3. 注意点

近期着手项目任务的打印功能，在此作个记录，本文介绍基于React的一种调用浏览器打印页面指定内容的方法。
整体思路： 通过构建一个隐藏的元素（该元素包裹需打印的内容），当打印行为触发时，将页面其他的一些不需要打印的元素隐藏，然后将需打印的元素追加到body中，打印完成后，再恢复初始状态即可。浏览器打印的本质还是将web页面中的元素打印出来而已。
1. 构建待打印元素
在页面中构建一个display为none的元素，里面的内容为你需要打印的内容。我们还需要设置包裹打印内容的元素的ref属性，以便于后面获取到元素。
<div style={{ display: 'none' }}>
	<div ref={el => (this.printRef = el)}>
	{ 打印内容 }
	</div>
</div>

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

获取待打印元素；
将根元素隐藏；
将待打印元素追加到body中；
调用浏览器的打印预览；
预览界面关闭后，将待打印元素从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）等作为打印设计的单位完全可行。
补充（其他原生的打印方法）

直接替换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() //重新加载旧页面


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

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. 注意点

第二小节的步骤2中的意思是：将页面中所有不需要打印的元素隐藏，特别注意像模态窗Model这些元素，也要为它们加上'print-hide'className属性。
如果需要在特定位置强制分页打印，可以尝试在对应元素上设置page-break-before：always !important、page-break-after：always !importantCSS属性，该属性只对块级元素有效（这个非常重要，就被这个坑了）。
进入打印预览后，我们无法获知用户最终是选择了打印，还是选择了取消。这里若有人知道解决方法的话，欢迎留言。


JS能实现谷歌和IE浏览器打印预览，火狐不行，火狐浏览器对于JS的操作权限有极为严格的限制，其基本原则是JS无法操作页面外事务,可以试试用JS调用HTML5机制模拟打印界面输出到打印机，不通过浏览器来完成。
在使用口袋打印机（喵喵机）打印，如果打印内容有二维码的时候，要注意二维码的分辨率问题。（我就踩了一个坑：二维码组件生成二维码，默认是以canvas的形式，这样打印出来导致整个内容模糊，改成svg就可以清晰打印了）




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

又到了offer高收季了，前几天，因为朋友收到邮件，收需要打印qq邮件正文部分，而且不是全部打印正文，需要打印选定部分的正文，于是自己就摸索了一下，虽然还是麻烦，但是还是比较快的，相比于传统的Ctrl+C和Ctrl+V操作，本方法还是比较简单的（至少不用再去大调邮件中文本的格式了）。PS：正文，正文，仅仅是正文，打印附件的话，下载下来打印就可以了。
使用工具：
qq邮箱，Word文档
1、首先打开你所需要的邮件，随便打开一封邮件，点击下面红色框框里面的展开按钮。


2、点击导出为eml文件


3、下载下来


4、下载过后得到如下类型的文件，右键打开方式，选择Word方式打开，我们便可以看到我们所需要的正文了。




5、下面就是打开Word过后了


6、如上所示Word文档中的格式和邮件中的格式大体一致，只需要微调就可以了，当然，你也可以删除一部分内容保存你想要的内容。
7、在Word中的打印也就很简单了赛，直接Ctrl+P即可解决了。
PS：其实大家可能会注意到，在qq邮件中点击第1步的展开按钮过后，也是有打印选项的。


但是这种方式打印的话只能打印整个内容，而且连收件人发件人也会显示。当然需求不一样，这种方法也是阔以滴。

最近在逛国外各大编程社区论坛的时候，发现很多人都在问一个关于PDF文件打印的问题：打印时如何选择非默认打印机并设置打印页面的范围。而一般情况下，打印时选择的打印机是默认打印机，打印页面范围是所有页面，如果要选择其他打印机或打印部分页面，需要对代码进行一定的设置。我在这里分享一个解决方案，让其他有同样需求的朋友少走点冤枉路。

在这个解决方案中我使用了一个免费的PDF控件，感兴趣的朋友可以在Codeplex官网：https://freepdf.codeplex.com上下载。

下面是该解决方案的详细代码分步解析：

第一步：添加项目引用。

安装控件后，创建一个新的项目，找到控件的安装目录，在项目的“解决方案”窗口右击->添加引用，选择和项目.NET Framework版本对应的dll文件进行添加； 

如下图： 


第二步：使用命名空间。

在该方案中，我使用的命名空间如下：

using Spire.Pdf;
using System.Windows.Forms;
using System.Drawing.Printing;

第三步：创建一个新的PDF文档，并加载待打印的PDF文件。



PdfDocument doc = new PdfDocument();
doc.LoadFromFile("sample.pdf");

如果需要使用默认打印机打印所有页面，请看第四步。如果需要使用其他打印机并设置打印页面范围，请看第五步。

第四步：使用默认打印机打印所有页面。



doc.PrintDocument.Print();

第五步：选择打印机和设置打印页面范围。



PrintDialog dialogPrint = new PrintDialog();
dialogPrint.AllowPrintToFile = true;
dialogPrint.AllowSomePages = true;
dialogPrint.PrinterSettings.MinimumPage = 1;
dialogPrint.PrinterSettings.MaximumPage = doc.Pages.Count;
dialogPrint.PrinterSettings.FromPage = 1;
dialogPrint.PrinterSettings.ToPage = doc.Pages.Count;

if (dialogPrint.ShowDialog() == DialogResult.OK)
    {
        //设置打印的起始页码
        doc.PrintFromPage = dialogPrint.PrinterSettings.FromPage;
        //设置打印的终止页码
        doc.PrintToPage = dialogPrint.PrinterSettings.ToPage;
        //选择打印机
        doc.PrinterName = dialogPrint.PrinterSettings.PrinterName;

        PrintDocument printDoc = doc.PrintDocument;
        dialogPrint.Document = printDoc;
        printDoc.Print();
    }

运行项目，输出的效果图如下（打印机和打印页面范围可以自己选择）：



全部代码如下：



using Spire.Pdf;
using System.Windows.Forms;
using System.Drawing.Printing;

namespace PrintPDF
{
    class Program
    {
        static void Main(string[] args)
        {
            PdfDocument doc = new PdfDocument();
            doc.LoadFromFile("sample.pdf");

            //Use the default printer to print all the pages
            //doc.PrintDocument.Print();

            //Set the printer and select the pages you want to print

            PrintDialog dialogPrint = new PrintDialog();
            dialogPrint.AllowPrintToFile = true;
            dialogPrint.AllowSomePages = true;
            dialogPrint.PrinterSettings.MinimumPage = 1;
            dialogPrint.PrinterSettings.MaximumPage = doc.Pages.Count;
            dialogPrint.PrinterSettings.FromPage = 1;
            dialogPrint.PrinterSettings.ToPage = doc.Pages.Count;

            if (dialogPrint.ShowDialog() == DialogResult.OK)
            {
                doc.PrintFromPage = dialogPrint.PrinterSettings.FromPage;
                doc.PrintToPage = dialogPrint.PrinterSettings.ToPage;
                doc.PrinterName = dialogPrint.PrinterSettings.PrinterName;

                PrintDocument printDoc = doc.PrintDocument;
                dialogPrint.Document = printDoc;
                printDoc.Print();
            }
        }
    }
}

前提条件：用AD打开所需要打印的PCB图纸

第1步：

file---pagesetup,第2部为修改后的内容，具体如下：



 

第2步，哪个层不需要，右击删除即可：第3步：file-print-预览是自己想要的结果就可以打印了