JSPDF 和 html2canvas Angular

Question

我正在尝试使用 html2canvas 生成 PDF，但是在调用该函数时出现错误，我的 TS 如下：

  @ViewChild('content') content:ElementRef;

  generarPDF() {
    html2canvas(document.getElementById('content'), {
      // Opciones
      allowTaint: true,
      useCORS: false,
      // Calidad del PDF
      scale: 1
    }).then(function(canvas) {
      var img = canvas.toDataURL("image/png");
      var doc = new jsPDF();
      doc.addImage(img,'PNG',7, 20, 195, 105);
      doc.save('postres.pdf');
    });
  }

我的 html 是：

div.cliente {
    border-bottom: 2px dotted;
    width: 70%;
    float: left;
}

div.fecha {
    border-bottom: 2px dotted;
    width: 28%;
    float: right;
}

ul.satisfacion {
    float: left;
    margin-top: 28px;
}

  <div #content id="content">
    <div class="contenido-pdf">
     
      <div class="cliente">
        <span>Cliente: </span>
        <div class="campo"></div>
      </div>
      <div class="fecha">
          <span>Fecha: </span>
          <div class="campo"></div>
        </div>
      <ul class="satisfacion">
        <li>El servicio es muy satisfactorio</li>
        <li>El servicio es satisfactorio</li>
        <li>El servico es normal</li>
        <li>El servicio no es satisfactorio</li>
      </ul>
    </div>
  </div>
  <button mat-raised-button (click)="generarPDF()" id="donwloadpdf">
  DESCARGAR CARTA DE CONFORMIDAD
</button>

还有我的错误

ERROR Error: "Uncaught (in promise): Error: Supplied Data is not a valid base64-String jsPDF.convertStringToImageData 
e.convertStringToImageData

当我要单击生成 pdf 时，它不会生成它或做任何事情，它只会在我的控制台上抛出该错误，我已经尝试使用 jsPDF 生成它，但问题是它没有保留款式

Answer 1

您的 css 正在做一些奇怪的事情，使带有 id="content" 的 div 没有内容。

如果你把

#content {
  outline: 1px solid red;
}

我已经注释掉了你的 css 并产生了以下 Working Stackblitz

取消注释 css 以查看问题。

重现 stackblitz 的步骤

angular.json

"scripts": [
  "node_modules/html2canvas/dist/html2canvas.min.js",
  "node_modules/jspdf/dist/jspdf.min.js"
]

依赖关系

我使用 html2canvas@1.0.0-rc.1 避免了 html2canvas 的问题。看 - https://github.com/niklasvh/html2canvas/issues/1896
最新版本的 jspdf 无法解决文件保护程序的一些问题，所以我只是选择了我知道有效的版本 jspdf@1.4.1
包括类型@types/html2canvas、@types/jspdf
由于某些原因，在 stackblitz 中您需要使用

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

app.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

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

  generarPDF() {

    const div = document.getElementById('content');
    const options = {
      background: 'white',
      scale: 3
    };

    html2canvas(div, options).then((canvas) => {

      var img = canvas.toDataURL("image/PNG");
      var doc = new jsPDF('l', 'mm', 'a4', 1);

      // Add image Canvas to PDF
      const bufferX = 5;
      const bufferY = 5;
      const imgProps = (<any>doc).getImageProperties(img);
      const pdfWidth = doc.internal.pageSize.getWidth() - 2 * bufferX;
      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
      doc.addImage(img, 'PNG', bufferX, bufferY, pdfWidth, pdfHeight, undefined, 'FAST');

      return doc;
    }).then((doc) => {
      doc.save('postres.pdf');  
    });
  }

}

如果有人想出改进此答案的方法，请随时对其进行编辑，我会接受任何此类编辑。

更新 - 使用

改进

JSPDF 和 html2canvas Angular

JSPDF and html2canvas with Angular

html2canvas

jspdf

angular