Question

我想放大iframe上的pdf文件+按钮点击并缩小 - 这是我的设计和c＃。在src中给出的文件是虚拟文件，我在页面的onload上加载实际文件。

无论是JavaScript，Css，Jquery还是服务器端，任何方法都适合我。请帮助..提前谢谢。

 <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";
}

Answer 1

在HTML5 canvas元素上绘制，并在每个缩放级别重绘。

您可以在Canvas元素上轻松绘制PDF。答案here和pdf.js非常简单易用。

从那里你可以放大/缩小Canvas元素，基本上是在Canvas元素上重新绘制PDF的缩放版本。注意不要缩放Canvas本身，因为这会导致PDF看起来像素化。只需重新绘制PDF就可以了。

在按钮上单击缩放iframe内的PDF

1 个答案: