Web打印技術(shù)的實(shí)現(xiàn)方案有多種，以下是其中四種常見的方案：

一、使用瀏覽器的打印功能菜單或windows.print()打印。這是最簡單的方案，不需要對瀏覽器進(jìn)行任何擴(kuò)充。但是，這種方案存在很多問題，包括：

（1）不能準(zhǔn)確對齊邊邊距及打印文字，常常會發(fā)現(xiàn)打印的樣式十分混亂，因?yàn)榇蛴C(jī)采用的是 mm 單位，而不是我們頁面常用的 px，同時有些樣式在打印時也不會生效；

（2）會有頁腳頁眉干擾；

（3）不能精確分頁。瀏覽器一般是根據(jù)用戶設(shè)置的頁面大小，web頁面的內(nèi)容多少，來自行決定分頁位置，程序員很難控制。

（4）不能解決連續(xù)打印。比如，不是僅打印一張票據(jù)，而是連續(xù)一次打印若干個票據(jù)。

二、使用@media print媒體查詢控制打印樣式。因?yàn)榇蛴C(jī)采用的是 mm 單位，而不是我們頁面常用的 px，所以一般我們都需要為打印樣式重新進(jìn)行設(shè)計，這種方法是直接使用瀏覽器打印功能的增強(qiáng)版本。該方案通過在html文檔中，嵌入打印相關(guān)的css樣式，在CSS中，我們可以使用@media print規(guī)則來設(shè)置不同媒體類型下的樣式，來實(shí)現(xiàn)對html文檔輸出打印的控制，比如設(shè)置紙張大小，紙張縱橫方向，打印邊距，分頁等。使用該方案的優(yōu)點(diǎn)是，成本小，不需要下載任何插件，而且跨平臺性非常好。

基于此類技術(shù)實(shí)現(xiàn)的開源組件有：hiprint、vue-plugin-hiprint、vue-print-nb、vue3-print-nb、printThis等。

這種方式實(shí)現(xiàn)打印也有短板：

（1）對頁面開發(fā)要求比較細(xì)節(jié)和繁瑣，需要在控制打印的地方使用好@media print的css樣式，在不同類型的瀏覽器下可能會打印的效果不一樣。

（2）跟使用pdf和office的打印功能相比，打印精準(zhǔn)度上還是有一定差距，不過對于大部分業(yè)務(wù)來說也夠用。

三、 使用瀏覽器插件實(shí)現(xiàn)打印。在瀏覽器中安裝ActiveX控件實(shí)現(xiàn)打印。該方案在IE時代非常流行。這種方案就是下載一個控件，票據(jù)的數(shù)據(jù)不再以html方式呈現(xiàn)，而是呈現(xiàn)在ActiveX中。這種方案的優(yōu)點(diǎn)是打印的精確度高，分頁的可控性好。但缺點(diǎn)也是很明顯的，就是ActiveX控件的只能在IE瀏覽器下使用，在當(dāng)前Firefox, Chrome， Edge成為主流的情況下，其適用范圍大大減少。另外，ActiveX控件需要在每個客戶端安裝維護(hù)，經(jīng)常出現(xiàn)客戶端莫名的問題，跟操作系統(tǒng)和瀏覽器版本都有關(guān)系，運(yùn)維成本也比較高。

四、轉(zhuǎn)化成PDF文檔實(shí)現(xiàn)打印。由于PDF是一種版式文件格式，一旦生成以后在任何地方閱讀打印效果都是一樣的。基于轉(zhuǎn)化PDF實(shí)現(xiàn)打印有前端轉(zhuǎn)化和后端轉(zhuǎn)化兩種方案。

（1）前端轉(zhuǎn)化PDF實(shí)現(xiàn)打印。jsPDF 是一個開源組件，基于 HTML5 的客戶端解決方案，使用瀏覽器純前端技術(shù)用于生成各種用途的 PDF 文檔，這樣就可以把圖片或網(wǎng)頁轉(zhuǎn)化為PDF文件，然后打印PDF文件，進(jìn)而實(shí)現(xiàn)打印需求。

（2）后端轉(zhuǎn)化PDF實(shí)現(xiàn)打印。通過后端的文檔轉(zhuǎn)化組件，把頁面內(nèi)容轉(zhuǎn)化為PDF文檔，下載到前端進(jìn)行打印。專業(yè)的打印產(chǎn)品往往會配有打印設(shè)計器，實(shí)現(xiàn)精準(zhǔn)的打印排版設(shè)計，然后轉(zhuǎn)化成PDF進(jìn)行輸出打印。開源的組件有wkhtmltoPdf、itext等。這種方案的缺點(diǎn)是開發(fā)打印設(shè)計器的成本較高，整體技術(shù)復(fù)雜都較大。

版權(quán)聲明：本文為博主原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接和本聲明。                        

原文鏈接：https://blog.csdn.net/wxz258/article/details/135081590