コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

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

WBOY
リリース： 2016-05-16 18:51:22
オリジナル
1126 人が閲覧しました
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);
}

関連ラベル：
web ページ
ソース：php.cn
前の記事：JavaScript 例外処理の使い方の概要_JavaScript スキル 次の記事：radio [テスト済み]_javascript スキルの値を取得する JavaScript 関数
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
透過的なブラウザを起動して、Web アプリケーションと PWA のエクスペリエンスを向上させます [静的 HTML、CSS、JavaScript をサポート] [ユーザーが Web アプリケーション/PWA でデスクトップの壁紙を表示できるようにします] 私は現在、ソケットを使用した Web アプリケーション (チャット) を開発しているジュニアのフロントエンド開発者兼デザイナーです。私と友人が使用している言語は、Scala、HTM...
から 2024-04-05 13:50:12
0
1
1367
Web ページのサイズを変更するとブートストラップ スイッチが正しく動作しない これはコードです: <navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"clas...
から 2024-04-05 08:45:39
0
1
3443
Web サイトのページでローカルにインストールされたライブラリを使用する Windows オペレーティング システム用に作成され、最新のブラウザーの system32 に登録されたライブラリ (.dll、.ocx) を使用して、サイトの作業と計算のロジッ...
から 2024-04-05 00:15:49
0
1
3563
特定のクリック イベントをリッスンし、他のクリック イベントを抑制するにはどうすればよいですか? 私の Web アプリケーションには、各行が特定の URL にリンクする HTML テーブルが含まれています: <table><trdata-url="h...
から 2024-04-04 16:55:27
0
1
317
JavaScript - Mocha Chai 単体テストが実行されない 私はフロントエンド Web 開発コースのブートキャンプでプロジェクトに取り組んでいますが、残念ながら教授は私のこの質問に答えることができません。 2 人のプレイヤーが参加し、26 ...
から 2024-04-02 14:52:19
0
1
356
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート