gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 03:04:33 24 4
gpt4 key购买 nike

我是 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com