How to add a hand tool (grab the page and drag) function on Chrome and Firefox PDF viewer?

StackOverflow https://stackoverflow.com/questions/18351521

Domanda

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

  1. 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.

  2. 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>
È stato utile?

Soluzione

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.

Altri suggerimenti

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.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top