使用 jsPDF 和 html2canvas 将 Angular Multipe 选项卡内容转换为一个 PDF

【问题标题】：Angular Multipe tab content into one PDF using jsPDF and html2canvas使用 jsPDF 和 html2canvas 将 Angular Multipe 选项卡内容转换为一个 PDF
【发布时间】：2019-02-14 17:15:48
【问题描述】：

我正在使用 Angular 5，我想将不同选项卡的 pdf 创建到一个 PDF 中。我尝试使用 jsPDF，但唯一活动的 div 选项卡内容正在被存储，并且对于另一个具有不同 ID 的 div，它给出了以下错误。

错误错误：未捕获（承诺）：错误：提供的数据不是有效的 base64 字符串 jsPDF.convertStringToImageData

请告诉我这是否可以实现。

谢谢葡萄酒。

【问题讨论】：

标签： angular jspdf jspdf-autotable

【解决方案1】：

你可以像这样使用html2pdf：

首先你需要 npm 安装它

npm i html2pdf.js --save

然后将其导入您的组件中：

import * as html2pdf from 'html2pdf.js';

第二次这样使用：

let content = `some html`;

const opt = {
  margin: 1,
  filename: 'pdf_Name.pdf',
  image: { type: 'jpeg', quality: 1 },
  html2canvas: { scale: 2 },
  jsPDF: { unit: 'in', format: 'A4', orientation: 'portrait' }
};

// Save the PDF
html2pdf().set(opt).from(content).save();

【讨论】：

谢谢。 html 内容是不同的选项卡，我无法组合所有的 div。如果我将 div 放在所有选项卡的顶部，则只显示选项卡而不显示内容。