Chromeを介して選択不可能なテキストでHTMLページをPDFに変換する方法

導入 このチュートリアルは、HTMLページをChromeのPDFとして保存するときにPDF内のテキストが選択され、コピーされるのを防ぐ方法の問題を解決するように設計されています。コア方法は、HTML2Canvasライブラリを使用してHTMLコンテンツをCanvas画像にレンダリングし、Printsプラグインを介して画像をPDFに印刷し、それにより、画像の形でページコンテンツをPDFに埋め込み、テキストの直接コピーを効果的に妨げます。

問題の背景とソリューションの概要 Webアプリケーションでは、PDFファイルとしてHTMLコンテンツをエクスポートする必要がある場合があります。ただし、従来のブラウザ「PRINT AS PDF」機能は通常、テキストの選択性を保持します。つまり、ユーザーはPDFでテキストコンテンツを簡単にコピーできます。これは、コンテンツの著作権を保護したり、不正なコピーを防止したり、固定レイアウトの画像としてページを扱うなど、特別なディスプレイのニーズがあるシナリオにとって課題になります。

このチュートリアルでは、HTMLページコンテンツを画像に変換し、その画像をPDFに埋め込むことにより、PDFテキストの直接選択とコピーを効果的に防止するフロントエンドソリューションを提供します。これを達成するための鍵は、2つのJavaScriptライブラリを組み合わせて使用​​することです：HTML2CanvasとPrintThis。 HTML2CANVASは、指定されたHTML要素をキャンバス画像にレンダリングする責任がありますが、印刷は強力な印刷関数を提供します。

コアテクノロジーの分析

1. html2canvas html2canvasは、ユーザーのブラウザのキャンバス画像にDOM要素（またはページ全体）を直接レンダリングできるJavaScriptライブラリです。 DOMツリーを横断し、スタイル情報を収集し、その情報をキャンバスに描画することで機能します。このプロセスは、サーバー側のレンダリングに依存せず、クライアント側に完全に完了します。 HTML2Canvasを介して生成されたキャンバスは本質的に画像であるため、そのテキストは選択可能な文字ストリームではなくなりました。

2. print this printは、印刷動作​​を制御するための簡潔なAPIを提供するjQueryプラグインです。 HTML要素、IFRAMEコンテンツ、さらにはCanvas要素を直接印刷できます。印刷すると、印刷領域の指定、スタイルなどを含むなど、印刷する必要があるコンテンツと印刷方法などを正確に制御できます。このスキームでは、HTML2Canvasによって生成されたキャンバスを受信し、印刷コンテンツとして使用します。

実装の手順とコードの例

HTMLコンテンツを選択不可能なテキストでPDFに変換するには、次の手順に従う必要があります。

1. 必要なライブラリを紹介します HTMLファイルでは、JQUERY、HTML2CANVAS、PRINTSTISの3つのライブラリを最初に紹介する必要があります。簡単かつ迅速な統合のためにCDNリンクを使用することをお勧めします。

    
   
   
       
       <meta name="Viewport" content="width = device-width、initial-scale = 1.0">
       <title> HTMLから選択不可能なテキストPDFチュートリアル</title>
       
        
       
        
       を紹介します
        
       <style>
           ボディ{font-family：arial、sans-serif;マージン：20px; }
           #page {border：1px solid #ccc;パディング：20px;最大幅：800px;マージン：0 Auto; }
           img {max-width：100％;高さ：自動;表示：ブロック;マージントップ：15px; }
           ボタン{パディング：10px 20px;フォントサイズ：16px;カーソル：ポインター;マージントップ：20px; }
       </style>
   
   
       <div id="page">
           <h1>チュートリアルタイトル：HTMLページを選択不可能なテキストでPDFに変換</h1>
           <p>これは、ブラウザがPDFとして印刷した後に通常選択およびコピーできるサンプルテキストです。 </p>
           <p>このチュートリアルのメソッドを使用すると、テキストが画像形式でレンダリングされる場合にPDFを生成できるため、直接コピーできません。 </p>
           <ul>
               <li>アイテムのリスト1 </li>
               <li>アイテムのリスト2 </li>
               <li>アイテムのリスト3 </li>
           </ul>
           <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/amber_mountain_rock_thrush_(monticola_sharp%20ei_erythronotus%EF%BC%89_male_2.jpg/1200px-amber_mountain_rock_thrush_%EF%BC%88monticola_sharpei_erythronotus%EF%BC%89_male_2.jpg%20" alt="例の画像：鳥">
           <p>その他のコンテンツ... </p>
       </div>
   
       <button onclick="printunselectablepdf（）">選択不可能なテキストpdf </button>を生成します
   
       
           関数printunselectablepdf（）{
               //画像に変換して印刷する必要があるHTML要素を選択します。これがid 'page' with with with with with with with
               html2canvas（document.queryselector（ "＃page"））。
                   //生成されたキャンバス要素をprintthisに渡す
                   // printthisは新しい印刷ウィンドウ/iframeを作成し、キャンバスコンテンツを$（canvas）にレンダリングします。{{{
                       キャンバス：true //キーパラメーター：printthがキャンバス要素を処理していることを示します}）;
               }）;
           }
       
   
   

2. JavaScriptコードの作成 ページが読み込まれた後、HTML2Canvasを呼び出してターゲットHTML要素をレンダリングし、生成されたキャンバスを渡して印刷する必要があります。

    //機能の例では、ボタンがクリックされたときに関数printelectablepdf（）を呼び出すことができます{
       //画像に変換して印刷する必要があるHTML要素を選択します。これがid 'page' with with with with with with with
       html2canvas（document.queryselector（ "＃page"））。
           //生成されたキャンバス要素をprintthisに渡す
           // printthisは新しい印刷ウィンドウ/iframeを作成し、キャンバスコンテンツを$（canvas）にレンダリングします。{{{
               キャンバス：true //キーパラメーター：printthがキャンバス要素を処理していることを示します}）;
       }）;
   }

詳細なコード説明

• document.queryselector（ "＃page"）：このコード行は、IDページを使用してHTMLドキュメントの要素を選択します。この要素には、選択不可能なテキストPDFに変換するすべてのコンテンツが含まれています。ページ構造に従ってセレクターを調整できます。
• html2canvas（...）。then（canvas => {...}）：html2canvasは、約束を返す非同期関数です。 HTMLコンテンツがキャンバスに正常にレンダリングされると、約束が解析され、Canvas DOMオブジェクトが返されます。
• $（canvas）.printthis（{canvas：true}）：
  • $（canvas）：printthはjqueryプラグインであるため、canvas domオブジェクトをjqueryオブジェクトにラップする必要があります。
  • printthis（{canvas：true}）：これは、thisメソッドをprintに呼び出すことです。その中で、Canvas：trueは重要な構成パラメーターです。これは、このプラグインに渡されたコンテンツがキャンバス要素であることを伝え、それに応じてそれを処理し、画像として印刷します。

上記のコードが実行されると、ブラウザが印刷プレビューウィンドウをポップアップします。このプレビューウィンドウでは、元のHTMLコンテンツが画像として表示され、テキストがオプションではなくなったことがわかります。現時点では、「ターゲット」を選択して「PDFとして保存」して、選択不可能なテキストでPDFファイルを生成します。

注意すべきこと

1. パフォーマンスの考慮事項：HTML2Canvasは、非常に複雑なページを扱うとき、または多数の要素を含む場合、より多くのCPUリソースと時間を消費する場合があります。大きなページの場合、HTML構造を最適化するか、チャンクレンダリングを検討する必要がある場合があります。
2. アクセシビリティ：テキストコンテンツを画像に変換すると、アクセシビリティが犠牲になります。スクリーンリーダーは、これらの画像のテキストコンテンツを読むことができません。アプリケーションに高度なアクセシビリティが必要な場合は、この方法を注意して使用してください。
3. テキスト抽出の制限：この方法により、ユーザーはテキストを直接コピーして貼り付けることができませんが、あらゆる形態のテキスト抽出を完全に妨げません。高度なユーザーは、OCR（光学文字認識）ツールを使用して、生成されたPDF画像からテキストを認識して抽出する場合があります。この方法は、「簡単な」複製動作を防ぐために設計されています。
4. 画像の読み込み：HTML2Canvasは、レンダリング時にすべての画像をページにロードしようとします。画像がロードに失敗したり、クロスドメインの問題がある場合、キャンバスレンダリングが不完全になる可能性があります。すべての画像が正しくロードされていることを確認し、処理してください

以上がChromeを介して選択不可能なテキストでHTMLページをPDFに変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。