Java Web 整合 Lodop 實現雲端列印功能完整教學

Lodop 簡介

Lodop 是專業級 Web 列印控件，設計目標：簡單易用、功能強大。核心優勢：僅需幾個函數即可完成複雜列印任務，高度抽象瀏覽器差異與列印細節。控件包含 3 個系統檔案（含 32/64 位安裝程式），客戶端需安裝一次即可使用。

整合步驟詳解

1. 資源部署

將下載的 Lodop 資料夾放入專案任意目錄（如 webapp/js/Lodop/），頁面引入核心 JS：

<script src="/js/Lodop/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></embed>
</object>

LodopFuncs.js 內封裝 getLodop() 自動偵測瀏覽器並回傳控件實例。

2. 列印頁面結構

<div id="printArea">
    <!-- 這裡放要列印的業務內容，如表單、表格、報表 -->
    <% include("/offcomplete/view.html"){} %>
</div>

<a href="#" onclick="doPrint()" class="btn btn-default"><i class="fa fa-print"></i> 列印</a>

3. 列印觸發函數

function doPrint() {
    try {
        var LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
        LODOP.PRINT_INIT("業務單據列印");           // 任務名
        LODOP.SET_PRINT_STYLE("FontSize", 18);      // 全域字體
        LODOP.SET_PRINT_STYLE("Bold", 1);           // 粗體
        LODOP.ADD_PRINT_HTM(45, 55, 770, 1004,      // 精確定位：top, left, width, height
            document.getElementById("printArea").innerHTML);
        LODOP.PREVIEW(); // 預覽模式；正式列印用 LODOP.PRINT()
    } catch (e) {
        alert("列印控件異常：" + e.message);
    }
}

關鍵 API 速查

常見坑點與解決

• 客戶端未安裝/版本不符： 非 IE 瀏覽器會彈出安裝提示。建議專案上線前引導使用者完成安裝，或提供下載連結。
• 列印區域截斷/跑版： 用 ADD_PRINT_HTM 時寬高需精確測量；複雜排版建議用 ADD_PRINT_TABLE 或精確座標元素列印。
• HTTPS 站點： 需確保 Lodop 控件支援 SSL，否則混合內容被攔截。
• 瀏覽器相容性： IE 用 ActiveX (classid)，Chrome/Firefox/Edge 用 NPAPI/ActiveX 混合（新版瀏覽器可能需啟用插件支援）。

架構定位：雲列印 vs 傳統列印

傳統列印：資料存於本機/列印機緩衝。雲列印：業務資料上傳至雲端服務，再分發至列印終端。Lodop 屬於「瀏覽器端直連列印機」，非嚴格雲列印，但可搭配後端生成 PDF/圖片再由前端列印，實現「雲端排版、本地輸出」混合模式。

總結

Lodop 以「幾行代碼搞定複雜列印」著稱，適合發票、報表、單據、標籤等精準排版需求。整合關鍵：資源部署正確、HTML 片段乾淨、座標精確、客戶端安裝引導。現代專案亦可評估「後端生成 PDF + 前端 PDF.js 預覽列印」作為無插件替代方案。