web-dev-qa-db-ja.com

Angular 7：HTMLをPDFに変換します

HTMLテーブルをPDF=に変換しようとしていますが、成功しません。

私はそれを行うためにjsPDFを使用しましたが、結果は本当に貧弱で、その理由を理解しようとしています。

私がタブレットを持っていることを考えると、このテーブルを横向きモードでA4ページに印刷する必要があります（必要なすべてのページを使用）。私の問題は、PDFが画像で構成されている（そして私がテキストを好む）ことと、画像の品質が非常に低いことです。

私が試したのはこれです：

const html = document.getElementById('resultTable');
const pdf = new jsPDF('landscape', 'px', 'a4');

pdf.addHTML(html, 0, 0, {
    'width': html.clientWidth,
    'height': html.clientHeight
}, () => { pdf.save('web.pdf'); });

幅と高さとして、pdfページのサイズ（pdf.internal.pageSizeを使用）を使用しようとしましたが、成功しませんでした。そして、私はすでに「px」の代わりに「pt」と「mm」を使用しようとしました。

何か案は？

angularjspdf
5
DeooK

このように使用する stackblitzの動作例

Yout TypeScriptファイル

import {jsPDF} from 'jspdf';

@ViewChild('content', {static: false}) content: ElementRef;


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

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

   const content = this.content.nativeElement;

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

   doc.save('test.pdf');
}

あなたのhtmlファイル

<div id="content" #content>
    <!-- Put your content here -->
</div>

<button (click)="downloadPDF()">Export To PDF</button>
1
dasunse
public downloadPdf() {
let doc = new jsPDF('p', 'pt', 'a4');
h2c(document.getElementById('printpdf')).then(function (canvas) {
  let width = doc.internal.pageSize.getWidth();
  let height = doc.internal.pageSize.getHeight();
  let dataURL = canvas.toDataURL('image/jpeg', 1.0);
  doc.addImage(dataURL, 'jpg', 0, 0, width, height, 'none');
  doc.save('mypdf.pdf');
  });
}
0
Bansi29

代わりに.html()を試してください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" 
        integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
        crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
    function convert() {
        let pdf = new jsPDF('l', 'pt', [tblWidth, tblHeight]);
        pdf.html(document.getElementById('resultTable'), {
            callback: function () {
                // pdf.save('web.pdf');
                window.open(pdf.output('bloburl')); // use this to debug
            }
        });
    }
</script>
0
user11059168