在按钮单击时在 iframe 内缩放 PDF答案

【问题标题】：Zooming a PDF inside an iframe upon Button click在按钮单击时在 iframe 内缩放 PDF
【发布时间】：2015-02-28 13:51:37
【问题描述】：

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

任何方法对我来说都很好，无论是 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>

在服务器端加载：

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

【问题讨论】：

标签： javascript c# jquery pdf iframe

【解决方案1】：

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

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

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

【讨论】：