検索

ホームページ  >  記事  >  ウェブフロントエンド  >  Web ページページングの printing_javascript スキルの実装

Web ページページングの printing_javascript スキルの実装

WBOY
WBOYオリジナル
2016-05-16 18:51:221127ブラウズ
1．まず、印刷する必要があるページに WebBrowser を導入します。
コードをコピーします。 コードは次のとおりです:




をページに追加するか、必要に応じて JavaScript を使用して一時的に追加することもできます:
コードをコピーします コードは次のとおりです:

document.body.insertAdjacentHTML("beforeEnd",
"classid="clsid:8856F961-340A-11D0- A96B-00C04FD705A2">);

2. ページ設定と印刷プレビュー
図のように以下では、直接呼び出すことができます
コードをコピー コードは次のとおりです:

ドキュメント。 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 属性があります印刷形式と表示形式を個別に設定できます。
たとえば、 中央の形式は印刷中にのみ機能し、表示インターフェイスには影響しません。


次に、印刷したくないページ要素に class="Noprint" を追加すると、印刷および印刷プレビューに表示されなくなります。
ページ分割したい場所を追加します:
以上です。
4．ページの特定の部分の印刷
これは、印刷する必要がある特定の部分の新しいページを作成し、それをメイン ページの IFrame にロードして、その print メソッドを呼び出すことによって実現されます。 IFrame を使用して、IFrame 内のコンテンツのみを印刷します。
例:

次の springFrame js 関数は、Iframe 内のコンテンツのみを出力し、printFrame(FrameId) などのように直接参照して使用できます。
Copy code コードは次のとおりです:

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("");
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">





onclick="document.all.WebBrowser.ExecWB(6,6)">
onclick="document.all.WebBrowser.ExecWB(8,1)">
onclick="document.all.WebBrowser.ExecWB(7,1)">
onclick="printHidden(FrameId)">


1


2

") ;
var doc = printHiddenFrame.document;
doc.open();
doc.write("");
doc.write("");
doc.write("");
doc.close();
}
function onprintHiddenFrame() {
function onfinish() {
printHiddenFrame.outerHTML = "";
if ( window.onprintcomplete ) window.onprintcomplete();
}
printFrame(printHiddenFrame.printMe, onfinish);
}

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScript 例外処理の使い方の概要_JavaScript スキル次の記事：JavaScript 例外処理の使い方の概要_JavaScript スキル

関連記事

続きを見る