js调用打印，并且将页面缩放后进行打印，同时可自定义分页打印demo

话不多说，直接上demo，注释备注相当清晰

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>缩放打印与分页</title>
<script type="text/javascript"> function printpage1(){    // body全局打印// 页面缩放，此处缩放为50%，不缩放的话页面超出就打印不出来，这个需要自己调试，看自己document.getElementsByTagName('body')[0].style.zoom=0.5;// 调用window的打印功能window.print(); // 将页面缩放调整到最初状态document.getElementsByTagName('body')[0].style.zoom=1;return false; }function printpage2(){    // 局部打印// 获取局部打印数据var newstr = document.getElementById("println_div").innerHTML;// 缓存body全部数据var oldstr = document.body.innerHTML; // 将局部数据放入body内document.body.innerHTML = newstr; // 页面缩放，此处缩放为50%，不缩放的话页面超出就打印不出来，这个需要自己调试，看自己document.getElementsByTagName('body')[0].style.zoom=0.5;// 调用window的打印功能window.print(); // 打印完成将body数据还回去document.body.innerHTML = oldstr; // 将页面缩放调整到最初状态document.getElementsByTagName('body')[0].style.zoom=1;return false; }
</script>
</head><body>
<p>1</p>
<p>2</p>
<div id="println_div"><h1>打印标题</h1><p>打印内容~~</p><!-- style属性这里是在打印的时候，在标签之前的将作为1页，标签之后作为新的页 --><div style="page-break-before:always;"><br /></div><h1>打印标题</h1><p>打印内容~~</p><div  style="page-break-before:always;"><br /></div><h1>打印标题</h1><p>打印内容~~</p>
</div>
<button type="button" onclick="printpage1()">全局打印</button>
<button type="button" onclick="printpage2()">局部打印</button>
<p>1</p>
<p>2</p>
</body>
</html>

js调用打印，并且将页面缩放后进行打印，同时可自定义分页打印demo相关推荐

vue 打印功能调用原生print，带（去掉页眉页脚）分页打印
安装 vue-print-nb插件 npm install vue-print-nb --save 安装完成后在页面引入 import Print from 'vue-print-nb' </ ...
c-lodop自定义分页打印
方式一: <div style='page-break-after: always;'></div> 今天因为要批量打印,而且好要分页打印,所以为了这个打印分页,我和同事在网上 ...
vue 入口main.js 调用app.vue 入口页面以及触发第三方登陆校验
main.js 代码: // The Vue build version to load with the `import` command // (runtime-only or standalon ...
js window.open()打开的页面关闭后刷新父页面
function test(){ var winObj = window.open(URL); var loop = setInterval(function(){ if(winObj.closed) ...
c# winform 自定义模板 printDocument 自定义分页打印
//按钮事件 PrintPreviewDialog ppvw = new PrintPreviewDialog(); ppvw.PrintPreviewControl.Zoom ...
关于datagrid中控件利用js调用后台方法事件的问题
前台调用后台方法除了用button的click事件,还可以用js调用一.前台页面如图需求点击这个按钮触发后台事件,从而能够调用存储过程 <epoint:HyperLinkColumn He ...
js打印指定html页面（调用浏览器的打印功能）
上代码: <p>这里的所有内容不打印</p> //标签上面的内容不打印<p&g ...
原生JS调用打印预览页面并实现打印文件流图片（亲测有效）
在工作中我们经常会遇到使用浏览器预览打印页面并实现文件打印,那么如何才能够在打印预览页面中显示图片呢?希望看完这篇文章对您有所帮助! 1. 原生JS调用打印预览页面 2. 在打印预览页面加载图片使用 ...
JS调用打印机打印Web页面
第一种方法:指定不打印区域使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 详细如下: <style media=print type="tex ...

js调用打印，并且将页面缩放后进行打印，同时可自定义分页打印demo

话不多说，直接上demo，注释备注相当清晰

js调用打印，并且将页面缩放后进行打印，同时可自定义分页打印demo相关推荐

最新文章

热门文章