2. 程式人生 > >web 頁面分頁列印的實現

web 頁面分頁列印的實現

阿新 • • 發佈：2019-02-02

1．首先引入一個WebBrowser在需要列印的頁面，可以直接新增：

程式碼如下:

<object id="WebBrowser" classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" width="0"> 
</object>

到頁面，或者使用JavaScript在需要的時候臨時新增也可以：

程式碼如下:

document.body.insertAdjacentHTML("beforeEnd", 
"<object id=\"WebBrowser\" width=0 height=0 \ 
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 屬性，可以分開設定列印和顯示的格式。
如 <style media="print" type="text/css"> …</style> 中間的格式將只在列印時起作用，不會影響顯示介面。
所以可以設定
<style media="print" type="text/css">
.Noprint{display:none;}
.PageNext{page-break-after: always;}
</style>
然後給不想列印的頁面元素新增： class="Noprint" ，那就不會出現在列印和列印預覽中了。
想分頁的地方新增： <div class="PageNext"></div> 就可以了。
4．列印頁面的特定部分

通過將需要列印的特定部分另建一個頁面，然後裝入主頁面的一個IFrame中，再呼叫IFrame的列印方法，只打印IFrame中的內容實現的。
如：
<iframe style="visibility: visible" name="FrameId" width="100%" height="30%" src="NeedPrintedPage.asp"></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", 
"<object id=\"printWB\" width=0 height=0 \ 
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", 
"<iframe name=printHiddenFrame width=0 height=0></iframe>"); 
var doc = printHiddenFrame.document; 
doc.open(); 
doc.write("<body onload=\"parent.onprintHiddenFrame()\">"); 
doc.write("<iframe name=printMe width=0 height=0 src=\"" + 
url + "\"></iframe>"); 
doc.write("</body>"); 
doc.close(); 
} 
function onprintHiddenFrame() { 
function onfinish() { 
printHiddenFrame.outerHTML = ""; 
if ( window.onprintcomplete ) window.onprintcomplete(); 
} 
printFrame(printHiddenFrame.printMe, onfinish); 
} 
它用到了printFrame，所以別忘了引用前面的函式。 
以下為demo: 
<html> 
<head> 
<title>報表</title> 
<object id="WebBrowser" 
classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" 
width="0"> 
</object> 
<style media="print" type="text/css"> 
.Noprint{display:none;} 
.PageNext{page-break-after: always;} 
</style> 
</head> 
<body> 
<div class="Noprint"> 
<input type="button" value="print" 
onclick="document.all.WebBrowser.ExecWB(6,6)"> 
<input type="button" value="printset" 
onclick="document.all.WebBrowser.ExecWB(8,1)"> 
<input type="button" value="view" 
onclick="document.all.WebBrowser.ExecWB(7,1)"> 
<input type="button" value="frame" 
onclick="printHidden(FrameId)"> 
</div> 
<div class="PageNext"> 
1 
</div> 
<div class="PageNext"> 
2 
</div> 
<iframe style="visibility: visible" diplay="none"name="FrameId" width="100%" 
height="30%" src="2.html"></iframe> 
</body> 
</html> 
<script type="text/javascript"> 
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", 
"<object id=\"printWB\" width=0 height=0 \ 
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", 
"<iframe name=printHiddenFrame width=0 height=0></iframe>"); 
var doc = printHiddenFrame.document; 
doc.open(); 
doc.write("<body onload=\"parent.onprintHiddenFrame()\">"); 
doc.write("<iframe name=printMe width=0 height=0 src=\"" + 
url + "\"></iframe>"); 
doc.write("</body>"); 
doc.close(); 
} 
function onprintHiddenFrame() { 
function onfinish() { 
printHiddenFrame.outerHTML = ""; 
if ( window.onprintcomplete ) window.onprintcomplete(); 
} 
printFrame(printHiddenFrame.printMe, onfinish); 
} 
</script>


相關推薦

web 頁面分頁列印的實現

1．首先引入一個WebBrowser在需要列印的頁面，可以直接新增： 程式碼如下: <object id="WebBrowser" classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" width

使用page-break-after:always實現頁面分頁列印

最近碰到一個需求，需要前端將在一個頁面內呼叫瀏覽器的window.print()方法，列印當前頁面。但是呢，需要將三個DIV分頁列印： <div style="height:290mm">我是封面</div> <div sty

【Web】分頁簡單實現

web分頁 為什麼需要分頁？ 一、資料方面的原因 大量查詢的資料耗時比較嚴重。 二、增強使用者使用體驗需求 使用者更方便的查詢和展示他所需要的資料。 常見分頁方式：傳統分頁方式和下拉式分頁方式。 採用傳統的分頁方式，可以明確的獲取資料資訊，如有多少條資料，分多少頁顯示。

web頁面列印 支援分頁列印

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><%...@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%><%...@ taglib uri

java web jasperreport+ireport 實現多記錄自動分頁列印

建立一個printByJasperDemo.jsp，程式碼如下： <%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <%@ pagei

java分頁的實現（後臺工具類和前臺jsp頁面）

cal else static pre cti per servle reac tint 1、首先，新建一個類Page.java 1 public class Page implements Serializable { 2 private static fi

window.print()頁面列印之表格內容分頁填充進行分頁列印

   windwow.print()用於列印當前視窗的內容，很簡便，可當內容特殊並且列印有特殊需求的時候就要繞個圈了。下面是需要列印的表格：     當資料量少的時候像上面的表格一樣，中間的內容只有5條資料，打印出來在紙上會有空白，不太好。中間內

實現Java Web專案分頁功能

接觸Java技術以來，專案中實現分頁功能一直以來是一大糾結點。近日終歸算是下定決心研究一下其中的原理了嘍~~~ 本次主要研究分頁功能實現原理，所以沒有使用任何框架技術，通過簡單的Servlet、jsp連線MySQL資料庫來實現。 一、準備工作： 1. 在MySQL資料庫中建立資料表，並新增

Java Web分頁顯示實現思路

實現效果 一.需求描述 從資料庫中將所有資料查詢出來，分頁顯示在前端頁面上，每頁顯示若干條資料，並實現"首頁"，"上一頁"，"下一頁"，"尾頁"，"跳轉至指定頁碼"，"顯示當前頁碼"等功能   二.實現思路  我的思路是將當前頁碼的值作為引數傳給servlet

Mybatis+AngularJS +pagination.js分頁元件實現頁面分頁

前提條件： 搭建好SSM框架，或者其他框架 一、建立分頁結果類 public class PageResult implements Serializable{ private long total;//總記錄數 private List rows;//當前頁結果

HTML網頁列印實現分頁列印功能

<html> <head> <title>頁面列印</title> <!--media=print 這個屬性在列印時有效 有些不想打印出來的分頁列印的都可以應用這類樣式進行控制 在非列印時是無效的(可從列印預覽

JS 使用 window物件的print方法實現分頁列印

最近做專案用到了web線上列印功能，經研究使用了JS自身支援的Window物件的列印方法，此種方法相容性比較好，在IE和火狐瀏覽器下使用都沒有問題。但是網上好多案例都不支援分頁功能，最後通過CSS的page-break-after:always樣式解決分頁問題，以下程式碼純

java後臺如何實現頁面分頁功能

          在做購物平臺或者考試系統等資料量很多的開發專案時，分頁是個必不可少的功能。分頁也有很多種實現方法，如何才能做到又簡單，又不佔用太多資源的分頁功能呢？最近，本人在編寫購物平臺時用到的分頁實現自認為還不錯，適合初學者借鑑。好，閒話不多說，上程式碼： 先建立一

javaWeb(十五）頁面模型的抽取，實現頁面分頁（Servlet+JSP)

頁面分頁好像挺煩的，涉及到分頁模型的抽取，在此做個記錄，簡單的分頁實現 頁面分頁就是在前端分頁顯示資料庫的資料，基本思路就是將分頁需要顯示的幾個要素放到分頁模型裡面，然後在前端顯示 步驟如下： 分頁取資料的SQL語句 //從2開始，選五個資料，即3，4，5

基於Metronic的Bootstrap開發框架經驗總結（9）--實現Web頁面內容的列印預覽和儲存操作

在前面介紹了很多篇相關的《Bootstrap開發框架》的系列文章，這些內容基本上覆蓋到了我這個Bootstrap框架的各個主要方面的內容，總體來說基本達到了一個穩定的狀態，隨著時間的推移可以會引入一些更好更新的內容進行完善，本篇繼續這個系列，主要介紹如何實現Web頁面內容的列印預覽和儲存操作。 1、Web頁

【轉載】實現SmartForms的分頁列印

1.建立SmartForms程式 表格屬性與介面不在這裡設定，因為傳輸資料通過記憶體地址來傳輸，不需要建立結構。直接定義全域性變數：   wa_blanks type typ_items_row     "空白行工作區   ig_blanks type typ_i

Web分頁列印：細線表格+分頁列印之終極攻略

最近給客戶做列印的時候，客戶提出列印時不要列印該頁面的頭，只是打印表格里面的內容，因為頭部有背景和列印按鈕，而且要細線表格的那種，我想細線表格不是很簡單嗎 如果你還不知道細線表格怎麼做，請看下面的程式碼實現效果：） <table cellSpacing=0 cellP

[objc]-ios 分頁控制器實現

width 單個 fse 初始 mil icontrol uilable action per 效果圖 如下 上方的滑條 根據頁面可以滑動 思路: 下方灰色的部分是一個scrollview 其中放置了2個view。 上方的綠色滑條是uilable控件。 綠色滑條下面

ASP.NET簡單SQL分頁的實現

eval 當前頁 per ron lena con help adapter onclick 今天是出來實習的第32天，在學校學的像是囫圇吞棗一樣，什麽都是馬馬虎虎的，而分頁這樣的需要邏輯的像我這樣的懶人喜歡用插件，仔細捉摸了下也不好，所以就花一點時間研究了下分頁， 今天就

SSM框架下分頁的實現（封裝page.java和List<?>）

添加 interface jsp頁面 har show 初始化 ring array dex 之前寫過一篇博客 java分頁的實現（後臺工具類和前臺jsp頁面），介紹了分頁的原理。 今天整合了Spring和SpringMVC和MyBatis，做了增刪改查和分頁，之前的邏輯