web-dev-qa-db-ja.com

PDF Angular 7を使用して生成する方法は？

ユーザーが入力したデータからPDFレポートを生成する必要があります。これはオブジェクトに保存されます。これまでのところ、HTMLページを生成し、スクリーンショットを撮って、それをPDFに変換します。PDFをオブジェクトに保存されたデータから直接生成することを探しています。アイデアはありますか？

angularreportpdf-generationangular7
12
The Bored Theorist

これは一般的な要件ですが、PDFの特定の要件についてはあまり詳しく説明していません。あなたは見ることができます：

https://www.npmjs.com/package/angular-pdf-generator

または

https://parall.ax/products/jspdf

クライアント側のオプションとして。 PDF生成された後の処理に応じて、他のオプションもあります。たとえば、サーバーにデータを送り返す方が理にかなっている場合があります。 1つ）PDFを生成し、それをデータベースなどに保存する。

お役に立てば幸いです。

5
Paul Jowett

HtmlをPDFにダウンロードできます。これが役立つことを願っています。

作業デモ

。Html

    <div id="pdfTable" #pdfTable>
  <h1>{{name}}</h1>

  <table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
</div>

<div> <button  (click)="downloadAsPDF()">Export To PDF</button></div>

。ts

public downloadAsPDF() {
    const doc = new jsPDF();

    const specialElementHandlers = {
      '#editor': function (element, renderer) {
        return true;
      }
    };

    const pdfTable = this.pdfTable.nativeElement;

    doc.fromHTML(pdfTable.innerHTML, 15, 15, {
      width: 190,
      'elementHandlers': specialElementHandlers
    });

    doc.save('tableToPdf.pdf');
  }
3
DeC

次のコードが私のプロジェクトで使用され、機能しました

ステップ1：次のコマンドを実行してnpmパッケージをインストールする

> npm install jspdf
> npm install html2canvas

ステップ2：インストールされたパッケージをapp.components.tsにインポートします。これらのパッケージをconstructor（）にインポートしていません

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

ステップ3：PDFとしてエクスポートする必要があるHTML divのIDを指定します。機能を有効にするボタンも追加します。

<div id="MyDIv" style="margin-left: 45px;" class="main-container">

</div>
<div class="icon_image " title="Share As PDF" (click)="exportAsPDF('MyDIv');"><img src="assets/img/pdf.png"></div>

ステップ4：PDFを生成するためのコードを次のように記述します

    exportAsPDF()
      {
        let data = document.getElementById('MyDIv');  
        html2canvas(data).then(canvas => {
          const contentDataURL = canvas.toDataURL('image/png')  
          let pdf = new jspdf('l', 'cm', 'a4'); //Generates PDF in landscape mode
          // let pdf = new jspdf('p', 'cm', 'a4'); Generates PDF in portrait mode
          pdf.addImage(contentDataURL, 'PNG', 0, 0, 29.7, 21.0);  
          pdf.save('Filename.pdf');   
        }); 
      }
2
Basil Mohammed

PDFMAKEプラグインを使用して印刷できます。 Gitでこのリンク https://www.npmjs.com/package/ng-pdf-make を使用してアクセスできます。インストールが非常に簡単になった後、インポートするだけで、これらのライブラリを印刷するコンポーネントに追加します。

"pdfmake/build/pdfmake"から* pdfMakeとしてインポートします。

インポート* "pdfmake/build/vfs_fonts"からpdfFontsとして;

After that, create a function that will print your document such as:

            printDoc(){

            pdfMake.vfs = pdfFonts.pdfMake.vfs;
             let dd = {

// Here you put the page settings as your footer, for example:
                      footer: function(currentPage, pageCount) {
                          return [
                            {
                              text:
                                currentPage.toString() +
                                " de " +
                                pageCount +
                                "\n" +
                                "Footer Name",
                              alignment: currentPage ? "center" : "center"
                            }
                          ];
                        },
// Here you can enter the page size and orientation:
                pageSize: "A4",
                pageOrientation: "Portrait",
            //in pageOrientation you can put "Portrait" or "landscape"

// start the body of your impression:
        content: [

                     {
                        table: {
                          widths: ["*"],
                          body: [
                            [
                              {
                                text: [
                                  { text: `${'Text Example'}`, bold: true }
                                ],
                                style: "header",
                                width: "150",
                                alignment: "left",
                                border: [true, true, true, false],
                                margin: [0, 15, 0, 15]
                              }
                            ]
                          ]
                        }
                      },
        ]

            }

        pdfMake.createPdf(dd).download("Name of Print");
            }
0
Mirellyssl

ユーザーが入力したデータは、htmlページに表示したり、pdfに変換したりできます。そうでない場合、オブジェクトをhtmlテンプレートにバインドする場合はhandlebarsを使用します。次に、htmlテンプレートをPDF in angular jspdfとhtml2canvasを使用した2/4/6 /7。htmlコンテンツは次のように処理する必要があります。このコードは複数ページのpdf作成をサポートしています。

ここにデータ-> htmlcontent

 TS :generatePdf(data) {
     html2canvas(data, { allowTaint: true }).then(canvas => {
      let HTML_Width = canvas.width;
      let HTML_Height = canvas.height;
      let top_left_margin = 15;
      let PDF_Width = HTML_Width + (top_left_margin * 2);
      let PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
      let canvas_image_width = HTML_Width;
      let canvas_image_height = HTML_Height;
      let totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;
      canvas.getContext('2d');
      let imgData = canvas.toDataURL("image/jpeg", 1.0);
      let pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
      pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
      for (let i = 1; i <= totalPDFPages; i++) {
        pdf.addPage([PDF_Width, PDF_Height], 'p');
        pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height * i) + (top_left_margin * 4), canvas_image_width, canvas_image_height);
      }
       pdf.save("HTML-Document.pdf");
    });
  }

HTML：

<div #contentToConvert> Some content here </div>

<button (click)="generatePdf(contentToConvert)">Generate PDF</button>
0
Lincy PJ

利用可能なツールとテクノロジーの良い概要は次のとおりです： 最新のhtmlからpdfへの変換2019 そしてjspdfとhtml2canvasを使用した実用的な例： こちら

0
AB Abhi