如何在 Chrome 和 Firefox PDF 查看器上添加手工具（抓取页面并拖动）功能？
Posted
技术标签:
【中文标题】如何在 Chrome 和 Firefox PDF 查看器上添加手工具（抓取页面并拖动）功能？【英文标题】：How to add a hand tool (grab the page and drag) function on Chrome and Firefox PDF viewer? 【发布时间】：2013-08-23 11:26:05 【问题描述】：澄清一下，hand tool是一个用户点击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>
【问题讨论】：
欢迎使用其他jquery拖拽插件替换原来的。 你能为当前的工作模型创建一个小提琴吗.. 你的意思是说你想移动包含PDF或PDF页面的对象？ 请在jsfiddle.net上为您的脚本创建小提琴以用于演示目的 Nitpick: grab-to-pan.js 不是一个 jQuery 插件，而是用纯 JavaScript 编写的。我会在某个时候将它添加到 PDF.js（参见github.com/mozilla/pdf.js/issues/2957）。 【参考方案1】：如果您想允许用户使用他们配置的任何 PDF 查看器，您不能向该查看器添加功能。如果要控制查看器的操作，需要自己提供。这在很大程度上是一种非此即彼的情况。试图将两者混为一谈不会有好的结果。 Google 和 Mozilla 可以随意更改其 PDF 查看器，而无需考虑您的网站。
如上所述，您可以按照https://github.com/mozilla/pdf.js/wiki/Setup-pdf.js-in-a-website 的说明将 PDF.js 嵌入到您的网站中。我不知道这个查看器的 PDF 支持是否足以满足您的场景，但您当然可以对其进行测试。由于 PDF.js 代码托管在您的网站上，因此在您的控制之下，您可以根据需要对其进行编辑。
【讨论】：
【参考方案2】：我不认为你可以。 pdf 作为嵌入对象加载。 假设您正在开发一个 Web 应用程序，您可以使用 pdf.js 通过您自己的 JavaScript 或使用它自己的查看器来加载/查看 pdf 文档。这样您就不必担心加载 pdf 文档的浏览器实现，并且您可以根据您的要求摆弄查看器。
希望这会有所帮助。
【讨论】：
谢谢。但是如何将 pdf .js 设置为所有访问者浏览器的默认查看器？到目前为止，我尝试在 chrome 上使用 PDF.js 仅在安装扩展插件并单击 pdf 链接时才有效。谢谢 正如我所说，你不能。 PDF.js 不是一个应用程序，它可以作为 firefox 和 chrome 的扩展/插件使用。 Plus 作为开发人员的库。以上是关于如何在 Chrome 和 Firefox PDF 查看器上添加手工具（抓取页面并拖动）功能？的主要内容，如果未能解决你的问题，请参考以下文章
程序员如何制作优美的免费PDF简历 30分钟 教你(程序员)使用 "五百丁" 制作简历免费下载为PDF(需要掌握常用chrome,firefox等的调试工具)
带有 Excel 的 Datatables TableTools，pdf 导出功能不适用于 firefox，但只能在 Chrome 中使用
如何在 Chrome 或 Firefox 中打印特定的 HTML 元素而不是整个页面？