分享乙個無水印的web列印元件

2021-09-01 19:47:11 字數 1401 閱讀 6028

**張善友大牛的部落格

應用web化,不論對開發商,還是對使用者來說,實在是一種很經濟的選擇,因為基於web的應用,客戶端的規則很簡單,容易學習,容易維護,容易發布。但對程式設計師來說,因為瀏覽器的侷限性,卻要面對很多挑戰。怎麼樣來進行基於web的套打,就是這麼乙個令多數程式設計師頭痛不已的問題。

基於web的套打,難度在於要將瀏覽器中呈現的html,精確地列印到票據中,而且能夠實現對分頁位置的控制。下面就ie瀏覽器所能採用的套打解決方案,來個彙總分析,希望對大家有所幫助。

jatoolsprinter 是一款實現網頁套打的免費工具。該工具的特點是可以直接對web頁面進行精確的分頁列印,這不僅使「會設計網頁就會做網頁套打」成為可能,也使專案經理們擺脫了預算緊張的壓力。jatoolsprinter通過在網頁中嵌入控制項,解決了web客戶端精確列印,批量列印,列印配置自動保留等問題。jatoolsprinter 官方正式免費版,支援ie6+,

功能特點: 

真正免費,不加水印,沒有ip或網域名稱限制,不限時間,相容ie6+ 

提供經過微軟數字簽名的cab自動安裝包,安裝更方便 

長期公升級保障,免費論壇支援,讓你無後顧之憂 

穩定可靠,啟動速度遠勝同類產品 

常用功能集於一身,簡約而不簡單,軟體大小只有84k

本文主要介紹jatoolsprinter列印控制項來完成web的列印功能,這個控制項已經把列印功能封裝的非常好,主要是把這個控制項引入,之後寫一些簡單的js**就能完成相應的列印功能。

主要分幾個步驟:

一、引入列印控制項jatoolsprinter

二、給要列印的div取id名

三、編寫js**實現列印div的功能

(注意:在同一頁面中,有多個可列印文件,他們可以用page_div_prefix屬性來區別page_div_prefix字首+page+頁序號 構成可列印div的id,如字首為 'report1' ,則找到以 'report1page1'為id的div作為文件首頁該屬性,預設值為空)

注意事項:

1. 控制項在列印指定div物件時,如果紙張太小不夠列印時,超出部分將被截掉(clip)。 

2. 被指定的div中的內容,可以是html任何可見物件,,flash,或文字等等。 

3. 控制項列印時,邊距可設,不設則取印表機預設值。 

4. div的id必須連續,如果你的div,存在 'page1'、'page2'、'page4',而不存在'page3',則控制項只列印前兩頁,'page4'不會被列印。 

5. div物件在頁面中的位置,可以是隨意的,比如,page1顯示在page2後面,也是合法的。 

6. 指定的div會被列印,沒被指定的html元素將不會被列印,比如,本示例中的『列印』按鈕,不會被列印。 

自己封裝的乙個JS分享元件

因為工作的需求之前也封裝過乙個js分享外掛程式,整合了我們公司常用的幾個分享平台。但是總感覺之前的結構上很不理想,樣式,行為揉成一起,心裡想的做的完美,實際上總是很多的偏差,所以這次我對其進行了改版。這次的核心就是 js只負責事件 結構,也就是把功能實現出來,具體的外觀樣式,則使用者自己進行定義。以...

分享乙個通用web安裝頁面

我們做好的web系統,特別是涉及到資料庫的,可能都需要乙個資料庫的配置過程,如果涉及到一些複雜的系統,可能還需要更加麻煩的配置才能使我們的系統正常執行,這一切對於熟悉系統的it人員來說並不複雜,但是如果我們做的是產品,需要普通使用者或者技術能力不強的使用者來做這樣的工作可能就比較困難,那麼我們能否像...

乙個新的web元件開發形式開啟

在專案開發時有沒有碰到這個問題,vue元件已經成型,但是新專案變更技術棧,要用react去寫,一些公共的元件之前已經用vue編寫好,用在react上多少都要有一些修改才能移植過去,難道就沒有乙個寫一次,在各個環境都都可以用的方案?接上篇文章 my timer 乙個webcomponent 歷經2個多...