关注我们
开发中遇到了一个需求，需要用网页写一个回执单，然后点击打印打印指定区域内容，最后选择了使用jQuery的print.js
1.下载print.js:
jquery_print.js网盘地址：https://wwi.lanzoup.com/iKXt60q66nah 密码:dhm9
2.页面引用：
print.js是jQuery的一个插件，所以在引用print.js之前一定要引用jQuery
示例代码：
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> #首先引用jQuery <script src="__STATIC__/admin/js/query_print.js"></script> #引入print.js
3.使用示例：
1.首先将要打印的区域使用div包裹起来，定义一个ID：
示例代码：
<div id="print_html"> <h1>我是要打印的内容</h1> </div>
2.定义按钮触发点击事件：
示例代码：
<button onclick="print()">打印</button>
3.编写js代码：
示例代码：
<script>
function print(){
$("#print_html").print({
globalStyles: true, //是否使用父文档的样式表
mediaPrint: false, //是否使用含有media="print"的样式表
stylesheet: null, //链接外部样式表
noPrintSelector: ".no-print", //非打印内容选择器
iframe: true, //是否使用一个隐藏的iframe打印
append: null, //后置打印的html
prepend: null, //前置打印的html
manuallyCopyFormValues: true, //打印时是否更新表单数据
deferred: $.Deferred(), //在window.print()调用后reslove一个jQuery.Deferred对象
timeout: 750, //超时时间
title: null,
doctype: '<!doctype html>'
});
}
</script>4.设置纸张横向打印：
默认情况下是纸张是竖向打印的，我们可以添加css属性变成默认横向打印：
示例代码：
<style>
@page {
size: A4 landscape;
margin: 0mm;
}
</style>5.解决打印多空白页的问题：
有的时候会发现我们要打印的区域不足一个打印页，打印预览的时候却多出一个空白页，这是因为我们在页面中设置margin属性造成的，将页面所有的margin属性替换成其他属性就可以解决。