如何在Chrome和Firefox PDF查看器中添加手形工具(抓取页面并拖动)功能？

Question

如何在Chrome和Firefox PDF查看器中添加手形工具(抓取页面并拖动)功能？

use*_*104 12 html css pdf web-applications pdf.js

为了澄清,手工工具是用户点击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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Asa*_*lik 6

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

希望这可以帮助.

归档时间：	12 年，4 月前
查看次数：	6266 次
最近记录：	12 年，3 月前