How to add a hand tool (grab the page and drag) function on Chrome and Firefox PDF viewer?
To clarify, hand tool is a function for user click on the pdf and dragging around , that is used to replace the scroll bar navigating .
The problem is, by default the Chrome and Firefox pdf viewer do not have that function and I would like allow the user to drag the page.
A workaround is to use a JavaScript library (Grab to Pan https://github.com/Rob--W/grab-to-pan.js in my case) with an embed object (PDF viewer). When I maximum the size of the pdf and user drag the embed object.
The problem I have encounter is
When using Chrome / Firefox, the PDF content do not fit to the page but auto resize by default even I have set the Adobe PDF open parameter, using iframe.
The JavaScript code seems conflict with the Firefox PDF viewer, it works smoothly on Chrome but not firefox.
Here is the source code, you may download the library from the link mention above and have a look. Don't forget to put a '1.pdf' along with the source file.
<!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>
Answer
I don't think you can. The pdf is loaded as a embedded object.
Assuming that you are developing a web application, you can use pdf.js to load/view pdf documents either with your own JavaScript or using its own viewer. This way you won't have to worry about browser implementation of loading pdf documents, and you can fiddle with the viewer as per your requirements.
Hope this helps.