Lodopfuncs.js 网页打印操作

第一步:在官网下载打印控件 下载打印控件
在这里插入图片描述
第二步:打开压缩文件,将这四个文件放到你的项目公共库中,其中压缩包中有很多示例可根据操作来
在这里插入图片描述

这里我用到的是固定大小的网页打印

写一个打印的静态html文件,如果数据需要后台生成,将网页布局写好,给后台生成一个网址,然后放到对应的js中。

1、引用静态文件:
引用js文件
2、引用实例中的方法函数,这里的方法会判断是否已安装打印控件,都会有相应的提示的 ,根据提示来就好了。
这里重点语句是 LODOP.ADD_PRINT_URL(0, 0, "100%", "100%", baseurl + '/admin/bookStocks/print/' + strID);
这个地址是后台生成的
baseurl + '/admin/bookStocks/print/' + strID

其余的是图片打印,这样打印图片会清晰一些,这个官网常见问题中有写到如何输出清晰图片

var LODOP; //声明为全局变量
function PrintOneURL(strID) {
	LODOP = getLodop();
	LODOP.PRINT_INIT("标签打印");
	LODOP.SET_PRINT_PAGESIZE(1,600 ,500, "书本标签");
	LODOP.ADD_PRINT_URL(0, 0, "100%", "100%", baseurl + '/admin/bookStocks/print/' + strID);
	LODOP.ADD_PRINT_IMAGE(4,0,102,30,"<img border='0' src='/static/images/tiaomalogo.png' width=510 height=150 />"); 
	LODOP.SET_PRINT_STYLEA(0,"Stretch",1);
	LODOP.ADD_PRINT_IMAGE(75,110,95,95,"<img border='0' src='/static/images/tiaomaxcx.png' width=860 height=860 />");
	LODOP.SET_PRINT_STYLEA(0,"Stretch",1);//(可变形)扩展缩放模式
	LODOP.PRINT();
};

3、调用方法,勾选获取需要打印的id,点击打印按钮就可以了,可能是多个id,所以就循环了

$(document).on('click','[data-role="print"]',function(){
	var checkbox = [];
	var checkStatus = table.checkStatus('test');
	checkStatus.data.map(function(item, index) {
		PrintOneURL(item.stock_id)
	})
});

重点是参考下载的压缩包,里面很详细。以上就是前端网页打印的步骤流程

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Lodop打印需要的LodopFuncs.js已测试可使用 Lodop是什么? 有人说她是Web打印控件,因为她能打印、在浏览器中以插件的形式出现,用简单一行语句就把整个网页打印出来; 有人说她是打印编程接口,因为她介于浏览器和打印设备之间,是个通道和桥梁,几乎能想到的打印控制事项都能做到; 有人说她是JavaScript的扩展,因为她所有功能就那么几个语句,和JS语法一样,一看就明白个究竟; 有人说她是报表打印工具,因为那个add_print_table语句把报表统计的那点事弄了个明明白白; 有人说她是条码打印工具,因为用了她再也不用后台生成条码图片了,前端一行指令就动态输出清晰准确的条码,一维二维都行; 有人说她是图表打印工具,因为用她能输出几乎能想象的任何图表,虽然没那么豪华,但什么饼图、折线图、柱图甚至复合图等等都不在话下; 有人说她是个小玩意,因为她体积太小了,才2M多,她所包含的其中任何一个对照工具都是她的好几倍(例如条码打印控件、图表控件等); 有人说她是套打教案,因为以Lodop+JS实现套打这种模式,在网上已被吵吵为教科书般的解决方案; 有人说她是Web打印控件的“终结者”,因为接触“她”后再不想别的“她”; 有人说她就是一个Web编程小工具,因为有了她,在BS下的打印终于像cs下那种随意而高效了; 但我们说,她是全国1000多家软件公司的智慧结晶,诞生7年了,几乎每个功能细节都蕴藏着无数开发者的期待和汗水; 她就是Lodop,没有别的名称,她是web开发的必选伴侣...
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值