在同一选项卡中打开 PDF 完整窗口大小 - Web Dev答案

【问题标题】：Open PDF Full Window Size In The Same Tab - Web Dev在同一选项卡中打开 PDF 完整窗口大小 - Web Dev
【发布时间】：2017-09-02 08:08:45
【问题描述】：

我是 Web 开发的新手，我想在当前浏览器选项卡中以全窗口大小打开 PDF。我尝试使用 HTML object 和 data 我的 PDF 路径。然后在 CSS 中我说width:100%; height:100%;。这最终只显示 100% 的宽度和小得多的高度，我该如何解决？

【问题讨论】：

标签： javascript html css pdf web

【解决方案1】：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        embed {
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
    <a href="#" onclick="launchFullscreen(document.documentElement);">PDF</a>
</body>
    <script>
        function launchFullscreen(element) {         
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            }
            document.body.style.height = "100vh";
            document.body.style.overflow = "hidden";
            document.body.innerHTML = '<embed src="sys.pdf" />';
        }
    </script>
</html>

要在当前选项卡中打开某些内容，您可以使用锚标记的目标属性，例如：

<a href="name.pdf" target="_self">PDF</a>

要强制浏览器以全屏模式打开页面，您可以使用 Fullscreen API，如下文所述：https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

您可以在此处找到代码示例和一些演示：https://davidwalsh.name/fullscreen

更新：

检查代码 sn-p。您只需将第 30 行的 embed 标签的 src 属性值更改为您的 pdf 路径。

更新2：

要调整浏览器窗口的大小，您可以调用risezeTo() 函数。但是，它有几个限制，在那里描述（带有示例）：https://developer.mozilla.org/en-US/docs/Web/API/Window/resizeTo。

简单地说：调整窗口大小，即使在浏览器中打开一个选项卡 - 并非所有浏览器都允许。在某些浏览器中，只有当前选项卡是唯一的选项卡时，您才能执行此操作。在其他情况下，你甚至不能这样做。但是，您可以使用具有特定宽度和高度的 window.open() 打开一个新窗口，并在其中加载您的 pdf 文件。文档和示例在那里：https://developer.mozilla.org/en-US/docs/Web/API/Window/open

【讨论】：

您好，感谢您的回答，但这不是我要找的：您的代码在新选项卡中而不是在同一选项卡中打开 PDF，您知道如何解决吗？跨度>
我想你误会了：我不想全屏打开文档，而是以全浏览器窗口大小打开，抱歉让您久等了
是的，我误会了。 :) 我已经更新了帖子，请查看。
对不起，我一定用错了词，我会尽力解释清楚：当我点击网站中的链接时，我想在同一个选项卡中打开 pdf，我想要pdf填满整个网页
如果是这样，您可以只使用 PDF，其中 href 等于您的 pdf 路径，并且 target="_self"表示该链接将在同一选项卡中打开。