LODOP实现打印

主要函数:

●	PRINT_INIT(strPrintTaskName)打印初始化
●	SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)设定纸张大小
●	ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本项
●	ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加纯文本项
●	ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)增加表格项
●	ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor)画图形
●	SET_PRINT_STYLE(strStyleName, varStyleValue)设置对象风格
●	PREVIEW打印预览
●	PRINT直接打印
●	PRINT_SETUP打印维护
●	PRINT_DESIGN打印设计

名片打印示例:

1、画一个名片大小的矩形边框:
LODOP.ADD_PRINT_RECT(10,55,360,220,0,1);
边框离纸张顶端10px(px是绝对值长度,等于1/96英寸,下同)距左边55px、宽360px、高220px、
框为实线(0-实线 1-破折线 2-点线 3-点划线 4-双点划线)、线宽为1px
2、设置基本打印风格:
LODOP.SET_PRINT_STYLE("FontSize",11);
"FontSize"是系统关键字,表示设置字体大小,11是字体大小值,单位是pt。
  
3、在矩形框内打印姓名栏:
LODOP.ADD_PRINT_TEXT(20,180,100,25,"郭德强");
姓名栏离纸张顶端20px、距左边180px、宽100px、高25px、内容为“郭德强”
  
4、设置姓名栏的打印风格:
LODOP.SET_PRINT_STYLEA(2,"FontName","隶书");
LODOP.SET_PRINT_STYLEA(2,"FontSize",15);
2是姓名栏的增加顺序号,"FontName"和"FontSize"是系统关键字,表示设置字体名和字体大小。
"隶书"是字体名值,同操作系统的字体名,15是字体大小值,单位是pt。
序号设0表示最新对象,注意SET_PRINT_STYLEA与SET_PRINT_STYLE的区别。
5、下面打印其职务、地址、电话等(用基本风格):
LODOP.ADD_PRINT_TEXT(53,187,75,20,"科学家");
LODOP.ADD_PRINT_TEXT(100,131,272,20,"地址:中国北京社会科学院附近东大街西胡同");
LODOP.ADD_PRINT_TEXT(138,132,166,20,"电话:010-88811888");
 
6、在发送以上指令前,一般要初始化并设置打印任务名:
LODOP.PRINT_INIT("打印插件功能演示_代码功能_名片");



页面打印示例:

HEAD:

<g:javascript src="zat/LodopFuncs.js"/>
    <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="install_lodop.exe"></embed>
    </object>

WEB前台:

<input type="button" value="预览" οnclick="printlnRecord(${checkingRecordDetail.id});LODOP.PREVIEW()"/>
<input type="button" value="打印" οnclick="printlnRecord(${checkingRecordDetail.id});LODOP.PRINT()"/>

JS:

function printlnRecord(id) {
            LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
            LODOP.PRINT_INIT("");
            LODOP.SET_PRINT_STYLEA(0, "Horient", 2);
            LODOP.ADD_PRINT_HTM(100, 40, "90%", "80%", document.getElementById(id).value);
        }

官方DEMO: 点击打开链接



2015-06-12补充:

保留原表单样式

WEB前台:

<div id="printForm">
        <table>
             .............
        </table>
</div>  
<input type="button" value="打印" οnclick="printlnPaper(${bridgePatrol?.id}); LODOP.PRINT();"/>

样式:

<style id="printStyle" type="text/css">
    .div-content {
        border: 1px solid #87ceeb;
        background-color: white;
        padding: 10px;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    table tr {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    table {
        background-color: #e1e1e1;
        border-collapse: collapse;
    }

    td {
        padding: 10px;
        background-color: white;
        border: 1px solid #87ceeb;
    }

    td textarea {
        font-size: 12px;
    }
</style>

JS:

function printlnPaper(id) {
        var strBodyStyle = "<style>" + document.getElementById("printStyle").innerHTML + "</style>";
        var form1Str = strBodyStyle + document.getElementById("printForm").innerHTML;
        LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
        LODOP.ADD_PRINT_TEXT(20, 50, 260, 39, "桥梁巡查信息表单:");
        LODOP.ADD_PRINT_HTM(40, 40, "90%", "100%", form1Str);
}



  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue中实现多页打印,你可以使用Lodop插件。Lodop是一个用于浏览器打印的第三方插件,可以提供丰富的打印功能。 以下是在Vue中使用Lodop实现多页打印的基本步骤: 1. 首先,你需要从Lodop官网下载Lodop插件并进行安装。 2. 在Vue项目中引入Lodop插件。你可以在`public/index.html`文件中添加以下代码: ```html <script src="http://localhost:8000/CLodopfuncs.js"></script> ``` 这里的`http://localhost:8000/CLodopfuncs.js`是Lodop插件的访问路径,请根据你的实际情况进行修改。 3. 在Vue组件中,你可以使用`this.$nextTick()`来确保Lodop插件已经加载完毕,然后在回调函数中进行打印操作。 例如,假设你有一个名为`printMultiPage`的方法来处理多页打印: ```javascript methods: { printMultiPage() { this.$nextTick(() => { // 使用Lodop插件进行打印操作 LODOP.PRINT_INIT("多页打印"); LODOP.SET_PRINT_PAGESIZE(1, 'A4', 0, 0); // 循环添加需要打印的内容,可以根据需要进行调整 for (let i = 0; i < 3; i++) { LODOP.NewPage(); LODOP.ADD_PRINT_TEXT(50, 50, 200, 30, `第 ${i+1} 页内容`); } LODOP.PREVIEW(); // 预览打印 // 可以使用其他方法进行打印,如LODOP.PRINT()直接打印等 }); } } ``` 4. 在Vue模板中添加一个触发多页打印的元素,例如一个按钮: ```html <button @click="printMultiPage">多页打印</button> ``` 现在,当用户点击"多页打印"按钮时,Lodop插件会根据你的设置进行多页打印操作。 请注意,以上代码仅为示例,你需要根据自己的需求进行适当的调整和修改。确保Lodop插件已正确安装和引入,并且在使用时可以根据实际情况设置打印内容和样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值