有没有办法让选项卡式 pdf 显示在 Edge 中工作？
Posted
技术标签:
【中文标题】有没有办法让选项卡式 pdf 显示在 Edge 中工作？【英文标题】：Is there a way to make tabbed pdf display working in Edge? 【发布时间】：2021-05-24 20:00:02 【问题描述】：这个 html 根据点击的按钮显示 3 个 pdf 在 Firefox 和 Chrome 中有效。第一次单击第二个或第三个按钮后，它不会在 Edge 中显示 pdf。但是当第二次单击按钮时，它会显示 pdf。 什么会导致这个？如果它是 Edge 中的错误，是否有解决方法？
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
.row-container
flex: 1 1 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%;
background-color: red;
.first-row
background-color: beige;
.second-row
flex: 1 1 auto;
flex-direction: column;
display: flex;
border: 3px solid lightblue;
min-height: 0;
overflow: hidden;
.frame
flex: 1 1 auto;
border: 0;
.active
display: block;
.hidden
display: none;
.selected
color: white;
background-color: blue;
.not-selected
color: black;
background-color: lightblue;
</style>
</head>
<body>
<div class="row-container">
<div class="first-row">
<p>just some text here</p>
<nav>
<div id="nav-tab">
<button id="but1" class="button selected">Dummy</button>
<button id="but2" class="button not-selected">Lorem</button>
<button id="but3" class="button not-selected">Resume</button>
</div>
</nav>
</div>
<div class="second-row" id="nav-tabContent">
<iframe class="frame active" id="pdf-but1"
src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf">
</iframe>
<iframe class="frame hidden" id="pdf-but2"
src="https://file-examples-com.github.io/uploads/2017/10/file-sample_150kB.pdf">
</iframe>
<iframe class="frame hidden" id="pdf-but3"
src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Resume.pdf">
</iframe>
</div>
</div>
<script>
var buttons = document.getElementsByClassName("button");
var frames = document.getElementsByClassName("frame");
var i
function click()
for (i = 0; i < buttons.length; i++)
if (buttons[i].id != this.id)
buttons[i].setAttribute("class", "button not-selected");
frames[i].setAttribute("class", "frame hidden");
this.setAttribute("class", "button selected");
document.getElementById("pdf-" + this.id).setAttribute("class", "frame active");
for (i = 0; i < buttons.length; i++)
buttons[i].addEventListener("click", click)
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：我尝试使用 Microsoft Edge (Chromium) 浏览器版本 88.0.705.74 测试该问题，发现当我们第一次单击第二个或第三个按钮时那么它需要时间并且PDF文件没有出现。
我注意到您将 display: none 设置为 Iframe 以隐藏它。
我认为 Edge 浏览器不会为那些隐藏的 iframe 呈现 PDF，当您设置 display: block 时，它会导致此问题。
您会注意到，如果我们稍微滚动一下，PDF 就会正确显示。
作为此问题的替代解决方案，我建议您可以将 iframe 相互重叠，并使用zIndex 通过单击按钮将 iframe 置于顶部。
例子：
<!doctype html>
<html>
<head>
<title>demo</title>
<style>
body
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
.row-container
flex: 1 1 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%;
background-color: red;
.first-row
background-color: beige;
.second-row
flex: 1 1 auto;
flex-direction: column;
display: flex;
border: 3px solid lightblue;
min-height: 0;
overflow: hidden;
.selected
color: white;
background-color: blue;
.not-selected
color: black;
background-color: lightblue;
.frame
flex: 1 1 auto;
border: 0;
display:block;
width:100%;
height:92%;
.frm1
position:absolute;
background-color: red;
z-index: 2;
.frm2
position:absolute;
background-color: green;
z-index: 1;
.frm3
position:absolute;
background-color: yellow;
z-index: 0;
</style>
<script>
function fun1()
document.getElementById('pdf-but1').style.zIndex = 2;
document.getElementById('pdf-but2').style.zIndex = 0;
document.getElementById('pdf-but3').style.zIndex = 1;
document.getElementById('btn1').setAttribute("class", "button selected");
document.getElementById('btn2').setAttribute("class", "button not-selected");
document.getElementById('btn3').setAttribute("class", "button not-selected");
function fun2()
document.getElementById('pdf-but1').style.zIndex = 1;
document.getElementById('pdf-but2').style.zIndex = 2;
document.getElementById('pdf-but3').style.zIndex = 0;
document.getElementById('btn1').setAttribute("class", "button not-selected");
document.getElementById('btn2').setAttribute("class", "button selected");
document.getElementById('btn3').setAttribute("class", "button not-selected");
function fun3()
document.getElementById('pdf-but1').style.zIndex = 0;
document.getElementById('pdf-but2').style.zIndex = 1;
document.getElementById('pdf-but3').style.zIndex = 2;
document.getElementById('btn1').setAttribute("class", "button not-selected");
document.getElementById('btn2').setAttribute("class", "button not-selected");
document.getElementById('btn3').setAttribute("class", "button selected");
</script>
</head>
<body>
<div class="row-container">
<div class="first-row">
<p>just some text here</p>
<nav>
<div id="nav-tab">
<button id="btn1" onclick="fun1()" class="selected">Dummy</button>
<button id="btn2" onclick="fun2()" class="not-selected">Lorem</button>
<button id="btn3" onclick="fun3()" class="not-selected">Resume</button>
</div>
</nav>
</div>
<div class="second-row" id="nav-tabContent">
<iframe class="frm1 frame" id="pdf-but1"
src="https://freshmindsgroup.com/wp-content/uploads/2020/03/LoremIpsumH101-2016.pdf">
</iframe>
<iframe class="frm2 frame" id="pdf-but2"
src="https://file-examples-com.github.io/uploads/2017/10/file-sample_150kB.pdf">
</iframe>
<iframe class="frm3 frame" id="pdf-but3"
src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Resume.pdf">
</iframe>
</div>
</div>
</body>
</html>
Edge 浏览器中的输出：
此外，您可以尝试根据自己的要求修改代码示例。
感谢您的理解。
【讨论】：
谢谢，它可以工作，但有一个问题：在超过一页的 pdf 上，当您向下滚动时，不会显示最后一页的底部。这是'lorem'按钮下的pdf的护理。因为该 pdf 在最后一页的底部没有文本，所以您没有注意到这种差异。如果您将其中一个 src="..." 替换为 src="freshmindsgroup.com/wp-content/uploads/2020/03/…" 您会注意到在第 2 页上它的底部有一个页码，而在我的版本中它显示（在 Chrome 和火狐）。 pdf 显示高度的问题变得更加明显 bij 增加了“这里只是一些文本”的行数。如果你复制 10 次，很明显 pdf 的最后一部分没有显示，等于 iframe 中的 heightdecrease。 您需要在.frame 类中设置height:92%; 来修复页面高度问题。我已经用修改后的代码版本更新了我的答案。你可以检查一下。如果您认为此建议可以帮助您解决原始问题，那么我建议您将有用的建议标记为对该主题的回答。感谢您的理解。以上是关于有没有办法让选项卡式 pdf 显示在 Edge 中工作？的主要内容，如果未能解决你的问题，请参考以下文章