在B/S應(yīng)用系統(tǒng)開發(fā)中常常遇到表單打印需求，尤其是OA、ERP類的企業(yè)運營管理系統(tǒng)，打印的需求很常見，但WEB應(yīng)用的打印一直以來是一個難題，特別是在應(yīng)用中完成標(biāo)簽打印（如包裹面單、貨運標(biāo)簽等）、票據(jù)打?。ㄈ缌闶坌∑保╇y度較大，其難度在于如何將需要打印的內(nèi)容，精確套打到標(biāo)簽、票據(jù)中，精確控制分頁，并實現(xiàn)高速連續(xù)打印。

對于WEB打印的技術(shù)實現(xiàn)方案以及項目實踐效果進(jìn)行分別介紹，希望對大家有所幫助。

1、web打印技術(shù)方案

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2、項目實踐web打印方案

云程低代碼平臺采用了第二種打印方案，并集成整合了vue-plugin-hiprint打印組件，實現(xiàn)了可視化設(shè)計打印模板，支持各種常見類型的打印需求。

vue-plugin-hiprint提供了Web打印設(shè)計器功能，它是一種在線打印模板設(shè)計工具，具有直觀的用戶界面，使非專業(yè)開發(fā)人員也能輕松創(chuàng)建高質(zhì)量的打印模板，廣泛用于各種應(yīng)用場景，如發(fā)票打印、標(biāo)簽打印、報告生成等。以下是Web打印設(shè)計器的一些關(guān)鍵特點：

（1）模板創(chuàng)建：Web打印設(shè)計器通常提供一系列預(yù)設(shè)的模板，用戶可以直接使用或基于這些模板進(jìn)行修改。用戶還可以從頭開始創(chuàng)建新的打印模板。

（2）組件和元素：Web打印設(shè)計器允許用戶添加各種組件和元素，如文本框、圖像、表格、條形碼等。這些組件和元素可以方便地調(diào)整大小、位置和樣式。

（3）數(shù)據(jù)綁定：Web打印設(shè)計器支持?jǐn)?shù)據(jù)綁定，這意味著用戶可以將數(shù)據(jù)源（如數(shù)據(jù)庫、API等）與模板中的特定組件關(guān)聯(lián)。這樣，當(dāng)數(shù)據(jù)發(fā)生變化時，打印輸出也會相應(yīng)更新。

（4）預(yù)覽和測試：Web打印設(shè)計器通常提供預(yù)覽功能，允許用戶在正式打印之前查看設(shè)計的效果。這有助于確保設(shè)計滿足要求，并進(jìn)行必要的調(diào)整。

打印模板管理：

打印模板在線設(shè)計：

發(fā)票類定位精準(zhǔn)打?。?/p>

在線體驗：http://www.yunchengxc.com文章來源地址http://www.zghlxwxcb.cn/news/detail-772565.html

到了這里，關(guān)于web打印技術(shù)方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！