Question

我尝试使用iframe使用base64字符串显示PDF文件。但是当PDF包含文本和图像时，它会显示白色屏幕，而不是显示实际的PDF。

任何人都可以告诉我如何在iframe中显示PDF。

var pdf = $window.open("");
  pdf.document.write(
    "<iframe width='800px' height='800px' src='" +
      encodeURI(base64Url) +
      "'></iframe>"
  );

更新了Pdf文件：

PDF File

Base64文件链接： Base64 of Pdf

Answer 1

您是否尝试使用Google Viewer来显示PDF？

＆＃13;

<html>
<body>
<object data="http://www.pdf995.com/samples/pdf.pdf" type="application/pdf">
    <iframe  src="https://docs.google.com/viewer?url=http://www.pdf995.com/samples/pdf.pdf&embedded=true"></iframe>
</object>
</body>
</html>

＆＃13;

您需要将http://www.pdf995.com/samples/pdf.pdf替换为您的网址。

稍后修改：

这是一个有效的jsfiddle，因为你需要将base64String显示为pdf。 https://jsfiddle.net/5re04tg4/

基本上你需要：

<object data="data:application/pdf;base64,{yourBase64String}" >

或者：

<iframe src="data:application/pdf;base64, {yourBase64String}" >

取决于您希望如何显示它。

稍后编辑：

这是一个显示阻止跨源请求的jsfiddle：https://jsfiddle.net/kox9pksd/。

阻止跨源请求：同源策略禁止读取远程资源在 https://firebasestorage.googleapis.com/v0/b/bitcoin-info-44838.appspot.com/o/Web%2BDeveloper%2BInterview%2BQuestions%2BAnd%2BAnswers.txt?alt=media&token=ede150a4-d710-447d-bc09-20153cbf2587。（原因：缺少CORS标题'Access-Control-Allow-Origin'。

稍后稍后编辑：

如果您使用的是内联基础64 PDF或者您拥有计算字符串，则可以在新窗口中呈现它或将其打开。工作jsfiddle：https://jsfiddle.net/asbbsnb9/。

因此问题要么与大小有关（在渲染之前可能会遇到一些延迟），无法下载PDF数据（如上所列）或PDF格式错误。

带有图像的Pdf不会显示在iframe中

1 个答案: