我想显示涵盖我网页的 pdf。
我知道我可以使用 iframe/embed 元素来添加 pdf,但我不知道如何让它覆盖整个页面。
我想在两边都有一个灰色区域,点击后会关闭 pdf。
它应该大致如下:
这个应用程序只需要在最新版本的 Chrome 上运行,因为这是一个内部工具,我想使用默认的 Chrome pdf 查看器。
我很乐意使用 jquery 或其他框架。
如果有人能指出我正确的方向,非常感谢。
答案 0 :(得分: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">×</button>
</div>
<div class="modal-body">
<!--Put your iframe here-->
</div>
</div>
</div>
</div>
答案 1 :(得分:0)
这是一个示例,我为 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>