新しいブラウザローカル印刷の実装方法
背景
最近开発プラットフォームをしていて、その中で局部印刷の机能に関连して、この机能を开発プラットフォームの1つの共通の机能として、ネット上からいくつかの解决方案とオープンソースjsコンポーネントを探して、テストの结果はすべて満足していないで、大部分は印刷の内容を1つのiframeの中に置いて、iframeの中の内容を印刷して、性能に対する影响は比较的に大きくて、特に印刷する内容が多い場合、効果が実際に表示されているものと異なる可能性があるので、いっそ自分で方法を考えて実現しましょう.その後、自分で別の実現方法を考えて、みんなと一緒に分かち合って、誰がもっと良い解決策を持って交流を歓迎しますか.
構想
考え方も簡単ですが、ローカルプリントというのはページの一部だけを印刷する(ページ全体を印刷すれば大丈夫、そのままwindow.print()でいい)、印刷するときは他の不要な部分を隠し、印刷が終わってから表示を再開すればいいのですが、display:noneのスタイルを使わないように注意してください.占拠隠しvisibility:hidden;
じょうふごう
jqueryを使いましたので、jqueryライブラリを追加します
ソースコードを添付ファイルとしてアップロード
最近开発プラットフォームをしていて、その中で局部印刷の机能に関连して、この机能を开発プラットフォームの1つの共通の机能として、ネット上からいくつかの解决方案とオープンソースjsコンポーネントを探して、テストの结果はすべて満足していないで、大部分は印刷の内容を1つのiframeの中に置いて、iframeの中の内容を印刷して、性能に対する影响は比较的に大きくて、特に印刷する内容が多い場合、効果が実際に表示されているものと異なる可能性があるので、いっそ自分で方法を考えて実現しましょう.その後、自分で別の実現方法を考えて、みんなと一緒に分かち合って、誰がもっと良い解決策を持って交流を歓迎しますか.
構想
考え方も簡単ですが、ローカルプリントというのはページの一部だけを印刷する(ページ全体を印刷すれば大丈夫、そのままwindow.print()でいい)、印刷するときは他の不要な部分を隠し、印刷が終わってから表示を再開すればいいのですが、display:noneのスタイルを使わないように注意してください.占拠隠しvisibility:hidden;
じょうふごう
jqueryを使いましたので、jqueryライブラリを追加します
function printArea(id){
var box=$("#"+id);
var pbox;
pbox=box.parent();
while(true){
pbox.children().addClass("print_hide");
box.removeClass("print_hide");
box.addClass("print_parent");
if(pbox.get(0).tagName=="BODY"){
break;
}
box=pbox;
pbox=pbox.parent();
}
window.print();
}
ソースコードを添付ファイルとしてアップロード