Question

我是网络开发的新手，我想在当前浏览器标签中以完整窗口大小打开PDF。我尝试使用HTML object作为data我的PDF路径。然后在CSS中我说width:100%; height:100%;。最终只显示100％的宽度和更小的高度，我该如何解决？

Answer 1

＆＃13;

<!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>

＆＃13;

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

<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

<强>更新

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

<强> UPDATE2：

要调整浏览器窗口的大小，您可以调用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全窗口大小 - Web开发

1 个答案: