2. 程式人生 > >Lodopfuncs.js（列印外掛）使用小記-springboot

Lodopfuncs.js（列印外掛）使用小記-springboot

阿新 • • 發佈：2019-01-15

這兩天研究這列印的js外掛，html上圖：

下載好後，裡面比較重要的就是這幾個檔案，因為他需要一些外掛的支援，所以exe有必要的情況下最好放在你網頁可以下載的地方，然後修改其js的引用路徑，這樣當客戶沒有安裝exe的時候，可以直接在頁面上下載exe來安裝，下載後的html估計都是些列印樣板，具體不深究，這裡只說些用法。

1、專案使用的是sprintboot加上maven管理的，第一步是放置js和其exe檔案。

分別新建兩個資料夾在static資料夾下，一個叫js資料夾，把Lodopfuncs.js放入這個資料夾，一個叫lodop資料夾，把三個exe放入該資料夾，然後記得在application.properties

下寫上靜態對映：

spring.mvc.static-path-pattern=/static/**

2.首頁NewFile-print.html

controller中新增對映

@GetMapping("/indexprint")
    public String indexprint() {
        return "/modelhtml/NewFile-print";
    }

@GetMapping("/testPrint-native")
    public String testPrintNative() {
        return "/modelhtml/purchase-and-sale-contract";
    }

html內容:這裡設定了一個儲存按鈕，因為如果你想要寫在input框裡的內容能列印的話，需要setAttribute賦值才行，直接寫在頁面是無法列印你新寫的東西的

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8"/>
    <title>
    index page
    </title>
    <link rel="stylesheet" type="text/css" th:href="@{/static/js/bootstrap4/css/bootstrap.min.css}"/>
    <script th:src="@{/static/js/LodopFuncs.js}"></script>
    <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width="0" height="0">
    <embed id="LODOP_EM" type="application/x-print-lodop" width="0" height="0" pluginspage="/static/lodop/install_lodop32.exe">
    </embed>
    </object>
</head>
<body>

<div style = "margin-top: 10px; margin-left:10px; argin-buttom:20px">
<input id = "button" type="button" value="點選儲存頁面的內容"  onClick = "testPrintSave()"></input>
<br></br>
<br></br>
<input id = "button6" type="button" value="點選測試列印-非瀏覽器-LodopFuncs.js"  onClick = "print()"></input>
<br></br>
<iframe id ="testIframe" style="text-align:center;margin-left: 10px;margin-top:10px" 
     src = "/testPrint-native" width='900' height='800'></iframe>
</div>
<textarea rows="15"  cols="80" style="display: none;" id="textarea011">
<table border="1" width="360" height="220" style="border-collapse:collapse; border:solid 1px" bordercolor="#000000">
  <tr>
    <td width="100%" height="240">
  
      <font face="隸書" size="5" style="letter-spacing: 10px">郭德強</font>
      <p align="center"><font face="宋體" size="3">科學家</font></p>
      <p align="left"><font face="宋體" size="3">　地址：中國北京社會科學院附近東大街西衚衕</font></p>
      <p align="left"><font face="宋體" size="3">　電話：010-88811888</font></p>
      <br></br>      　
    
    </td>
  </tr>
</table>
</textarea>  
</body>
 <script  type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
 <script type="text/javascript">
/*<![CDATA[ */
var ctxPath = "";
//儲存
function testPrintSave(){
	var htDoc = document.getElementById('testIframe').contentWindow.document;
	var setparam = htDoc.getElementsByClassName("setparam");
	for(var i=0;i<setparam.length;i++){
		setparam[i].setAttribute("value",setparam[i].value);
	}
	alert("儲存成功！");
	/* var c = htDoc.documentElement.outerHTML;
	var printer = document.getElementById("testIframe").contentWindow;
	printer.document.body.innerHTML = c;
	printer.print();
	
	setTimeout(function(){
		var htDoc22 = document.getElementById('testIframe').contentWindow.document;
		console.log("點選列印按鈕後的延時方法執行 ");
		htDoc22.getElementById('restore-listener').click();
	},500); */
}

var LODOP; //宣告為全域性變數   
//頁面下載列印
function print() {
	var htm =document.getElementById("testIframe").value;
	var url1='/testPrint-native';
	var url= '/testPrint';
    $.ajax({
        url: url,
        data: {id: 1},
        success: function (rsData) {
        	LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
        	var missionName = "列印任務名111";
        	var htDoc = document.getElementById('testIframe').contentWindow.document;
        	var printinfo = "";
            printinfo = htDoc.documentElement.outerHTML;
        	alert("任務："+missionName+"-"+printinfo);
        	LODOP.PRINT_INIT(missionName); //首先一個初始化語句 
        	//LODOP.ADD_PRINT_HTM(10,55,"100%","100%",document.getElementById("textarea011").value);
        	LODOP.ADD_PRINT_HTM(0,0,"100%","100%",printinfo);          
        	//LODOP.ADD_PRINT_URL(0,0,"100%","100%",url1);//然後多個ADD語句及SET語句 
        	//LODOP.SET_SHOW_MODE("MESSAGE_PARSING_URL","");//該語句隱藏進度條或修改提示資訊
        	LODOP.PREVIEW();
        	//LODOP.PRINT();                               //最後一個列印(或預覽、維護、設計)語句
            
        }
    });
}

/*]]>*/
</script>
<script th:src="@{/static/js/bootstrap4/js/jquery-1.12.4.js}"></script>
<script th:src="@{/static/js/bootstrap4/js/bootstrap.min.js}"></script>
</html>

3、列印頁面html：這裡在2中可以看到，是在iframe中嵌入了一個html，下面便是那個html

<head>
<meta charset="UTF-8"/>
<style>
p {  text-indent:2em; }
font-test { color:#F00; }
.div-contract { height: 80px;}  
.div-content { }
.inpt{  border:none;border-bottom:1px solid #999;}
.inpt-red { border:none; border-bottom:1px solid #F00}
.noborder  {  border:none; }
.bold { font-weight:bold }
textarea {
    outline: 0 none;
    border:none;
    display: block;
    overflow: hidden;
    width: 100%;
    min-width: 100%;
    max-width:100%;
    min-height: 140px;
    font-size: 14px;
    font: 14px/0.2;
    line-height: 18px;
    padding:2px;
    resize: vertical;
}
</style>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
<div id = "div-body" style = "width:100%;">
<div id = "test-div">
<input id = "restore-listener" type="button" value="點選建立新的監聽" style = "display:none" onClick = "setListener()"></input><br></br>
<h1  align="center">
<input type="text" id ="htname" name="purchaseAndSaleContract" class="inpt setparam"/><span class = "bold"><font color="#FF0000">測試</font></span>
</h1>
<div class = "div-contract" >
<table class = "noborder">
<tr >
<td class = "bold" align="left">測試編號：<input type="text" name="contractCode" class="inpt setparam"/></td>
</tr>
</table>
</div>

<div class = "div-content1" >
<span class = "bold">第一條、測試內容</span>
<br></br>
<p>
1、測試名稱：<input type="text" id="CGMC_if" class="inpt al-left setparam"/>（全稱）
</p>
<p>
2、測試地點：<input type="text" id="GCDD_if" class="inpt al-left setparam"/>
</p>
<p>
3、測試期：從<input type="text" id="GHQKS_if" class="inpt setparam"/>至<input type="text" id="GHQZ_if" class="inpt setparam"/>止。
</p>
<br></br>
<span class = "bold">第二條、測試約定：</span><br></br>
<textarea id = "textarea_id1" style = "min-height: 200px; width:100%;align:center;height:220px">
免職就是上級組織直接解除領導職務，如同炒魷魚；責令辭職就是任免機關認定其已不再適合擔任現職，通過一定程式責令其辭去現任領導職務；引咎辭職則是主動辭去領導職務、自我追究過失責任的一種形式，但如果要求其引咎辭職卻不答應的話，也一樣可以責令其辭職。用形象一點的說法，三者分別類似強制下崗、通知下崗和勸其主動下崗。其中，前兩者為被動接受組織處理，而引咎辭職則是督促其主動承擔責任的行為。
免職就是上級組織直接解除領導職務，如同炒魷魚；責令辭職就是任免機關認定其已不再適合擔任現職，通過一定程式責令其辭去現任領導職務；引咎辭職則是主動辭去領導職務、自我追究過失責任的一種形式，但如果要求其引咎辭職卻不答應的話，也一樣可以責令其辭職。用形象一點的說法，三者分別類似強制下崗、通知下崗和勸其主動下崗。其中，前兩者為被動接受組織處理，而引咎辭職則是督促其主動承擔責任的行為。
</textarea>
</div>
<table border="1" cellpadding="1" cellspacing="0" bordercolor = "#333333" style="width:100%;align:center">
<tr >
<td class = "bold" align="center">測試名稱</td>
<td class = "bold" align="center" >測試規格型號</td>
<td class = "bold" align="center">測試品牌</td>
</tr>

<tr>
<td><input type="text" class = "noborder" value = "測試"/></td>
<td><input type="text" class = "noborder" value = "測試"/></td>
<td><input type="text" class = "noborder" value = "測試"/></td>
</tr>

<tr>
<td><input type="text" class = "noborder" value = "測試"/></td>
<td><input type="text" class = "noborder" value = "測試"/></td>
<td><input type="text" class = "noborder" value = "測試"/></td>
</tr>
<tr>
<td colspan="5" align="left" > 
<textarea id = "textarea_id2" style ="width:100% ; height: 220px">
免職就是上級組織直接解除領導職務，如同炒魷魚；責令辭職就是任免機關認定其已不再適合擔任現職，通過一定程式責令其辭去現任領導職務；引咎辭職則是主動辭去領導職務、自我追究過失責任的一種形式，但如果要求其引咎辭職卻不答應的話，也一樣可以責令其辭職。用形象一點的說法，三者分別類似強制下崗、通知下崗和勸其主動下崗。其中，前兩者為被動接受組織處理，而引咎辭職則是督促其主動承擔責任的行為。
免職就是上級組織直接解除領導職務，如同炒魷魚；責令辭職就是任免機關認定其已不再適合擔任現職，通過一定程式責令其辭去現任領導職務；引咎辭職則是主動辭去領導職務、自我追究過失責任的一種形式，但如果要求其引咎辭職卻不答應的話，也一樣可以責令其辭職。用形象一點的說法，三者分別類似強制下崗、通知下崗和勸其主動下崗。其中，前兩者為被動接受組織處理，而引咎辭職則是督促其主動承擔責任的行為。
</textarea>
</td>
</tr>
<tr>
<td><input type="text" class = "noborder" value = "測試1"/></td>
<td><input type="text" class = "noborder" value = "測試"/></td>
<td><input type="text" class = "noborder" value = "測試"/></td>
</tr>

<tr>
<td><input type="text" class = "noborder" value = "測試2"/></td>
<td><input type="text" class = "noborder" value = "測試"/></td>
<td><input type="text" class = "noborder" value = "測試"/></td>
</tr>
<tr>
<td><input type="text" class = "noborder" value = "測試3"/></td>
<td><input type="text" class = "noborder" value = "測試"/></td>
<td><input type="text" class = "noborder" value = "測試"/></td>
</tr>

<tr>
<td><input type="text" class = "noborder" value = "測試4"/></td>
<td><input type="text" class = "noborder" value = "測試"/></td>
<td><input type="text" class = "noborder" value = "測試"/></td>
</tr>

<tr>
<td><input type="text" class = "noborder" value = "測試5"/></td>
<td><input type="text" class = "noborder" value = "測試"/></td>
<td><input type="text" class = "noborder" value = "測試"/></td>
</tr>

<tr>
<td><input type="text" class = "noborder" value = "測試6"/></td>
<td><input type="text" class = "noborder" value = "測試"/></td>
<td><input type="text" class = "noborder" value = "測試"/></td>
</tr>
<tr>
<td><input type="text" class = "noborder" value = "測試7"/></td>
<td><input type="text" class = "noborder" value = "測試"/></td>
<td><input type="text" class = "noborder" value = "測試"/></td>
</tr>

</table>
</div>
</div>
</body>

4、LodopFuncs.js:最後就是改這個的對映exe地址了，下面是改成了適配我專案路徑的exe（偷懶只顯示要改的地方，別的程式碼照常哦，不要亂刪）,當點選列印按鈕發現沒有安裝exe的時候，出現的連結就可以下載我放在專案上的exe來下載，不需要再自己去搜索下載。

function getLodop(oOBJECT,oEMBED){
    //var strHtmInstall="<br><font color='#FF00FF'>列印控制元件未安裝!點選這裡<a href='install_lodop32.exe' target='_self'>執行安裝</a>,安裝後請重新整理頁面或重新進入。</font>";
    //var strHtmUpdate="<br><font color='#FF00FF'>列印控制元件需要升級!點選這裡<a href='install_lodop32.exe' target='_self'>執行升級</a>,升級後請重新進入。</font>";
	
    var strHtmInstall="<br><font color='#FF00FF'>列印控制元件未安裝!點選這裡<a href='/static/lodop/install_lodop32.exe' target='_self'>執行安裝</a>,安裝後請重新整理頁面或重新進入。</font>";
    var strHtmUpdate="<br><font color='#FF00FF'>列印控制元件需要升級!點選這裡<a href='/static/lodop/install_lodop32.exe' target='_self'>執行升級</a>,升級後請重新進入。</font>";
    var strHtm64_Install="<br><font color='#FF00FF'>列印控制元件未安裝!點選這裡<a href='/static/lodop/install_lodop64.exe' target='_self'>執行安裝</a>,安裝後請重新整理頁面或重新進入。</font>";
    var strHtm64_Update="<br><font color='#FF00FF'>列印控制元件需要升級!點選這裡<a href='/static/lodop/install_lodop64.exe' target='_self'>執行升級</a>,升級後請重新進入。</font>";
    var strHtmFireFox="<br><br><font color='#FF00FF'>（注意：如曾安裝過Lodop舊版附件npActiveXPLugin,請在【工具】->【附加元件】->【擴充套件】中先卸它）</font>";
    var strHtmChrome="<br><br><font color='#FF00FF'>(如果此前正常，僅因瀏覽器升級或重安裝而出問題，需重新執行以上安裝）</font>";
    var strCLodopInstall="<br><font color='#FF00FF'>CLodop雲列印服務(localhost本地)未安裝啟動!點選這裡<a href='/static/lodop/CLodop_Setup_for_Win32NT.exe' target='_self'>執行安裝</a>,安裝後請重新整理頁面。</font>";
    var strCLodopUpdate="<br><font color='#FF00FF'>CLodop雲列印服務需升級!點選這裡<a href='/static/lodop/CLodop_Setup_for_Win32NT.exe' target='_self'>執行升級</a>,升級後請重新整理頁面。</font>";
    var LODOP;
}

5、最後來張列印效果圖：

相關推薦

Lodopfuncs.js（列印外掛）使用小記-springboot

這兩天研究這列印的js外掛，html上圖： 下載好後，裡面比較重要的就是這幾個檔案，因為他需要一些外掛的支援，所以exe有必要的情況下最好放在你網頁可以下載的地方，然後修改其js的引用路徑，這樣當客戶沒有安裝exe的時候，可以直接在頁面上下載exe來安裝，下載後

jQuery 關於ScrollableGridPlugin.js（固定表頭）外掛的逐步解析

1 /*! 2 * This plug-in is developed for ASP.Net GridView control to make the GridView scrollable with Fixed headers. 3 */ 4 (function ($) { 5 /

JS簡單實現檔案上傳（無需外掛）

<span class="up-btn" id="selectFile">請選擇檔案</span> <input type="file" name="fileupload" style="FILTER: alpha(opacity=0); mo

MyEclipse安裝JS程式碼提示（Spket外掛）

近期需要大量使用JS來開發，但是MyEclipse2014自帶的JS編輯器沒有程式碼提示的功能，開發效率有點低，所以安裝了一個Spket的外掛，過程非常簡單，SVN外掛的安裝比這個更簡單。       Spket外掛的安裝：       解壓檔案，然後將解壓後的檔案全

HTML+CSS+JS（面試題）

pagex innerhtml ado 傳值 優缺點 釋放 如何 blog 們的 1、 你做的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麽? IE: trident內核 Firefox：gecko內核 Safari:webkit內核 Opera:以前是presto內核

selenium測試（Java）--執行JS（十八）

val str max dimen inpu umt 測試 import selector 1. 操作滾動條 package com.test.js; import org.openqa.selenium.By; import org.openqa.selenium.

Vue.js（2.x）之計算屬性

眼睛 猜想 官網文檔 data ctype 小結 isp def 直接 昨天看完大神的文章後，深感慚愧，硬著頭皮繼續看官網文檔，然而這真的沒是沒辦法，介紹的實在有些敷衍： 1）、計算屬性:也不說下computed是計算屬性關鍵詞，vm實例是可以像代理data一樣代理comp

算法筆記--快讀（輸入外掛）模板

nbsp return getch logs getchar() 算法 turn 外掛 amp inline int read(){ int s=0,w=1; char ch=getchar(); while(ch<=‘0‘||

企業級 SpringBoot 教程 （十四）在springboot中用redis實現消息隊列

listen idea rom ont sage 入口 adapter html ada 準備階段 java 1.8 maven 3.0 idea 環境依賴 創建一個新的springboot工程，在其pom文件,加入spring-boot-starter-data-re

Activiti工作流引擎學習及流程設計器的安裝（Eclipse外掛）

工作流簡介     我們先來描述一個在工作中經常用到的一個流程:請假     員工張三請假一天 主管王五批准     員工李四請假一天 主管王五不批准  &nbs

Spring Boot （測試篇）：SpringBoot 測試

SpringBoot 測試 測試是對於一個CodeMonkey來說很重要的，也是必須要掌握的一項技能，凡事自測。 在pom.xml加入相關依賴 引入SpringBoot Test，這個預設新建 SpringBoot 專案就會自帶jar包。 編寫測試類 專案啟動

手風琴實現效果js（flex版本）

<!DOCTYPE html> <html> <head>     <title>js實現手風琴效果</title>     <meta charset="utf-8">

table合併單元格（Jquery 外掛）

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

d3.js（v5.7）的node與資料匹配（自動匹配擴充套件函式）

在d3操作時，當然少不了對已有節點繫結資料，那麼問題就來了，節點個數和資料長度不一樣的，怎麼辦。 d3在節點少於資料長度的時候，有enter().appen()方法實現node的增加； 在節點大於資料長度的時候，有exit().remove()實現對多餘節點的刪除； 但是，操作是這樣的：

d3.js（v5.7）的node與數據匹配（自動匹配擴展函數）

輸出 Edito title src img 數據 直接 增加 無奈 在d3操作時，當然少不了對已有節點綁定數據，那麽問題就來了，節點個數和數據長度不一樣的，怎麽辦。 d3在節點少於數據長度的時候，有enter().appen()方法實現node的增加；

d3.js（v5.7）完整地畫一個柱狀圖

img edi http 代碼 坐標 不能 畫布 分享 ueditor 一、首先定義畫布大小以及繪畫區域的位置（總不能頂著屏幕邊沿畫吧） 代碼： 圖示： 二、橫、縱向坐標軸 代碼： 圖示：

d3.js（v5.7）力導向圖（關係圖譜）

先上圖，後面再一一解釋： ok，為了方便理解，這裡我就沒有用之前封裝的automatch函式來將資料和節點匹配了，如果你對enter(),exit()函式還不是很理解的話，請移步至我之前寫的《node與資料匹配》（automatch函式） 那麼接下來： 一、宣告全域性變數 因為力導向圖，涉及到眾多

d3.js（v5.7）樹狀圖

edi 博客 總結 adf 報錯 控制臺 擴展 數據處理 分享 一、新建畫布 二、數據處理 三、繪制連接線 圖示： 四、

jQuery 關於ScrollableGridPlugin.js（固定表頭）插件的逐步解析

spec color jquer idp table javascrip setw 存在 plugin 1 /*! 2 * This plug-in is developed for ASP.Net GridView control to make the GridV

paging.js（基於jQuery）

(function($){     //default properties.     var a=/a/i,defs={         item:'a',next:'&gt;{5}',prev:'{4}&lt;',format:'{0}',