Масштабирование PDF внутри iframe при нажатии кнопки

Я хочу увеличить pdf-файл в iframe on + нажмите кнопку и уменьшите масштаб - вот мой дизайн и c#. Файл, указанный в src, является фиктивным, и я загружаю фактический файл при загрузке страницы.

любой подход подходит для меня, будь то JavaScript, Css, Jquery, serverside.. пожалуйста помочь.. Спасибо заранее.

 <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 на стороне сервера:

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

1 ответов


нарисуйте его на HTML5 canvas элемент, и перерисовывать на каждом уровне масштабирования.

вы можете легко нарисовать свой PDF на элементе Canvas. Ответ здесь и в формате PDF.js довольно просты в использовании для этого.

оттуда вы можете увеличить / уменьшить масштаб элемента Canvas, по существу, перерисовывая масштабированные версии вашего PDF на вашем элементе Canvas. Будьте осторожны, чтобы не масштабировать холст сам, так как это приведет к тому, что ваш PDF-файл будет выглядеть пиксельным. Просто перерисовка PDF будет работать просто отлично.