web打印小結(jié)
項(xiàng)目中有個(gè)需求是將winform客戶端的打印，移到網(wǎng)頁上由客戶自行打印，打印要求是根據(jù)一定的格式實(shí)現(xiàn)套打。
當(dāng)時(shí)的解決方案是使用PDF打?。?/strong>
1、 準(zhǔn)備好套打格式的底圖；
2、打開底圖，將動(dòng)態(tài)內(nèi)容畫到底圖上；
3、利用第二步修改后的圖片，生成PDF，完成打印
后來發(fā)現(xiàn)一款比較強(qiáng)大的web打印工具lodop,簡單使用說明如下：
1、先檢查下瀏覽器是否安裝此插件：
http://www.lodop.net/demolist/PrintSample1.html
2、建立html，此入口可以打開一個(gè)圖形化編輯頁面，生成結(jié)果圖如下：
<html>
<body>
<object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0></object>
<script>
function myPreview() {
LODOP.PRINT_INIT("測試套打模板");
};
</script>
<a href="javascript:;" onclick="javascript:myPreview();LODOP.PRINT_DESIGN();">進(jìn)入模板設(shè)計(jì)</a>
</body>
</html>
3、我們可以將要套打的單據(jù)做成圖片，導(dǎo)入這個(gè)圖形化界面作為背景圖，然后放入文本框等內(nèi)容，開始測試。
4、完成位置定位后，可以點(diǎn)擊左上角的整體對(duì)準(zhǔn)圖標(biāo)，做統(tǒng)一調(diào)整。
5、去掉背景圖，生成代碼，放入JS代碼段中
LODOP.PRINT_INIT("測試套打模板");
LODOP.ADD_PRINT_TEXT(107,225,338,30,"競買人名稱");
LODOP.SET_PRINT_STYLEA(0,"FontSize",15);
LODOP.ADD_PRINT_TEXT(421,116,209,26,"手機(jī)號(hào)碼");
LODOP.SET_PRINT_STYLEA(0,"FontSize",13);
<html>
<body>
<object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0></object>
<script>
function myPreview() {
LODOP.PRINT_INIT("測試套打模板");
LODOP.ADD_PRINT_TEXT(107,225,338,30,"競買人名稱");
LODOP.SET_PRINT_STYLEA(0,"FontSize",15);
LODOP.ADD_PRINT_TEXT(421,116,209,26,"手機(jī)號(hào)碼");
LODOP.SET_PRINT_STYLEA(0,"FontSize",13);
};
</script>
<a href="javascript:;" onclick="javascript:myPreview();LODOP.PRINT_DESIGN();">進(jìn)入模板設(shè)計(jì)</a>
</body>
</html>
6、JS參數(shù)性質(zhì)的改動(dòng)
總結(jié)：
PDF的難點(diǎn)在于要精確的計(jì)算出需要填充內(nèi)容的位置，調(diào)試比較麻煩，而lodop是圖形化界面，方便我們調(diào)試，并且語法簡單，方便溶于ＪＳ中，此處僅僅簡單列舉了一個(gè)簡單的實(shí)例，更多功能，可參考官網(wǎng)地址：http://www.lodop.net
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
- Web打印解決方案之普通報(bào)表打印功能
- Web打印解決方案之證件套打的實(shí)現(xiàn)思路
- 網(wǎng)頁WEB打印控件制作
- JavaWeb實(shí)現(xiàn)打印功能
- 利用javascript實(shí)現(xiàn)web頁面中指定區(qū)域打印
- js控制web打印(局部打印)方法整理
- web打印 window.print()介紹
- web的各種前端打印方法之jquery打印插件jqprint實(shí)現(xiàn)網(wǎng)頁打印
- web的各種前端打印方法之jquery打印插件PrintArea實(shí)現(xiàn)網(wǎng)頁打印
- web 頁面分頁打印的實(shí)現(xiàn)
相關(guān)文章
js原生代碼實(shí)現(xiàn)輪播圖的實(shí)例講解
下面小編就為大家?guī)硪黄猨s原生代碼實(shí)現(xiàn)輪播圖的實(shí)例講解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介為大家詳細(xì)紹了JavaScript實(shí)現(xiàn)無限輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
本文主要介紹了JavaScript寫的一個(gè)貪吃蛇游戲的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
Javascript保存網(wǎng)頁為圖片借助于html2canvas庫實(shí)現(xiàn)
借助于html2canvas庫，把網(wǎng)頁保存為Canvas畫布，再把生成的canvas保存成圖片，下面的示例，大家可以看看2014-09-09
js中常用的4種模糊查詢?cè)斀?includes()、indexOf()、search()、match())
這篇文章主要給大家介紹了關(guān)于js中常用的4種模糊查詢(includes()、indexOf()、search()、match())的相關(guān)資料,搜索可以使我們更快的找到某一個(gè)關(guān)鍵詞或者某一個(gè)商品,所以模糊查詢和下拉匹配也成了前端必備的一個(gè)小技能,需要的朋友可以參考下2023-11-11
javascript設(shè)計(jì)模式 – 模板方法模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 模板方法模式原理,結(jié)合實(shí)例形式分析了javascript模板方法模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
這篇文章主要介紹了JavaScript反射與依賴注入,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript反射與依賴注入的概念、原理、定義、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-05-05
使用eslint和githooks統(tǒng)一前端風(fēng)格的技巧
這篇文章主要介紹了使用eslint和githooks統(tǒng)一前端風(fēng)格,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-07
這篇文章主要介紹了微信小程序環(huán)境下將文件上傳到OSS的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
JS & JQuery 動(dòng)態(tài)添加 select option
這篇文章主要介紹了JS & JQuery 動(dòng)態(tài)添加 select option 的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,感興趣的朋友一起看下吧2016-06-06