• 比较好用的web打印控件——Lodop


    前一段时间公司一项目比较特殊,客户要求打印单必须是淘宝上卖的那种三联打印单。如果还是使用原来系统自带的打印的话,就会造成无法打印出来理想的效果,于是找了下相关的打印控件,比较网络上比较流行的几款插件,最终发现,还是Lodop比较好用一些。下面写下它的基本用法。

    1、准备工作,下载控件及官方demo

    下面给出官方的下载地址:http://www.lodop.net/download.html

    2、基本使用

    由于Lodop控件是一个exe程序,所以第一次使用的时候,需要提示用户安装这个控件(控件大小在2M左右),注意Lodop根据操作系统类型不同(X86还是X64),分为install_lodop32.exe 和install_lodop64.exe

    (1)提示用户安装控件

    在页面的head标签内,写下如下代码:

    注意:/ControlPackage/Lodop 这个目录是我自己创建的目录,如果你自己使用,可修改为自己的目录

    function CheckIsInstall() { 
    try { 
    var LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM')); 
    if ((LODOP != null) && (typeof(LODOP.VERSION) != "undefined")) { 
    alert("本机已成功安装过Lodop控件!
     版本号:" + LODOP.VERSION); 
    } 
    } catch (err) { 
    //alert("Error:本机未安装或需要升级!"); 
    } 
    };

    具体调用代码:

    <input type="button" value="检查是否安装打印控件" onclick="JAVASCRIPT: CheckIsInstall()" />

    (2)打印页面内容

    由于我打印的内容是一个form表单下的table表格,所以调用的是ADD_PRINT_TABLE,这个函数,如果大家打印html或者其他可以参考这篇文章——lodop相关参数和讲解。

    注意:打印的内容的样式,一定要直接写在页面上,不要使用css样式

    下面贴出来打印form1表单的table标签内容的js代码。

    var LODOP; //声明为全局变量 
    function prn1_preview() { 
    CreateOneFormPage(); 
    LODOP.PREVIEW(); 
    }; 
    function CreateOneFormPage() { 
    LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM')); 
    LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_表单一"); 
    LODOP.SET_PRINT_STYLE("FontSize", 14); 
    LODOP.SET_PRINT_STYLE("Bold", 1); 
    LODOP.ADD_PRINT_TABLE("5mm", "0mm", "230mm", "140mm", document.getElementById("form1").innerHTML); 
    };

    打印内容:

    <input id="btnPrint2" value="打 印" type="button" onclick="javascript: prn1_preview()" />

  • 相关阅读:
    android中图型的阴影效果(shadow-effect-with-custom-shapes)
    git的经常使用命令
    C# vs Java
    Android-68-Tomcat各种启动错误的解决的方法,如:Exception in thread &quot;Thread-6&quot; NoClassDefFoundError,Document base E:
    Java高级程序猿技术积累
    Floodlight下发流表过程分析
    Maximal Rectangle [leetcode] 的三种思路
    C++实现顺序栈的基本功能
    ZOJ 1654 Place the Robots(最大匹配)
    [2-SAT] poj 3207 Ikki&#39;s Story IV
  • 原文地址:https://www.cnblogs.com/woaic/p/3402580.html
Copyright © 2020-2023  润新知