精华内容

下载资源

问答

我要提问

web打印自动分页

2019-09-25 21:07:42

一个跨平台的web打印插件，自动分页 hiprint 官网 www.hinnn.com

hiprint 是一个web 打印的js组件，无需安装软件。支持移动端，PC端浏览器，angular,vue,react, 等分页预览，打印，操作简单，运行快速。预览界面为css+html 。支持数据分组，批量预览。生产pdf,图片更方便

可以在window,ios,linux 系统浏览器快速运行。

可视化配置模板，自动分页打印。

转载于:https://www.cnblogs.com/thank/p/11022782.html

更多相关内容
JS 实现web分页打印功能
2015-11-09 20:40:27

使用JS的Window对象的Print方法实现兼容性强的分页打印功能，可直接运行，代码直接复制即可用。

收起
Web分页打印 细线表格+分页打印之终极攻略
2020-12-14 01:41:24

最近给客户做打印的时候，客户提出打印时不要打印该页面的头，只是打印表格里面的内容，因为头部有背景和打印按钮，而且要细线表格的那种，我想细线表格不是很简单吗如果你还不知道细线表格怎么做，请看下面的代码...

收起
ASP实现web分页打印及web页面导出Excel文件.pdf
2021-10-04 00:36:14

ASP实现web分页打印及web页面导出Excel文件.pdf

收起
web分页打印
2018-06-19 14:54:00
添加css: page-break-before:always 实现分页 window.print()//实现打印转载于:https://www.cnblogs.com/chenlw/p/9198578.html
添加css: page-break-before:always 实现分页

window.print()//实现打印
转载于:https://www.cnblogs.com/chenlw/p/9198578.html
收起
展开全文
JS分页，WEB分页打印
2012-05-03 09:49:14

实现简单的web打印分页功能，适用于WEB工程的打印预览

收起
web 页面分页打印的实现
2021-01-21 12:39:07

1．首先引入一个WebBrowser在需要打印的页面，可以直接添加：代码如下: <object id=”WebBrowser” classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=”0″ width=”0″> </object> 到页面...

收起
Web Html 分页、表格跨页断裂处理、自定义页眉页脚页码打印控件
2020-10-11 21:50:47

1.Web Html 分页打印 2.内容、图片、表格跨页断裂，封边 3.table并行、并列双边、重边 4.自动计算页码（总数及每一页），样式、位置、形式完全个性化 5.页眉页脚，去除浏览默认，自定义内容、样式、位置 6.保持页脚...

收起
Web页面分页打印小结-简单实现
万次阅读 2016-11-30 14:42:37

最近开发单位内部系统中的档案管理时，档案管理员提出需求，希望在打印档案盒中卷内目录，分页打印，因为目前的打印针对超过一页的档案记录，在第二页中无法显示表头，还会出现表格断开不连续如图：档案...

最近开发单位内部系统中的档案管理时，档案管理员提出需求，希望在打印档案盒中卷内目录，分页打印，因为目前的打印针对超过一页的档案记录，在第二页中无法显

示表头，还会出现表格断开不连续如图：

档案管理员想打印时，系统自动分页并且每页都有表头如图

解决方案就是确定每页记录数，这里设置每页15个记录

经改进：1.增加了分页显示，档案管理员可以根据选项卡，查看或打印该页。

2.在右上角增加【打印全部页】复选框，勾选，则打印所有页，不选只打印当前页。

具体实现：

利用了css page-break-before:always;

注意：不能使用 page-break-after:always;

由系统自动生成每页html代码，每页由<div>块并列组成

每个<div>块，不能被嵌套在其他<div>之中

部分代码如下

<div id="Page1" style="display:block;" class="page_content">

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin:auto;border-collapse: collapse;table-layout:fixed;">

<tbody>



</tbody>

</table>

</div>

<div id="Page2" style="page-break-before:always;display:block;" class="page_content">

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin:auto;border-collapse: collapse;table-layout:fixed;">

<tbody>



</tbody>

</table>

</div>

收起

展开全文
web如何实现页面分页打印
千次阅读 2021-06-25 01:22:38

实现页面分页打印是很多小伙伴们都想知道的，那么你知道web如何实现页面分页打印的具体方法吗？下面就让爱站小编带领大家一起去学习学习吧，希望本文对你有所帮助。1．首先引入一个WebBrowser在需要打印的页面，可以...

实现页面分页打印是很多小伙伴们都想知道的，那么你知道web如何实现页面分页打印的具体方法吗？下面就让爱站小编带领大家一起去学习学习吧，希望本文对你有所帮助。

1．首先引入一个WebBrowser在需要打印的页面，可以直接添加：

?

?

?

到页面，或者使用JavaScript在需要的时候临时添加也可以：

?

?

?

document.body.insertAdjacentHTML("beforeEnd",

"

classid=\"clsid:8856F961-340A-11D0-A96B-00C04FD705A2\">");

2 .页面设置和打印预览

如下所示，直接调用即可

?

?

?

document.all.WebBrowser.ExecWB(6,6) 直接打印

document.all.WebBrowser.ExecWB(8,1) 页面设置

document.all.WebBrowser.ExecWB(7,1) 打印预览

或者：

?

?

?

execScript("document.all.WebBrowser.ExecWB 7, 1","VBScript");

3 隐藏不打印的页面元素和分页

CSS 有个Media 属性，可以分开设置打印和显示的格式。

如中间的格式将只在打印时起作用，不会影响显示界面。

所以可以设定

.Noprint{display:none;}

.PageNext{page-break-after: always;}

然后给不想打印的页面元素添加： class="Noprint" ，那就不会出现在打印和打印预览中了。

想分页的地方添加：

4．打印页面的特定部分

通过将需要打印的特定部分另建一个页面，然后装入主页面的一个IFrame中，再调用IFrame的打印方法，只打印IFrame中的内容实现的。

如：

下面的pringFrame js函数将只打印Iframe中的内容，可以直接引用使用,如printFrame(FrameId);

?

?

?

window.print = printFrame;

// main stuff

function printFrame(frame, onfinish) {

if ( !frame ) frame = window;

function execOnFinish() {

switch ( typeof(onfinish) ) {

case "string": execScript(onfinish); break;

case "function": onfinish();

}

if ( focused && !focused.disabled ) focused.focus();

}

if (( frame.document.readyState !== "complete") &&( !frame.document.confirm("The document to print is not downloaded yet! Continue with printing?") ))

{

execOnFinish();

return;

}

var eventScope = printGetEventScope(frame);

var focused = document.activeElement;

window.printHelper = function() {

execScript("on error resume next: printWB.ExecWB 6, 1", "VBScript");

printFireEvent(frame, eventScope, "onafterprint");

printWB.outerHTML = "";

execOnFinish();

window.printHelper = null;

}

document.body.insertAdjacentHTML("beforeEnd",

"

classid=\"clsid:8856F961-340A-11D0-A96B-00C04FD705A2\">");

printFireEvent(frame, eventScope, "onbeforeprint");

frame.focus();

window.printHelper = printHelper;

setTimeout("window.printHelper()", 0);

}

// helpers

function printIsNativeSupport() {

var agent = window.navigator.userAgent;

var i = agent.indexOf("MSIE ")+5;

return parseInt(agent.substr(i)) >= 5 && agent.indexOf("5.0b1") < 0;

}

function printFireEvent(frame, obj, name) {

var handler = obj[name];

switch ( typeof(handler) ) {

case "string": frame.execScript(handler); break;

case "function": handler();

}

}

function printGetEventScope(frame) {

var frameset = frame.document.all.tags("FRAMESET");

if ( frameset.length ) return frameset[0];

return frame.document.body;

}

Iframe中所装载页面的打印效果在所装载页面设置就可以了，如分页等。

5．后台打印

通过建一个隐藏Iframe实现的，当然仍然会有页面装载的过程。

下面的函数创建Iframe装载页面并打印。如 printHidden(url) //url为页面地址

function printHidden(url) {

document.body.insertAdjacentHTML("beforeEnd",

"");

var doc = printHiddenFrame.document;

doc.open();

doc.write("
");
doc.write("

url + "\">
");
doc.write("");

doc.close();

}

function onprintHiddenFrame() {

function onfinish() {

printHiddenFrame.outerHTML = "";

if ( window.onprintcomplete ) window.onprintcomplete();

}

printFrame(printHiddenFrame.printMe, onfinish);

}

它用到了printFrame，所以别忘了引用前面的函数。

以下为demo:
报表

classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0"

width="0">

.Noprint{display:none;}

.PageNext{page-break-after: always;}

οnclick="document.all.WebBrowser.ExecWB(6,6)">

οnclick="document.all.WebBrowser.ExecWB(8,1)">

οnclick="document.all.WebBrowser.ExecWB(7,1)">

οnclick="printHidden(FrameId)">

1

2

height="30%" src="2.html">

window.print = printFrame;

// main stuff

function printFrame(frame, onfinish) {

if ( !frame ) frame = window;

function execOnFinish() {

switch ( typeof(onfinish) ) {

case "string": execScript(onfinish); break;

case "function": onfinish();

}

if ( focused && !focused.disabled ) focused.focus();

}

if (( frame.document.readyState !== "complete") &&( !frame.document.confirm("The document to print is not downloaded yet! Continue with printing?") ))

{

execOnFinish();

return;

}

var eventScope = printGetEventScope(frame);

var focused = document.activeElement;

window.printHelper = function() {

execScript("on error resume next: printWB.ExecWB 6, 1", "VBScript");

printFireEvent(frame, eventScope, "onafterprint");

printWB.outerHTML = "";

execOnFinish();

window.printHelper = null;

}

document.body.insertAdjacentHTML("beforeEnd",

"

classid=\"clsid:8856F961-340A-11D0-A96B-00C04FD705A2\">");

printFireEvent(frame, eventScope, "onbeforeprint");

frame.focus();

window.printHelper = printHelper;

setTimeout("window.printHelper()", 0);

}

// helpers

function printIsNativeSupport() {

var agent = window.navigator.userAgent;

var i = agent.indexOf("MSIE ")+5;

return parseInt(agent.substr(i)) >= 5 && agent.indexOf("5.0b1") < 0;

}

function printFireEvent(frame, obj, name) {

var handler = obj[name];

switch ( typeof(handler) ) {

case "string": frame.execScript(handler); break;

case "function": handler();

}

}

function printGetEventScope(frame) {

var frameset = frame.document.all.tags("FRAMESET");

if ( frameset.length ) return frameset[0];

return frame.document.body;

}

function printHidden(url) {

document.body.insertAdjacentHTML("beforeEnd",

"");

var doc = printHiddenFrame.document;

doc.open();

doc.write("
");
doc.write("

url + "\">
");
doc.write("");

doc.close();

}

function onprintHiddenFrame() {

function onfinish() {

printHiddenFrame.outerHTML = "";

if ( window.onprintcomplete ) window.onprintcomplete();

}

printFrame(printHiddenFrame.printMe, onfinish);

}

以上就是小编介绍web如何实现页面分页打印的内容，想要学习的朋友们，赶快把这篇内容收入囊中吧!?

原文链接:https://js.aizhan.com/develop/JavaScript/11536.html

如有疑问请与原作者联系

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com

特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

收起

展开全文
WEB分页打印和打印模式的页边距缩放
千次阅读 2017-06-19 11:36:07

WEB的打印模式的页边距缩放。

收起
html打印分页自带表头表尾
2018-05-14 14:15:17

需要自己写打印程序时，会遇到打印分页都需有表头表尾的问题，html打印分页自带表头表尾，可以参考学习下

收起
web打印动态分页生成PDF插件，项目地址.txt
2021-01-25 18:15:47

一个解决web打印，动态多页数据分页困难。及html转pdf的方案。用此插件生成的预览页面，可方便的从浏览器打印PDF，下载PDF 不要下载了，直接参考：https://blog.csdn.net/qq_40995828/article/details/112802426

收起
web前端实现多页打印
2020-11-19 13:46:28

web前端实现打印功能，并且可多页打印

收起
JS 使用 window对象的print方法实现分页打印功能
2021-01-19 20:05:57

最近做项目用到了web在线打印功能，经研究使用了JS自身支持的Window对象的打印方法，此种方法兼容性比较好，在IE和火狐浏览器下使用都没有问题。 1.但是网上好多案例都不支持分页功能，最后通过CSS的page-break-...

收起
web 分页打印控制
千次阅读 2006-09-11 14:11:00

web 打印在很多时候会受到局限，如果不借助外力很难实现分页打印控制，找了一上午的答案，终于找到一个比较好的控制分页打印控制的方法，使用 CSS 的 page-break-after ，其详细使用说明如下：语法： page-break-...

收起

null 脚本 css
超好用的Vue打印插件，可支持分页
2021-01-20 15:57:28

Vue打印插件

收起

vue.js
关于web打印分页的问题
2018-03-14 06:01:07

最近在研究关于web打印的问题，现在的需求就是每一页都有相同的表头，并且自定义页码样式，那么还需要控制中间部分的内容，超出高度就自动到下一页，表格断行，在下一页须得有表头，有没有做过类似研究的，希望...

收起
实现web打印的各种方法介绍及实现代码
2020-09-05 15:46:43

web的打印方法具我自己懂得知道的有：JQuery插件Jqprint实现;JQery打印插件PrintArea实现网页打印;CSS控制网页打印样式,本文详细介绍实现步骤，感兴趣的朋友可以了解下

收起
【java_web】web批量分页打印
2021-03-06 20:16:58

批量打印模板function printOnload(){var count = ;var index;for(i = 0;i < count;i++){index = i + 1;//把iframe的html挪到div上document.getElementById('page' + index).innerHTML= window.frames[0]....

收起
web使用window.print()实现分页批量打印。
2021-06-25 04:46:36

写了有关于web客户端打印物料条码的功能。想着以后可能会用到，就把他给写下来了。主要参考了：https://blog.csdn.net/ww130929/article/details/71977187https://www.jb51.net/article/117782.htm功能描述：打印...

收起
window.print()页面打印之表格内容分页填充进行分页打印
2021-06-25 09:40:34

windwow.print()用于打印当前窗口的内容，很简便，可当内容特殊并且打印有特殊需求的时候就要绕个圈了。下面是需要打印的表格：当数据量少的时候像上面的表格一样，中间的内容只有5条数据，打印出来在纸上会有空白...

收起
web应用分页功能
2022-04-07 23:05:12

web应用分页

收起

java

1 2 3 4 5 ... 20

收藏数 25,975

精华内容 10,390

热门标签

关键字：

web分页打印