Menu
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>
350
Go to Options > Applications, then find the listing for Portable Document Format (PDF). Under the Action column, you'll see that it's set for Preview in Firefox. Click the drop-down list to select an alternate PDF viewer. You can also choose to save PDF files by default when you click on them, rather than opening them.
Firefox includes a built-in PDF viewer to display PDF files inside the browser window.
Chosen solution That means that the file is still a PDF file, but that Firefox is just the default reader in Windows. You can press the Change... button on that window and select Acrobat as the reader and that should set the default reader back to Acrobat.
If you want to allow the user to use whatever PDF viewer they have configured, you cannot add functions to that viewer. If you want to control the operation of the viewer, you need to provide it yourself. This is very much an either/or situation. Attempting to mix the two will not lead to good results. Google and Mozilla are free to change their PDF viewers without giving any thought whatsoever to your site.
As mentioned above, you can embed PDF.js in your web site, per the instructions at https://github.com/mozilla/pdf.js/wiki/Setup-pdf.js-in-a-website. I don't know whether this viewer's PDF support is good enough for your scenario, but you can certainly test it out. Since the PDF.js code is hosted on your site and thus under your control, you may be able to edit it as you see fit.
106
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.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
