web打印技術(shù)方案
當(dāng)前位置:點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
Web打印技術(shù)的實(shí)現(xiàn)方案有多種,以下是其中四種常見的方案: 一、使用瀏覽器的打印功能菜單或windows.print()打印。這是最簡(jiǎn)單的方案,不需要對(duì)瀏覽器進(jìn)行任何擴(kuò)充。但是,這種方案存在很多問題,包括: (1)不能準(zhǔn)確對(duì)齊邊邊距及打印文字,常常會(huì)發(fā)現(xiàn)打印的樣式十分混亂,因?yàn)榇蛴C(jī)采用的是 mm 單位,而不是我們頁(yè)面常用的 px,同時(shí)有些樣式在打印時(shí)也不會(huì)生效; (2)會(huì)有頁(yè)腳頁(yè)眉干擾; (3)不能精確分頁(yè)。瀏覽器一般是根據(jù)用戶設(shè)置的頁(yè)面大小,web頁(yè)面的內(nèi)容多少,來自行決定分頁(yè)位置,程序員很難控制。 (4)不能解決連續(xù)打印。比如,不是僅打印一張票據(jù),而是連續(xù)一次打印若干個(gè)票據(jù)。 二、使用@media print媒體查詢控制打印樣式。因?yàn)榇蛴C(jī)采用的是 mm 單位,而不是我們頁(yè)面常用的 px,所以一般我們都需要為打印樣式重新進(jìn)行設(shè)計(jì),這種方法是直接使用瀏覽器打印功能的增強(qiáng)版本。該方案通過在html文檔中,嵌入打印相關(guān)的css樣式,在CSS中,我們可以使用@media print規(guī)則來設(shè)置不同媒體類型下的樣式,來實(shí)現(xiàn)對(duì)html文檔輸出打印的控制,比如設(shè)置紙張大小,紙張縱橫方向,打印邊距,分頁(yè)等。使用該方案的優(yōu)點(diǎn)是,成本小,不需要下載任何插件,而且跨平臺(tái)性非常好。 基于此類技術(shù)實(shí)現(xiàn)的開源組件有:hiprint、vue-plugin-hiprint、vue-print-nb、vue3-print-nb、printThis等。 這種方式實(shí)現(xiàn)打印也有短板: (1)對(duì)頁(yè)面開發(fā)要求比較細(xì)節(jié)和繁瑣,需要在控制打印的地方使用好@media print的css樣式,在不同類型的瀏覽器下可能會(huì)打印的效果不一樣。 (2)跟使用pdf和office的打印功能相比,打印精準(zhǔn)度上還是有一定差距,不過對(duì)于大部分業(yè)務(wù)來說也夠用。 三、 使用瀏覽器插件實(shí)現(xiàn)打印。在瀏覽器中安裝ActiveX控件實(shí)現(xiàn)打印。該方案在IE時(shí)代非常流行。這種方案就是下載一個(gè)控件,票據(jù)的數(shù)據(jù)不再以html方式呈現(xiàn),而是呈現(xiàn)在ActiveX中。這種方案的優(yōu)點(diǎn)是打印的精確度高,分頁(yè)的可控性好。但缺點(diǎn)也是很明顯的,就是ActiveX控件的只能在IE瀏覽器下使用,在當(dāng)前Firefox, Chrome, Edge成為主流的情況下,其適用范圍大大減少。另外,ActiveX控件需要在每個(gè)客戶端安裝維護(hù),經(jīng)常出現(xiàn)客戶端莫名的問題,跟操作系統(tǒng)和瀏覽器版本都有關(guān)系,運(yùn)維成本也比較高。 四、轉(zhuǎn)化成PDF文檔實(shí)現(xiàn)打印。由于PDF是一種版式文件格式,一旦生成以后在任何地方閱讀打印效果都是一樣的?;谵D(zhuǎn)化PDF實(shí)現(xiàn)打印有前端轉(zhuǎn)化和后端轉(zhuǎn)化兩種方案。 (1)前端轉(zhuǎn)化PDF實(shí)現(xiàn)打印。jsPDF 是一個(gè)開源組件,基于 HTML5 的客戶端解決方案,使用瀏覽器純前端技術(shù)用于生成各種用途的 PDF 文檔,這樣就可以把圖片或網(wǎng)頁(yè)轉(zhuǎn)化為PDF文件,然后打印PDF文件,進(jìn)而實(shí)現(xiàn)打印需求。 (2)后端轉(zhuǎn)化PDF實(shí)現(xiàn)打印。通過后端的文檔轉(zhuǎn)化組件,把頁(yè)面內(nèi)容轉(zhuǎn)化為PDF文檔,下載到前端進(jìn)行打印。專業(yè)的打印產(chǎn)品往往會(huì)配有打印設(shè)計(jì)器,實(shí)現(xiàn)精準(zhǔn)的打印排版設(shè)計(jì),然后轉(zhuǎn)化成PDF進(jìn)行輸出打印。開源的組件有wkhtmltoPdf、itext等。這種方案的缺點(diǎn)是開發(fā)打印設(shè)計(jì)器的成本較高,整體技術(shù)復(fù)雜都較大。 版權(quán)聲明:本文為博主原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接和本聲明。 原文鏈接:https://blog.csdn.net/wxz258/article/details/135081590 該文章在 2024/1/27 11:46:13 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |