显示 pdf 文件覆盖网页

Question

我想显示涵盖我网页的 pdf。

我知道我可以使用 iframe/embed 元素来添加 pdf，但我不知道如何让它覆盖整个页面。

我想在两边都有一个灰色区域，点击后会关闭 pdf。

它应该大致如下：

这个应用程序只需要在最新版本的 Chrome 上运行，因为这是一个内部工具，我想使用默认的 Chrome pdf 查看器。

我很乐意使用 jquery 或其他框架。

如果有人能指出我正确的方向，非常感谢。

Answer 1

抱歉，我没有在单击灰色区域时关闭 pdf 的代码，但您可以创建一个 x 按钮来关闭 pdf。以此代码为例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div data-toggle="modal" data-target="#mypopup">
  <button>Open the PDF</button>
</div>


<div class="modal fade" id="mypopup">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <div class="modal-body">
        <!--Put your iframe here-->
      </div>
    </div>
  </div>
</div>

Answer 2

这是一个示例，我为 modalTarget 元素创建了一个类 a，它将允许 pdf 显示在页面上方。单击任一侧将隐藏 pdf 并且两侧变灰。

我决定走这条路线的原因是，您可以右键单击并单击 Open in a new tab 以在新标签中打开 pdf。

每个 a 元素都有一个唯一的 embed 元素，因此如果您取消单击并重新单击它就不必重新加载并且您在 pdf 上的位置将被保存。

我建议您在 Full page 中打开代码段以便能够清楚地看到。

注意：此代码段使用 png，因为 stackoverflow 的沙箱不允许加载 pdf，但是我已经使用 pdf 对其进行了测试，并且效果很好。

let pdfMap = new Map();
function viewPDF (event)
{
    let a = this;
    if (!pdfMap.has(a))
            pdfMap.set(a, document.body.appendChild(pdfModal.content.firstElementChild.cloneNode(true)));
    let modalDlg = pdfMap.get(a);
    const newSRC = a.href;
    if (newSRC !== modalDlg.querySelector('embed').src)
        modalDlg.querySelector('embed').src = newSRC;
    modalDlg.style.display = '';
    modalDlg.onclick = () => modalDlg.style.display = 'none';
    return false;
}
document.querySelectorAll('.modalTarget').forEach(a => a.onclick = viewPDF);

a.modalTarget::after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
}

<template id=pdfModal>
    <div style="display:none; position: fixed; top: 0; left: 0%; width: 100%; overflow: hidden; z-index: 999999; height: 100%; background-color: rgba(0, 0, 0, 0.5)">
        <embed onclick="event.stopPropagation()" style="position: fixed; top: 0; left: 25%; width:50%; height:100%;" />
    </div>
</template>
<!-- Note: this is a png not a pdf. It works the same for a pdf (eg. https://html.spec.whatwg.org/print.pdf) but the stackoverflow sandbox means that I can't. -->
<a href="https://i.imgur.com/BMDcTrH.png" class=modalTarget>View PDF</a>