web-dev-qa-db-ja.com

HTMLをPDF 6のAngularに変換します6

複数のコンポーネントの集合体であるコンポーネント（Angular 6）があります。これにより、長いHTMLが生成されます（Bootstrap 4を使用しています）。次に、このHTMLをPDFに変換します。私は広範囲にわたって検索し、jsPDFで機能する多くのソリューションを見つけました。要件は、HTMLに表示されるとおりの鮮明なレイアウトを作成することです（ユーザーが選択、コピーなどできるように）。しかし、私が見つけた解決策は、テキストの行を手動で追加しようとしていますが、これは私のシナリオでは不可能です。または、HTMLを画像形式に変換（ラスタライズ？）します。また、HTMLの書式設定とフォントおよびスタイルを保持したいです。

これまでのところ、 this および this を試しました。

htmlangularpdfangular6jspdf
14
Vivekanand P V

これまでに考え出した最善の解決策。

以下のパッケージをnpmからインストールする必要があります

html2canvas

jspdf

import * as jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

htmltoPDF()
{
    // parentdiv is the html element which has to be converted to PDF
    html2canvas(document.querySelector("#parentdiv")).then(canvas => {

      var pdf = new jsPDF('p', 'pt', [canvas.width, canvas.height]);

      var imgData  = canvas.toDataURL("image/jpeg", 1.0);
      pdf.addImage(imgData,0,0,canvas.width, canvas.height);
      pdf.save('converteddoc.pdf');

  });

}

UPDATE：

別のソリューションを見つけました。 A4サイズのページに分割することはできませんでしたが、1つのPDFファイルを作成することはできました。

パッケージ：

dom-to-image

jspdf

import domtoimage from 'dom-to-image';
import * as jsPDF from 'jspdf';



            downloadPDF()
            {

              var node = document.getElementById('parentdiv');

              var img;
              var filename;
              var newImage;


              domtoimage.toPng(node, { bgcolor: '#fff' })

                .then(function(dataUrl) {

                  img = new Image();
                  img.src = dataUrl;
                  newImage = img.src;

                  img.onload = function(){

                  var pdfWidth = img.width;
                  var pdfHeight = img.height;

                    // FileSaver.saveAs(dataUrl, 'my-pdfimage.png'); // Save as Image

                    var doc;

                    if(pdfWidth > pdfHeight)
                    {
                      doc = new jsPDF('l', 'px', [pdfWidth , pdfHeight]);
                    }
                    else
                    {
                      doc = new jsPDF('p', 'px', [pdfWidth , pdfHeight]);
                    }


                    var width = doc.internal.pageSize.getWidth();
                    var height = doc.internal.pageSize.getHeight();


                    doc.addImage(newImage, 'PNG',  10, 10, width, height);
                    filename = 'mypdf_' + '.pdf';
                    doc.save(filename);

                  };


                })
                .catch(function(error) {

                 // Error Handling

                });



            }
9
Anirudh

Spring Bootで Thymeleaf や itextpdf などのバックエンドサービスを使用してみてください。

0
dasunse

まず、以下をインストールします。1）npm install jspdf 2）npm install html2canvas

後でインポートし、次のコードを使用します

 public captureScreen() {
      const data = document.getElementById('invoice');
      html2canvas(data).then(canvas => {
      const imgWidth = 208;
      const pageHeight = 295;
      const imgHeight = canvas.height * imgWidth / canvas.width;
      const heightLeft = imgHeight;
      const contentDataURL = canvas.toDataURL('image/png');
      const pdf = new jspdf('p', 'mm', 'a4'); 
      const position = 0;
      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
      pdf.save('invoice.pdf'); 
      });
      }
0
Vaishnavi

私のチームと私が独自のAngular HTML to PDF問題に生のHTMLを私たちのJava AP​​Iに送信することを考え出した最良の解決策次に、wkhtmltopdf（ https://github.com/wkhtmltopdf/wkhtmltopdf ）をJavaラッパー（ https://github.com/jhonnymertz/Java-wkhtmltopdf-wrapper ）。いくつかの落とし穴（サーバーにフォントが正しくインストールされていることを確認する、すべてが適切にエンコードされる、改ページを見つけて動作させるなど）を克服し、ページを正確に再現してAngular HTMLを使用することができましたユニバーサルテンプレートとして（異なるシナリオに基づいて変化します）。簡単な道ではありませんが、エンタープライズレベルの本番環境で理解できれば、すばらしい結果が得られます。

Jspdf（および他のライブラリ）も試してみて、自分と同じような結論に達したことに注意してください。彼らは、必要なことをしなかっただけです。これがお役に立てば幸いです。

0
MapLion

これを参照すると、いくつかのアイデアが得られます pdf-angular

npm-angular

0
chethu