Webページを部分的に印刷したい(canvas対応)

らら
らら

Webページを部分的に印刷したい(canvas対応)

はじめに

大昔であれば・・・jQuery.jPrintArea.jsとかあったのですが、自分の手持ちのjQuery.jPrintArea.jsを

試してみたところ、canvasがでない・・・・・

printThis

https://jasonday.github.io/printThis/

こちらは、jQueryのプラグインでjQuery.jPrintArea.jsと使い方は大体同じ・・・

違いは、canvasまで印刷してくれるとこ・・

上記からzipをダウンロードして展開後


│  .gitignore
│  bower.json
│  changelog.txt
│  CODE_OF_CONDUCT.md
│  composer.json
│  index.html
│  LICENSE
│  package-lock.json
│  package.json
│  printThis.d.ts
│  printThis.jquery.json
│  printThis.js
│  README.md
├─.github
│  │  FUNDING.yml
│  │  
│  └─ISSUE_TEMPLATE
│          bug_report.md
│          feature_request.md
└─assets
    ├─css
    │      normalize.css
    │      skeleton.css
    └─images
            cat1.jpg
            cat2.jpg
            cat3.jpg
            print.png

ルートフォルダにあるprintThis.jsを持ってきます。

呼び出し方法


  <!-- jQuery -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- printThis -->
  <script type="text/javascript" src="自分の指定のフォルダー/printThis.js"></script>
<script>
$(function() {
    $('#basic').on("click", function () {
      $('.demo').printThis();
    });
});
</script>


    <a id="basic" href="#nada" class="button button-primary">Print container</a>
    <div class="demo">
        印刷したい領域
    </div>

オプション

debug デバッグでは、実行後に iframe がページに表示されたままになるため、マークアップと CSS を検査できます。
importCSS CSS <link>タグを printThis上のiframe のソースにコピーします。デフォルトでオンです。
importStyle CSS <style>タグで記述されているものを printThis上のiframe のソースにコピーします。デフォルトでオンです。
printContainer 選択したコンテナの内容だけでなく、そのコンテナのマークアップも含まれます。 デフォルトではオンです。
loadCSS 追加のスタイルシートの URL を printThis iframe に指定します。 デフォルトでは空の文字列 (off)。
pageTitle iframe でカスタム ページ タイトルを使用します。 設定によっては印刷ページに反映される場合があります。 デフォルトでは空白です。
removeInline コンテンツからインライン スタイル属性を削除します。 デフォルトではoffです。
removeInlineSelector 削除するインライン スタイル属性をフィルターします。 RemoveInline が true である必要があります。 カスタム CSS/jQuery セレクターを受け入れます。 デフォルトは「*」です
printDelay printThis iframe で print() を呼び出すまでに待機する時間。 デフォルトは 1000 ミリ秒です。 適切な値は、コンテンツとネットワークのパフォーマンスに大きく依存します。 グラフィックスが重い、遅い、またはキャッシュされていないコンテンツの場合、読み込みに余分な時間がかかる場合があります。
header & footer

printThis iframe コンテンツの先頭または末尾に追加する文字列または jQuery オブジェクト。 デフォルトではnull。


$('#mySelector').printThis({
    header: "<h1>Amazing header</h1>"
});
$('#mySelector').printThis({
    footer: $('.hidden-print-header-content')
});

jQuery オブジェクトは移動ではなく複製されます。
base

baseオプションでは、いくつかの動作が可能です。 デフォルトでは false で、現在のドキュメントがベース URL として設定されることを意味します。

true に設定すると、ページ上に <base> 属性が存在する場合、属性が設定されます。 何も見つからない場合、タグは省略されます。これは、完全修飾 URL を含むページに適している可能性があります。

文字列として渡されると、<base> タグの href 属性として使用されます。
formValues この設定により、フォーム要素の現在の値が printThis iframe にコピーされます。 デフォルトではオンです。
canvas Canvas 要素は printThis iframe にコピーされ、必要に応じて Canvas 要素で直接 printThis を呼び出すことができます。
doctypeString printThis iframe で使用する doctype 文字列。 デフォルトは HTML5 doctype です。
removeScripts 印刷中のエラーや予期しない動作を回避するために、コンテンツからスクリプト タグを削除します。 デフォルトでは無効になっています。
copyTagClasses: true

body タグと html タグからクラスを printThis iframe にコピーします。

true、「b」、「h」、または「bh」を受け入れて、それぞれ body タグと html タグの「b」と「h」をテストします。
copyTagStyles: true body タグと html タグのスタイル属性を printThis iframe にコピーします。 CSS 変数のサポートを提供するために追加されました。 true、「b」、「h」、または「bh」を受け入れて、それぞれ body タグと html タグの「b」と「h」をテストします。
beforePrintEvent: null

印刷が行われる前に iframe 内で実行される関数。

この機能はすべてのブラウザで検証されていません。
beforePrint: null

印刷前のファンクションコールです。

印刷前にiframeにコンテンツが設定さえる前に呼び出しされる関数です
afterPrint: null

印刷後のファンクションコールです。

印刷後にiframeにページが削除される前に呼び出しされる関数です。

これは、debug: true の場合でも呼び出され、iframe は削除されません。

jQuery.jPrintArea.js

こちらは昔のjQuery.jPrintArea.js本体、手元になくなるといけないからメモ

こちらは、canvasでないですよ


$.jPrintArea=function(el){
var iframe=document.createElement('IFRAME');
var doc=null;
$(iframe).attr('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc=iframe.contentWindow.document;
var links=window.document.getElementsByTagName('link');
for(var i=0;i<links.length;i++)
if(links[i].rel.toLowerCase()=='stylesheet')
doc.write('<link type="text/css" rel="stylesheet" href="'+links[i].href+'"></link>');
doc.write('<div class="'+$(el).attr("class")+'">'+$(el).html()+'</div>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
alert('Printing...');
document.body.removeChild(iframe);
}


  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.jPrintArea.js"></script>
<script text="javascript/text">
$(function(){
	$('#btn_print').click(function(){
		$.jPrintArea("#printarea");
	});
});
<a href="#" id="btn_print">印刷</a>
<div id="printarea">
        印刷したい領域
</div>

さいごに

最近、ここにメモっておいてよかったことが多いので・・

やっぱりメモです。w

関連記事