13

澄清一下，手工具是用户点击pdf并拖动的功能，用于代替滚动条导航。

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

一种解决方法是使用带有嵌入对象（PDF 查看器）的 JavaScript 库（在我的例子中是Grab to Pan https://github.com/Rob--W/grab-to-pan.js ）。当我最大化 pdf 的大小并且用户拖动嵌入对象时。

我遇到的问题是

  1. 使用 Chrome / Firefox 时，PDF 内容不适合页面，但默认情况下会自动调整大小，即使我使用 iframe 设置了 Adob​​e PDF 打开参数。

  2. 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>
4

2 回答 2

6

我不认为你可以。pdf 作为嵌入对象加载。
假设您正在开发一个 Web 应用程序，您可以使用 pdf.js 通过您自己的 JavaScript 或使用它自己的查看器来加载/查看 pdf 文档。这样您就不必担心加载 pdf 文档的浏览器实现，并且您可以根据您的要求摆弄查看器。

希望这可以帮助。

于 2013-08-21T18:56:51.330 回答
3

如果您想允许用户使用他们配置的任何 PDF 查看器，则不能向该查看器添加功能。如果要控制查看器的操作，需要自己提供。这在很大程度上是一种非此即彼的情况。试图将两者混为一谈不会有好的结果。Google 和 Mozilla 可以随意更改其 PDF 查看器，而无需考虑您的网站。

如上所述，您可以按照https://github.com/mozilla/pdf.js/wiki/Setup-pdf.js-in-a-website中的说明将 PDF.js 嵌入您的网站。我不知道这个查看器的 PDF 支持是否足以满足您的场景，但您当然可以对其进行测试。由于 PDF.js 代码托管在您的网站上，因此在您的控制之下，您可以根据需要对其进行编辑。

于 2013-09-02T18:59:37.417 回答