在HTML中，PDF显示为空白页

Question

我的问题是，我可以使用浏览器打开所有PDF文件，直到我上传了一个包含表单的PDF文件。然后，如果我嵌入它，它会返回一个空白页面。但其他带有表单的PDF文件正常打开。请查看下面的代码：

<object data="{{ asset($test->file_path) }}" type="application/pdf" width="100%" height="100%">
    <embed src="{{ asset($test->file_path) }}" type='application/pdf'>
    <center>
        <a href="{{ route('download.test', ['id' => $test->id]) }}" class="btn btn-primary">Please click here to view</a>
    </center>
</object>

注意：我也尝试使用 <iframe>，但仍然返回空白页面。

解决方法： 选项1： 将带有 # 符号的文件重命名，一切都应该正常工作。 选项2： 如有必要，请使用 urlencode。

- Saitama

---

你能否发布一个 Fiddle 或者一个导致该 Bug 的示例 PDF 吗？ - Thomas

嗨@Thomas。如果我创建一个fiddle，这也不会起作用，因为我正在使用laravel。很抱歉，但这是我的带有表单的pdf示例，http://foersom.com/net/HowTo/data/OoPdfFormExample.pdf。 - Blues Clues

我刚在Chrome 63 (Windows 10)上本地测试了它，它可以工作。你尝试过哪些浏览器/版本并在哪个操作系统上进行的测试？ - Thomas

你能检查一下那个文件是否损坏吗？ - Suneel Kumar

Answer 1

<a href="{{ route('download.test', ['id' => $test->id] ,['target'=>'_blank']) }}" class="btn btn-primary">Please click here to view</a>

- ganesh avhad

Answer 2

抱歉，已经很晚了，我有点累，如果我误读了问题，请谅解。

我注意到PDF文件托管在不支持HTTPS的网站上。如果将其嵌入使用HTTPS的网站，则显示空白页面，但在使用HTTP时正常工作。

我认为您需要将PDF移动到支持HTTPS的网站上，或者让托管PDF的网站开始使用HTTPS。

- SigaVPN

---

嗨，@SigaVPN。我仍在使用本地主机，它使用http，PDF文件也在我的项目中，也是一个http文件。 - Blues Clues

@Jonjie 请尝试使用HTTPS。 - SigaVPN

Answer 3

考虑使用对象和内嵌框架（而不是对象和嵌入）

像这样的东西应该适合你：

<object data="http://foersom.com/net/HowTo/data/OoPdfFormExample.pdf" type="application/pdf" width="100%" height="100%">
    <iframe src="http://foersom.com/net/HowTo/data/OoPdfFormExample.pdf" width="100%" height="100%" style="border: none;">
        This browser does not support PDFs. Please download the PDF to view it: <a href="/pdf/example.pdf">Download PDF</a>
    </iframe>
</object>

这个在本地测试时可以工作，但无法在JSFiddle上展示，因为它使用HTTPS。此外，请查看这些示例：https://pdfobject.com/static.html

- Alexander Cardosi

---

该浏览器不支持PDF文档 -> 该浏览器不支持IFRAMES。在下载“OoPdfFormExample.pdf”之前，浏览器不知道它是否支持MIME格式。<iframe/>是动态创建的。如果设置了PDF MIME类型的默认操作，则浏览器将在<iframe/>中显示垃圾内容或空白<iframe/>以及弹出下载窗口。 - 18C

Answer 4

我不确定这个方法是否适用于你的情况，因为我无法测试。你可以尝试一下，这个方法对我总是有效的。试着将http://yoursite.com/the.pdf替换成正确的路径。

<object data="http://yoursite.com/the.pdf" type="application/pdf" width="750px" height="750px">
    <embed src="http://yoursite.com/the.pdf" type="application/pdf">
        <p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://yoursite.com/the.pdf">Download PDF</a>.</p>
    </embed>
</object>

- Suneel Kumar