在 iframe 中显示 src 作为数据字符串 pdf 不起作用（React - jspdf）答案

【问题标题】：Display src in an iframe as datastring pdf doesn't work (React - jspdf)在 iframe 中显示 src 作为数据字符串 pdf 不起作用（React - jspdf）
【发布时间】：2021-02-16 19:34:01
【问题描述】：

当我点击一个按钮时，我正在尝试生成一个 PDF 来显示订单的收据。我正在使用 jsPDF 和 React。我在调用外部 PDF 时实现了显示 pdf，但是当我将数据作为字符串传递时，它显示以下错误：

GET data:application/pdf;base64,
JVBERi0xLjMKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJ…
l6ZSAyMAovUm9vdCAxOSAwIFIKL0luZm8gMTggMCBSCj4+
CnN0YXJ0eHJlZgoxOTYzCiUlRU9G net::ERR_INVALID_URL

就像 iframe 将 SRC 属性识别为 URL 而不是 PDF 文档。这是我按下按钮时调用的函数：

handlePrintReceipt() {
  let pdfConverter = require('jspdf');
  let doc = new pdfConverter('p','pt','c6');

  doc.text('Simple text', 10, 10);
  let data = doc.output('datauristring');

  let iframe = `<iframe type="application/pdf" src="${data}#toolbar=0&navpanes=0" width="100%" height="450" frameborder="0"></iframe>`;

  this.setState({
    outputReceipt: iframe
  });
}

当我使用之前保存的简单 PDF 文档（例如：'simple_text.pdf'）更改 iframe 的 SRC 属性时，此实现工作正常。

我做错了什么？提前谢谢

【问题讨论】：

标签： javascript reactjs iframe jspdf

【解决方案1】：

我刚刚在危险的SetInnerHTML 上添加了您的 outputReceipt

<div dangerouslySetInnerHTML={{ __html: this.state.outputReceipt}}/>

并且有效

【讨论】：