CODEWITHSUNDEEP
pdfgoogle-docs
Juan
Juan

Reputation: 479

how to open specific page on Google's docs viewer

I'm using google's docs viewer to show a pdf document in a html page and I would like to open the document starting on page 20 instead of 1 for example.

There's hardly any documentation about Google's docs viewer service. They say in its webpage https://docs.google.com/viewer that the service only accepts two parameters (url and embedded) but I've seen other parameters searching the web, like "a", "pagenumber", "v" and "attid", none of them did anything to me. I've tried to add #:0.page.19 at the end of my url (that's the id of the div containing page number 20 inside the body google creates) but it just ignores it or works in a random way.

Do you guys know how to tell google docs viewer to show the document starting on a specific page?

Upvotes: 24

Views: 51142

Answers (5)

user2319918
user2319918

Reputation: 11

Got it working in the imbed viewer

By changing the url with a timout function, this becous the pdf is not directly shown

$(window).load(function() {
    setTimeout(function() { $('.gde-frame').attr('src', 'https://docs.google.com/viewer?url=http://yourdomain.com/yourpdf.pdf&hl=nl&embedded=true#:0.page.15'); }, 1000);

});

Just copy the imbed url and add your hash for the page (#:0.page.15 > will go to page 15)

You might want to change the language to your own &hl=nl

and for the people how have to support ie8

if you use a boilerplate like this:

<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->

you can change the output of the link directly to the pdf like this,

if( $("html").hasClass("ie8") ) {


           $('#linkID').attr('href', 'http://yourdomai.com/yourpdf.pdf');


        };

the pdf will be shown in the pdf reader from IE

Upvotes: 1

Juan
Juan

Reputation: 479

I found a solution I'll post here just in case somebody is in the same situation.

Every page inside google's docs viewer iframe has an id like :0.page.X, being X the number of the page. Calling the service like this

<iframe id="iframe1" src="http://docs.google.com/gview?url=http://yourpdf&embedded=true#:0.page.20">

won't work (maybe because the pages ids are not yet created when the page is rendered?)

So you just have to add an onload attribute to the iframe:

<iframe id="iframe1" src="http://docs.google.com/gview?url=http://yourpdf&embedded=true" onload="javascript:this.contentWindow.location.hash=':0.page.20';">

and voilà, the iframe will automatically scroll down after loading.

Note that page indices are zero-based. If you want to view the 20th page of a document in the viewer, you would need use the parameter :0.page.19

Upvotes: 23

T.Todua
T.Todua

Reputation: 56351

I found these two ones :

1) just an Screenshot(Image) of specific page (without navigation):

https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true&a=bi&pagenumber=12

2) a link to specific page of PDF in IFRAME (with navigation):

<script>
var docURL='https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true';
var startPAGE=7;

document.write('<iframe id="iframe1" onload="javascript:go_to_page('+ startPAGE +')" src="https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true"width="600" height="400" ></iframe>');
function go_to_page(varr) { document.getElementById("iframe1").setAttribute("src", docURL + '#:0.page.'+ (varr-1) );}
</script>



p.s. then you can have on your website <a href="javascript:go_to_page('3');">go to page 3</a>

Upvotes: 4

FSaccilotto
FSaccilotto

Reputation: 656

For me this solution didn't work with the current version of google viewer. Link to specific page on Google Document Viewer on iPad helped me out. Use &a=bi&pagenumber=xx as additonal URL parameter.

Upvotes: 3

Dan
Dan

Reputation: 26

My PDF is 13 pages, but when I used hash: 0.page.13, it only jumped to page 10. I had to setTimeout and call the same function again:

Only needed to do that once per page load, then it seems to be synched properly. I am sure there is a more elegant solution:

var is_caught_up = false;
function pdf_go(page){
     $('pdf_frame').contentWindow.location.hash=':0.page.'+page;
     if (!is_caught_up){
         setTimeout('pdf_catchup('+page+')', 500);
     }
}

function pdf_catchup(page){
    $('pdf_frame').contentWindow.location.hash=':0.page.'+page;
     is_caught_up = true;
}

Upvotes: 0

Related Questions