Zoom to fit: PDF Embedded in HTML

前端 未结 6 1369
不知归路
不知归路 2020-11-29 16:28

I am embedding a local pdf file into a simple webpage and I am looking to set the initial zoom to fit to the object size. Here is what I tried but it is not affecting the zo

相关标签:
6条回答
  • 2020-11-29 16:51

    Bit late response to this question, however I do have something to add that might be useful for others.

    If you make use of an iFrame and set the pdf file path to the src, it will load zoomed out to 100%, which the equivalence of FitH

    0 讨论(0)
  • 2020-11-29 16:55

    For me this worked(I wanted to zoom in since the container of my pdf was small):

        <embed src="filename.pdf#page=1&zoom=300" width="575" height="500">
    
    0 讨论(0)
  • 2020-11-29 16:55

    Use iframe tag do display pdf file with zoom fit

    <iframe src="filename.pdf" width="" height="" border="0"></iframe>
    
    0 讨论(0)
  • 2020-11-29 16:59

    just in case someone need it, in firefox for me it work like this

    <iframe src="filename.pdf#zoom=FitH" style="position:absolute;right:0; top:0; bottom:0; width:100%;"></iframe>
    
    0 讨论(0)
  • 2020-11-29 17:01

    Bit of a late response but I noticed that this information can be hard to find and haven't found the answer on SO, so here it is.

    Try a differnt parameter #view=FitH to force it to fit in the horzontal space and also you need to start the querystring off with a # rather than an & making it:

    filename.pdf#view=FitH
    

    What I've noticed it is that this will work if adobe reader is embedded in the browser but chrome will use it's own version of the reader and won't respond in the same way. In my own case, the chrome browser zoomed to fit width by default, so no problem , but Internet Explorer needed the above parameters to ensure the link always opened the pdf page with the correct view setting.

    For a full list of available parameters see this doc

    EDIT: (lazy mode on)

    0 讨论(0)
  • 2020-11-29 17:08

    This method uses "object", it also has "embed". Either method works:

    <div id="pdf">
        <object id="pdf_content" width="100%" height="1500px" type="application/pdf" trusted="yes" application="yes" title="Assembly" data="Assembly.pdf?#zoom=100&scrollbar=1&toolbar=1&navpanes=1">
        <!-- <embed src="Assembly.pdf" width="100%" height="100%" type="application/x-pdf" trusted="yes" application="yes" title="Assembly">
        </embed> -->
        <p>System Error - This PDF cannot be displayed, please contact IT.</p>
        </object>
    </div>
    
    0 讨论(0)
提交回复
热议问题