1.界面配置lodop打印控件对象
<script src="${ctx}/js/comm/lodop/LodopFuncs.js"></script>
<object id="LODOP_OB" style="display: none;"
classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0>
<embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0></embed>
<param name="Caption" value="">
<param name="Color" value="blue">
</object>
2.配置要打印的报表
<div id="print_div" style="display: none;">
<jsp:include page="/jsp/dwgl/web/dwgl/dwgl_p.jsp">
</jsp:include>
</div>
3.写JS初始化打印数据
fnInitPrint: function() {
mini.parse();
var printForm = new mini.Form("#printForm");
var params = {'DWSXH':mini.get("DWSXH").getValue()};
CFW.oAJax.doService('dwglService.selectDw', params, '' , function(data) {
var result = JSON.parse(data);
var content = result.data;
var con = JSON.parse(content);
if (result.fhz == '1') {
//设置值
document.getElementById("DWMC1").value="123"; //没有值
document.getElementById("DWMC1").setAttribute("value",con.DWMC); //第二次显示会有值
document.getElementById("XTJGDM1").setAttribute("value", con.XTJGDM);
} else {
mini.alert(result.msg);
}
});
4.打印:调用preview方法预览,直接调用print方法,打印的文档中会有lodop水印
print: function() {
//初始化数据
var LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
if (LODOP == undefined) {
mini.alert('检测到您未安装浏览器打印插件,请先安装插件,然后打印', "", function() {
window.scrollTo(0,0);
});
return;
}
LODOP.PRINT_INIT("单位新增申报表打印");//
LODOP.ADD_PRINT_HTM(20, 30, "90%", "95%",$("#print_div").html());
LODOP.SET_PRINT_STYLEA(0, "FontName", "黑体");
LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
LODOP.PREVIEW();
}
5.打印中遇到问题:
打印之前是一个form表格,表格里面没有数据,打印之前需要根据ID从后台获取数据,然后将值显示在表格上。起初用miniui中的dwForm.setData(o)来设置表格中的值,但是打印的时候没有数据,就以为是miniui与该打印插件冲突,导致无法显示数据;于是改用最普通的document.getElementById("DWMC1").value="123"; //没有值
;来设置表单值,结果还是没有数据显示。
原因:FireFox、Chrome、Opera下innerHTML无法获取到手动填写的文本框中的value值
解决方法:document.getElementById("DWMC1").setAttribute("value",con.DWMC); //第二次显示会有值
在print()函数中调用fnInitPrint()方法,结果仅仅只在第二次进行打印的时候才会显示数值,第一次打印还是会显示空白。
原因:在设置数值之前就已经调用了print()函数,导致fnInitPrint()无效
解决方法:在其他方法中提前调用fnInitPrint()函数
6.绑定函数
bindData:function(){
//搞定 type=text, 同时如果checkbox,radio,select>option的值有变化, 也绑定一下, 这里忽略button
$("input").each(function(){
$(this).attr('value',$(this).val());
});
//搞定 type=checkbox,type=radio 选中状态
$("input[type='checkbox'],input[type='radio']").each(function(){
if($(this).attr('checked'))
$(this).attr('checked',true);
else
$(this).removeAttr('checked');
});
//搞定select选中状态
$("select option").each(function(){
if($(this).attr('selected'))
$(this).attr('selected',true);
else
$(this).removeAttr('selected');
});
//搞定 textarea
$("textarea").each(function(){
$(this).html($(this).val());
});