显示覆盖网页的pdf文件[关闭]答案

【问题标题】：Show pdf file covering web page [closed]显示覆盖网页的pdf文件[关闭]
【发布时间】：2021-10-02 02:32:24
【问题描述】：

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

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

我希望在任何一侧都有一个灰色区域，单击该区域将关闭 pdf。

大致应该是这样的：

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

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

如果有人能指出我正确的方向，不胜感激。

【问题讨论】：

欢迎来到 Stack Overflow！访问help center，使用tour 了解内容和How to Ask。请首先>>>Search for related topics on SO，如果您遇到困难，请发布您的尝试minimal reproducible example，并使用[<>] 记录输入和预期输出sn-p 编辑器。
好的，将小提琴作为答案发布。请点击[<>]sn-p 编辑器并创建一个（沙盒化所以不工作）minimal reproducible example

标签： javascript html

【解决方案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>

【讨论】：

请注意，您的 PDF 仅在单击按钮时打开。您还应该添加引导 CDN。以下是您必须添加的内容：maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> 和
它似乎不起作用：jsfiddle.net/qtd8xnfz。你能提供一个工作代码sn-p吗？
您可以点击[<>] sn-p 编辑器并发布minimal reproducible example。请不要在 cmets 中发布代码
还有为什么这么老的引导程序？它们现在是第 5 版
我现在只使用那个，因为我不知道新的引导程序

【解决方案2】：

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

我决定走这条路的原因是你可以右键单击并单击Open in a new tab 以在新选项卡中打开 pdf。

每个a 元素都有一个唯一的嵌入元素，因此如果您取消单击并重新单击，则无需重新加载，并且您在 pdf 上的位置将被保存。

我建议你打开Full page中的sn-p以便能看清楚。

注意：这个 sn-p 使用 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>

【讨论】：