打印插件LODOP Vue中的使用

前言

今最近项目中用到了打印，遇到了几个小问题，今天就介绍下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();

遇到的问题

在使用时遇到一个奇葩问题：

在打印设计中插入文本项时左上角会同时生成一个双引号，且在有背景图时才会出现。

解决：原因是我在打印设计前配置了背景图，如下：

eval(LODOP.ADD_PRINT_SETUP_BKIMG('<img border="0" src="' + res.data.waybillOss.url + '">'));

上面配置的img元素的属性值必须使用单引号，造成上面问题的原因就是我使用了双引号

打印插件LODOP Vue中的使用

猜你喜欢