如何将 pdf 文件加载到 html 页面？答案

【问题标题】：How can I load a pdf file to html page?如何将 pdf 文件加载到 html 页面？
【发布时间】：2016-10-08 02:40:19
【问题描述】：

以下是我尝试加载 pdf 文件的代码部分：

<div class="panel-body">
    <embed width="600" height="450" src="/pathOnMyPcFromROOT/myfile.pdf"
         type="application/pdf"
    </embed>
</div>

我只得到this(Click Here)........ 有没有办法解决它？有没有办法点击链接并在新选项卡中加载 pdf？

【问题讨论】：

我不是 html 专家，但 src 路径是否正确？它应该以 / 开头，这将建议最上面的文件夹。也许它应该是 pathOnMyPcFromRoot/myfile.pdf 或者你可能想要从根目录。
哦，我忘了...源文件的路径是否可以通过您的 http 进程访问。
@AdmiralNoiseBottom 我对同一个目录使用相同的路径，但对不同的文件使用。这是我正在加载到解析器的 xml 文件，它正在工作。那么，我假设该目录可以通过 http 进程访问？
@AdmiralNoiseBottom 好的，我发现了问题：当我使用 xml 加载器时，我必须从根目录一直放置路径才能使其工作。显然，访问 pdf 文件并非如此。我只需要从我的 php 文件所在的目录开始路径。谢谢你的帮助。

标签： html pdf embed

【解决方案1】：

尝试 iframe 标记：

<div class="panel-body">
    <iframe src="files/myfile.pdf" width="600" height="450">
</div>

请注意，网络服务器软件（xampp?mamp?lamp?）不应允许您访问 PDF 文件，除非参考 webroot。最好的办法是把它放到你文件夹中的一个文件夹中，该文件夹包含 index.php（或 index.html）文件：

public_html (a.k.a. htdocs or www)
    - css (folder)
    - files (folder)
        - myfile.pdf
    - js (folder)
    - img (folder)
    - index.html (file)

【讨论】：

好的，我发现了问题：当我使用 xml 加载器时，我必须将路径从根目录一直放在它的工作位置。显然，访问 pdf 文件并非如此。我只需要从我的 php 文件所在的目录开始路径。你是对的。感谢您的帮助。

【解决方案2】：

搞砸这个。我用它所有的时间。更改 css 填充以满足您的需要，并更改 html 宽度和高度。这是一个响应式代码，因此它适用于所有屏幕尺寸

/* Flexible iFrame */
 
.flexible-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.flexible-container iframe,   
.flexible-container object,  
.flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe src=source here" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

【讨论】：