html – 如何在Chrome和Firefox PDF查看器上添加手工具(抓住页面和拖动)功能？

为了澄清,手工具是用户点击pdf并拖动的功能,用于替换滚动条导航.

问题是,默认情况下,Chrome和Firefox pdf查看器没有这个功能,我希望允许用户拖动页面.

解决方法是使用嵌入对象(PDF查看器)使用JavaScript库(Grab to Pan https://github.com/Rob–W/grab-to-pan.js).当我最大化的大小的pdf和用户拖动嵌入对象.

我遇到的问题是

>当使用Chrome / Firefox时,PDF内容不适合页面,但默认情况下自动调整大小,即使我使用iframe设置了Adobe PDF打开参数.
> JavaScript代码似乎与Firefox PDF查看器冲突,它在Chrome上平滑运行,但不是Firefox.

这里是源代码,您可以从上面提到的链接中下载库,看看.不要忘了把一个“1.pdf”和源文件一起放在一起.

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Grab-to-pan.js demo</title>
<link rel="stylesheet" href="grab-to-pan.css" type="text/css">
<style>
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.scrollable {
    overflow: auto;
    width: 100%;
    height: 100%;
    background-color: #EEE;
}
#zoomPage {
    overflow:visible;
    width: 100%;
    height: 150%;
}
</style>
</head>
<body>
<label><input type="checkbox" id="activate-g2p" checked> Activate Grab to Pan</label>
<div class="scrollable" id="scrollable-container">
<object id = 'zoomPage' type='application/pdf' data= '1.pdf#zoom=page-fit'><p>The PDF can not display</p></object>
</div>
<script src="grab-to-pan.js"></script>
<script>
document.getElementById('activate-g2p').onchange = function() {
    if (this.checked) g2p.activate();
    else g2p.deactivate();
};

var scrollableContainer = document.getElementById('scrollable-container');
var g2p = new GrabToPan({
    element: scrollableContainer
});
g2p.activate();

</script>
</body>
</html>

解决方法

我不认为你可以.该pdf作为嵌入式对象加载.
假设您正在开发Web应用程序,您可以使用pdf.js加载/查看pdf文档,或者使用自己的JavaScript或使用自己的查看器.这样,您不必担心浏览器执行加载pdf文档,您可以根据您的要求与查看器混淆.

希望这可以帮助.

html – 如何在Chrome和Firefox PDF查看器上添加手工具(抓住页面和拖动)功能？

解决方法

相关推荐