前言
今最近項目中用到了打印，遇到了幾個小問題，今天就介紹下LODOP的基本使用和我所遇到的問題。
正文
官網：http://www.lodop.net/index.html
首先需要官網下載安裝軟件：進入官網后，在下載中心里面下載：
下載后的產品下載壓縮包中文件如下圖：
其中CLodop_Setup_for_Win32NT.exe和install_lodop64.exe（或install_lodop32.exe）需要安裝，而LodopFuncs.js則引入項目中。
不過在引入LodopFuncs.js之前需要引入JQuery，引入方法網上有很多，但這里要注意，如果你的項目中沒有配置文件webpack.base.conf，可以在main.js中寫入如下代碼:
window.$ = window.jQuery = require('jquery')
打印模板設計
下面代碼中的打印配置代碼可根據需求更改
// 獲取LODOP const lodop = getLodop(); // 此處是為了當編輯過后再次編輯時保留此模板原配置，textareaData是打印模板設計后產生的的代碼 eval(textareaData); // 打印預覽時包含背景圖 eval(LODOP.SET_SHOW_MODE("BKIMG_IN_PREVIEW", true)) // 打印時包含背景圖 eval(LODOP.SET_SHOW_MODE("BKIMG_PRINT", true)) // 設置背景圖片(此處img標簽的屬性值不可使用雙引號包裹,必須使用單引號) eval(LODOP.ADD_PRINT_SETUP_BKIMG("<img border='0' src='" + imgSrc + "'>")) // 顯示打印設計界面，設計完畢關閉窗口后，返回生成的程序代碼 lodop.PRINT_DESIGN(); // 設置打印維護窗口關閉后是否返回程序代碼 lodop.SET_PRINT_MODE("PRINT_SETUP_PROGRAM", true); if (lodop.CVERSION) { CLODOP.On_Return = function(TaskID, Value) { // 返回的代碼 textareaData = Value; }; } // 打印維護 textareaData = lodop.PRINT_SETUP();
打印預覽多頁
// 獲取Lodop const LODOP = getLodop() // 當前頁 let page= 1; // 除第一頁外的其他頁去掉初始化后的代碼 var totalContent = ""; // arr是存儲所有頁數據的數組 for (var i = 0; i < arr.length; i++) { // 每頁的內容 var content = arr[i]; if (content != null && content != "") { if (tr_id > 1) { // 除第一頁，其他頁去掉頁面初始化的方法 content = content.substring(content.indexOf("LODOP.ADD_PRINT"), content.length); if (page == arr.length) { // 最后一頁不需要在添加分頁方法 totalContent += content; } else { totalContent += content + "LODOP.NewPage();"; //強制分頁 } } else { // 第一頁 totalContent += content + "LODOP.NewPage();"; } page++; } } // Lodop傳統模板可以稱為“JS語句組式模板”， 傳統模板需要JS的eval方法來裝載 eval(totalContent); // 打印預覽 LODOP.PREVIEW();
也可以預覽html代碼或網頁
this.LODOP = getLodop() // 獲取Lodop // 方法一：打印預覽html代碼 var strFormHtml="<body>" + this.myValue + "</body>"; LODOP.ADD_PRINT_HTML(0,0,"210mm","297mm",strFormHtml); // 方法二：打印預覽網頁頁面 LODOP.ADD_PRINT_HTML(0,0,"100%","100%","URL:http://www.baidu.com"); this.LODOP.PREVIEW();
遇到的問題
在使用時遇到一個奇葩問題：
在打印設計中插入文本項時左上角會同時生成一個雙引號，且在有背景圖時才會出現。
解決：原因是我在打印設計前配置了背景圖，如下：
eval(LODOP.ADD_PRINT_SETUP_BKIMG('<img border="0" src="' + res.data.waybillOss.url + '">'));
上面配置的img元素的屬性值必須使用單引號，造成上面問題的原因就是我使用了雙引號