web-dev-qa-db-ja.com

angular 6でHTMLからPDFをエクスポート

angular 6.でhtmlからpdfをエクスポートしたいので、jspdfライブラリを使用していますが、色や背景色などのスタイルを指定できません。どうすればよいですか?これを達成しますか?jspdfから他に無料のライブラリがある場合は、それを使用できます)以下のリンクからデモを見ることができます。

[〜#〜] demo [〜#〜]

。tsファイル

export class AppComponent  {
  @ViewChild('reportContent') reportContent: ElementRef;

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

    const content = this.reportContent.nativeElement;

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

    doc.save('asdfghj' + '.pdf');
  }
}

。htmlファイル

<div #reportContent class="p-col-8 p-offset-2">
  <table>
    <tr>
      <td style="color: red;background-color: blue;border:solid;">1111
      </td>
      <td style="border:solid;">2222
      </td>
    </tr>
  </table>
</div>

<button pButton type="button" label="Pdf" (click)="downloadPdf()">Export Pdf</button>
3
realist
    captureScreen() {
        const pdf = new jsPDF('p', 'mm');
        const promises = $('.pdf-intro').map(function(index, element) {
            return new Promise(function(resolve, reject) {
                html2canvas(element, { allowTaint: true, logging: true })
                    .then(function(canvas) {
                        resolve(canvas.toDataURL('image/jpeg', 1.0));
                    })
                    .catch(function(error) {
                        reject('error in PDF page: ' + index);
                    });
            });
        });

        Promise.all(promises).then(function(dataURLS) {
            console.log(dataURLS);
            for (const ind in dataURLS) {
                if (dataURLS.hasOwnProperty(ind)) {
                    console.log(ind);
                    pdf.addImage(
                        dataURLS[ind],
                        'JPEG',
                        0,
                        0,
                        pdf.internal.pageSize.getWidth(),
                        pdf.internal.pageSize.getHeight(),
                    );
                    pdf.addPage();
                }
            }
            pdf.save('HTML-Document.pdf');
        });
    }

これで、jsPDFとhtml2Canvasをコードにインポートする必要があります

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

このためには、npmを実行して以下をインストールする必要があります

    npm install jspdf --save
    npm install --save @types/jspdf
    npm install html2canvas --save
    npm install --save @types/html2canvas

これで、scriptsタグ内のangular.jsonファイルに以下を追加します

    "node_modules/jspdf/dist/jspdf.min.js"

たとえば、component.html内に次のようなコードを追加します。

<div>
  <input type="button" value="CPTURE" (click)="captureScreen()" />
</div>
<div class="pdf-intro">HTHML content</div>
<div class="pdf-intro">HTHML content</div>
<div class="pdf-intro">HTHML content</div>
<div class="pdf-intro">HTHML content</div>

このコードでcssを追加すると、通常はcomponent.cssに追加する方法でレンダリングされます。

これで問題が解決することを願っています。

2
poo1177

jsPDFおよびdom to imageパッケージを使用して、id='dashboard'でHTML divをエクスポートできます。

パッケージをインストールする

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

TSファイル

domtoimage.toPng(document.getElementById('dashboard'))
    .then(function (blob) {
        var pdf = new jsPDF('l', 'pt', [$('gridster').width(), $('gridster').height()]);
        pdf.addImage(blob, 'PNG', 0, 0, $('gridster').width(), $('gridster').height());
        pdf.save(`${that.dashboardName}.pdf`);
    });

HTML

<gridster id='dashboard'></gridster>
2
Hien Nguyen

[ https://www.c-sharpcorner.com/article/convert-html-to-pdf-using-angular-6/] [1 npm install jspdf
そしてhtml2canvasパッケージをインストールするには、与えられたnpmコマンドを使用します。 npm install html2canvas
インストールパーツが完了したら、importステートメントを使用してコンポーネントにインポートします。

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

                <div id="content" #content>  
            <mat-card>  
                <div class="alert alert-info">  
                    <strong>Html To PDF Conversion - Angular 6</strong>  
                </div>  
                <div>  
                <input type="button" value="CPTURE" (click)="captureScreen()"/>  
                </div>  
            </mat-card>  
            </div>  
            <div >  
            <mat-card>  
                <table id="contentToConvert">  
                    <tr>  
                    <th>Column1</th>  
                    <th>Column2</th>  
                    <th>Column3</th>  
                    </tr>  
                    <tr>  
                    <td>Row 1</td>  
                    <td>Row 1</td>  
                    <td>Row 1</td>  
                    </tr>  
                    <tr>  
                    <td>Row 2</td>  
                    <td>Row 2</td>  
                    <td>Row 2</td>  
                    </tr>  
                    <tr>  
                    <td>Row 3</td>  
                    <td>Row 3</td>  
                    <td>Row 3</td>  
                    </tr>  
                    <tr>  
                    <td>Row 4</td>  
                    <td>Row 4</td>  
                    <td>Row 4</td>  
                    </tr>  
                    <tr>  
                    <td>Row 5</td>  
                    <td>Row 5</td>  
                    <td>Row 5</td>  
                    </tr>  
                    <tr>  
                    <td>Row 6</td>  
                    <td>Row 6</td>  
                    <td>Row 6</td>  
                    </tr>  
                </table>  

            </mat-card>  
            </div>  

                import { Component, OnInit, ElementRef ,ViewChild} from '@angular/core';  
            import * as jspdf from 'jspdf';  
            import html2canvas from 'html2canvas';  

            @Component({  
            selector: 'app-htmltopdf',  
            templateUrl: './htmltopdf.component.html',  
            styleUrls: ['./htmltopdf.component.css']  
            })  
            export class HtmltopdfComponent{  
            public captureScreen()  
            {  
                var data = document.getElementById('contentToConvert');  
                html2canvas(data).then(canvas => {  
                // Few necessary setting options  
                var imgWidth = 208;   
                var pageHeight = 295;    
                var imgHeight = canvas.height * imgWidth / canvas.width;  
                var heightLeft = imgHeight;  

                const contentDataURL = canvas.toDataURL('image/png')  
                let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF  
                var position = 0;  
                pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)  
                pdf.save('MYPdf.pdf'); // Generated PDF   
                });  
            }  
            } 

                new JsPDF(  
                Orientation, // Landscape or Portrait  

                unit, // mm, cm, in  

                format // A2, A4 etc  
            );  
0
Muhammad Danish

html2canvasが問題を解決します。以下のようにコードを更新します。

downloadPdf() {
const doc = new jsPDF();
const content = this.reportContent.nativeElement;
html2canvas(content).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        // Few necessary setting options
        const imgWidth = 208;
        const pageHeight = 295;
        const imgHeight = canvas.height * imgWidth / canvas.width;
        const doc = new jspdf('p', 'mm');
        let heightLeft = imgHeight;
        let position = 0;

        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
        while (heightLeft >= 0) {
            position = heightLeft - imgHeight;
            doc.addPage();
            doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
            heightLeft -= pageHeight;
        }
        // Generated PDF
        doc.save('asdfghj' + '.pdf');
    });

}

0
vijay

このように使用する stackblitzの例 デモでは、このように使用します

import {jsPDF} from 'jspdf';


public downloadPDF() {
   const doc = new jsPDF();
   .....
}
0
dasunse