PDF scaling inside iframe when button is clicked

Question

I want to increase the pdf file in the iframe on the + button, click and zoom out - here is my design and C #. The file specified in src is bogus, and I load the actual file when the page loads.

any approach is suitable for me, be it JavaScript, Css, jQuery, serveride .. 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 servers:

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

Answer 1

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

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

From there, you can increase / decrease the size of the Canvas element, basically redraw the scaled versions of your PDF file on the Canvas element. Be careful not to scale the canvas, as this will cause your PDF to look jagged. A simple redraw of the PDF will work fine.