Html 如何在Chrome和Firefox PDF viewer上添加手动工具（抓取页面并拖动）功能？
为了说明这一点，手动工具是一种用户点击pdf并四处拖动的功能，用于替代滚动条导航 问题是，默认情况下，Chrome和Firefox pdf查看器没有该功能，我希望允许用户拖动页面 解决方法是使用JavaScript库（在我的例子中是抓取平移）和嵌入对象（PDF查看器）。当我最大化pdf的大小时，用户拖动嵌入对象 我遇到的问题是Html 如何在Chrome和Firefox PDF viewer上添加手动工具（抓取页面并拖动）功能？,html,css,pdf,web-applications,pdf.js,Html,Css,Pdf,Web Applications,Pdf.js,为了说明这一点，手动工具是一种用户点击pdf并四处拖动的功能，用于替代滚动条导航 问题是，默认情况下，Chrome和Firefox pdf查看器没有该功能，我希望允许用户拖动页面 解决方法是使用JavaScript库（在我的例子中是抓取平移）和嵌入对象（PDF查看器）。当我最大化pdf的大小时，用户拖动嵌入对象 我遇到的问题是 使用Chrome/Firefox时，PDF内容不适合页面，但默认情况下会自动调整大小，即使我使用iframe设置了Adobe PDF open参数 JavaScript代
<!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>
Grab-to-pan.js演示
* {
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
html，正文{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
.可滚动{
溢出：自动；
宽度：100%；
身高：100%；
背景色：#EEE；
}
#动物保护{
溢出：可见；
宽度：100%；
身高：150%；
}
启动抓取平移
PDF无法显示
document.getElementById（'activate-g2p'）。onchange=function（）{
如果（选中此项）g2p.activate（）；
else g2p.deactivate（）；
};
var scrollableContainer=document.getElementById（'scrollable-container'）；
var g2p=新抓地盘({
元素：scrollableContainer
});
g2p.activate（）；
假设您正在开发一个web应用程序，您可以使用pdf.js来加载/查看pdf文档，可以使用自己的JavaScript，也可以使用自己的查看器。这样，您就不必担心加载pdf文档的浏览器实现，并且您可以根据自己的需求摆弄查看器
希望这有帮助。如果您想允许用户使用他们配置的任何PDF查看器，您不能向该查看器添加函数。如果要控制查看器的操作，需要自己提供。这在很大程度上是一种非此即彼的情况。试图将两者混为一谈不会带来好的结果。谷歌和Mozilla可以自由地更改其PDF查看器，而无需考虑您的网站
如上所述，您可以按照中的说明将PDF.js嵌入到您的网站中。我不知道这个查看器的PDF支持对于您的场景是否足够好，但您肯定可以测试它。由于PDF.js代码托管在您的网站上，因此在您的控制下，您可以根据需要对其进行编辑。谢谢。但是如何将pdf.js设置为所有Vistior浏览器的默认查看器？到目前为止，我尝试在chrome上使用PDF.js，但只有在安装了扩展插件并点击PDF链接时才有效。谢谢我说过，你不能。PDF.js不是一个应用程序，它可以作为firefox和chrome的扩展/插件。Plus作为开发人员的库。欢迎使用其他jquery拖动插件来替换原来的插件。你能为当前工作模型创建一个fiddle吗..你的意思是说你想移动包含PDF或PDF页面的对象吗？请为你的脚本创建fiddle，用于演示挑剔：不是jquery插件，但是是用纯JavaScript编写的。我将在某个时候将其添加到PDF.js（请参阅）。