javascript - 在同一选项卡中打开 PDF 全窗口大小 - Web Dev

标签 javascript html css pdf web

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

最佳答案

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

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

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

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

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

更新:

检查代码片段。您只需将第 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

关于javascript - 在同一选项卡中打开 PDF 全窗口大小 - Web Dev,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46011789/

相关文章:

css - -无法将 CSS 页面链接到 HTML

javascript - 我的 switch 语句直接转到 default 语句

javascript - Jquery 选择器在 Chrome 中不起作用?

html - 如何在使用 VUE CLI 3.x 时向加载程序添加新规则

jquery - 为位于另一个仅用于文本的 div 后面的 div 启用悬停 css 转换

javascript - 显示为 : none is always 0 的元素的 offsetTop 属性

html - 复选框宽度/高度不会因较新的浏览器而改变

php - 在页面中我有 for 循环函数吗?在 for($i=0;$i<=$max;$i++){ Size 查询中只从 mysql 数据库检索一行?

javascript - 在 JS 中创建的 SVG <image> 元素不显示

html - 移动设备上不需要的缩放