Zooming a PDF inside an iframe upon Button click

Question

I want to zoom in the pdf file in an iframe on + button click and zoom out on - here is my design and c#. File given in src is a dummy one and i am loading the actual file at onload of the page.

any approach is fine for me whether it be JavaScript, Css, Jquery, serverside.. please help.. thanks in advance.

 <div style="padding-bottom: 5px; margin-top:1%; width:18%; float:left; text-align:right;">  
        <asp:Button ID="ZoomIn" Text="+" runat="server" />
        <asp:Button ID="ZoomOut" Text="-" runat="server" />
 </div>
    <div id="Container" style="float:left; width:100%; text-align: center; padding-bottom: 5px;">
        <iframe class="Zoomer" id="iFmManl" runat="server" src="~\sample.pdf" width="100%" height="900px"
            style="border: 0px inset black; margin-left: 0px;" title="Domain Dictionary"></iframe>
    </div>
</div>

onload on serverside:

protected void Page_Load(object sender, EventArgs e)
{
    iFmManl.Attributes["src"] = FileName + "#toolbar=0&navpanes=0&view=Fit";
}

score 0 · Accepted Answer · edited May 23 '17 at 12:22

Draw it on an HTML5 canvas element, and redraw at each zoom level.

You can can easily draw your PDF on a Canvas element. The answer here and pdf.js are pretty straightforward to use for this.

From there you can zoom-in/zoom-out the Canvas element, essentially re-drawing scaled versions of your PDF on your Canvas element. Be careful not to scale the Canvas itself since this will result in your PDF looking pixelated. Simply redrawing the PDF will work just fine.

Zooming a PDF inside an iframe upon Button click

1 Answers1