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

Question

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

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

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

Answer 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)

Answer 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>

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

How can I load a pdf file to html page?

html

embed

pdf