如何在 ReactJS 中使用 JsPDF 在 PDF 中呈现 html 字符串内容答案

【问题标题】：How to render a html string content in PDF using JsPDF in ReactJS如何在 ReactJS 中使用 JsPDF 在 PDF 中呈现 html 字符串内容
【发布时间】：2018-05-21 15:36:36
【问题描述】：

我需要显示一个带有可用 HTML 字符串的 PDF。我为此使用 JsPDF。我曾经将动态内容作为字符串获取。接收到的字符串将是一个 html 内容。这需要格式化并以 PDF 格式显示。

我使用以下命令安装 JsPDF

npm i jspdf --save

我初始化了库并提供了内容。调用 save 下载文件。

var doc = new jsPDF()
doc.text('<html></head> Title </head><body> Content </body></html>', 10, 10)
doc.save('a4.pdf')

这会按原样打印文本。我需要将其显示为格式化的 html。它在新标签中打开而不是下载也很好。

谢谢。

【问题讨论】：

jsPDF 是 PDF 生成器，但您需要 PDF 查看器才能查看文档。看看：github.com/mozilla/pdf.js

标签： html reactjs pdf-generation jspdf

【解决方案1】：

  onPrint = () => {
    const {post} = this.state;

    let pdfConverter = jspdf,
      doc = new pdfConverter();

    stringHtml = `<div>${post}</div>`;

    doc.setFontSize(22);
    doc.text('Title', 15, 15);
    doc.fromHTML(stringHtml, 15, 20, {'width': 180});

    window.open(doc.output('bloburl'), '_blank');
  };

禁用广告拦截

【讨论】：