プリントイメージ機能のフロントエンド実装

前提条件 バックエンドが医療用ECG波形レポートを描画するためのデータを返し、フロントエンドがcanvasでWeb上に描画し、それを印刷してPDFドキュメントを生成する!

I.  LODOPプリントプラグインを試す

フロントエンドのフォーム印刷機能は、以前にLODOP印刷プラグインを使用して、あなたは、対応するLODOP印刷ソフトウェアをインストールする必要があり、2つの方法のLODOP使用します。最初の方法は、オブジェクトにフロントエンドタグのコンテンツ要素を収集することです var htmlstr= $("#ECGReport").html(); through LODOP.ADD_PRINT_HTM(20,60, 400, 900,htmlstr); lodopメソッドは、自己編集印刷ソフトウェアLODOPにインポートします。 ADD_PRINT_HTM(20,60, 400, 900,'Generate report title'); と左右のマージンを調整します。しかし、ラベル要素の内容を収集する最初の方法を使用して、それはキャンバス内の層のスタイルとコンテンツが収集できないことが判明した、と決定的に放棄、もしキャンバスなしページコンテンツ、使用できる描画します。

利点：カスタマイズ可能な印刷内容とスタイル、印刷の割合も編集することができます。欠点：ダウンロードし、印刷Lodop印刷ソフトウェアをインストールする必要がある、ページキャンバスコンテンツは、印刷領域に抽出することはできません。

II. フロントエンドを試す window.print()

長所：コーディングが簡単で、Google Chromeが提供する印刷機能などを使って簡単に操作できる。

デメリット：ページ全体を部分的に印刷する場合、印刷領域のコントロールが容易でなく、歪みが生じることがある。

<スパン III. html2canvas + jsPDF.jsを試す。

html2canvas(document.querySelector('#modelContents'), {
   allowTaint: true, taintTest: false, scale: '1', dpi: '300', background: '#fff'}
) .then(function(canvas) {  
// element id is exportContent 
 let ctx = canvas.getContext("2d"); 
 var imgData = canvas.toDataURL('image/png') var img = new Image() 
 var contentWidth = canvas.width; var contentHeight = canvas.height;
 img.src = imgData; 
 $("#ECGReport").append(img); 
 img.width =1000; img.height = 740; 
 //a4 paper size [595.28,841.89], html page generated by canvas in the pdf image width and height
 var imgWidth = 595.28;
 var imgHeight = 555.28/contentWidth * contentHeight; 
 // according to the size of the picture to set the pdf specifications, to be implemented when the picture is loaded successfully, the reason for *0.5 because of the proportion of the problem 
 img.onload = function () { 
 // here need to pay attention to, pdf horizontal and vertical two properties, you need to adjust the ratio according to the width and height, otherwise there will be incomplete display of the problem 
  var doc=''
 if (this.width > this.height) { 
   doc = new jsPDF('l','px', [1000, 720]) 
  } else {
   doc = new jsPDF('p','pt', [4000, 2960]) 
  }
  doc.addImage(imgData, 'png', 30, 40, 500, 360, 'NONE') //proportion can be adjusted as needed
 // save as different file names according to the download doc.save('pdf_' + new Date().getTime() + '.pdf') };})

html2canvasメソッドを介してキャンバスとフォームのコンテンツから抽出され、画像に変換され、キャンバスのコンテンツが失われることはありません、順序で画像コンテンツの深刻な歪みを防ぐために、元のコンテンツが倍率回の後に抽出されます、倍率時間はほぼ4倍、1920 * 1080コンピュータ画面の解像度を計算する300dpiと他のパラメータのA4用紙とプリンタの解像度のサイズで計算できるPDF文書に画像を取り込むのjsPDFメソッドは一般72dpi、であります。

実際には、あなたもjsPDFメソッドを介してレポートフォームの患者の名前と他の情報を編集することができ、同じキャンバスコンテンツの描画ロジックはまた、jsPDFメソッドを介して実現することができますが、jsPDFは、中国語をサポートしていない、あなたはより面倒で不便なプロジェクトで使用するttfフォントファイルをダウンロードしてください。欠点：一般的な要件が達成されているものの、生成波形画像がまだ歪みやジャギー現象、これはキャンバス描画で回避できないを持っています。

まとめますと

svgの操作に慣れている人は、svg方式を使うべきでしょう。svgはベクトル画像なので、ピクセルに依存せず、無限ズームでも歪むことはないでしょう。また、ピュアフォーム印刷機能があれば、プリンター接続印刷も実現しやすくなります。

上記は印刷イメージ機能のフロントエンド実装の小さな紹介ですが、私はそれがあなたの助けになることを願って、あなたが何か質問がある場合は、私にメッセージを与えてください、私は速やかに皆に返信されます。また、Script Houseのウェブサイトを応援していただき、ありがとうございます。

この記事がお役に立つと思われる場合は、出典を明記した上で、ご自由に転載してください。