如何在模态窗口中显示 pdf？ [关闭]
Posted
技术标签:
【中文标题】如何在模态窗口中显示 pdf？ [关闭]【英文标题】：How to display a pdf in a modal window? [closed] 【发布时间】：2012-10-29 15:11:54 【问题描述】：我有一个模式窗口，其中包含一个锚文本。当我单击此链接时，它必须调用位于其他地方的 pdf 并将其显示在弹出窗口中。我该怎么做？
请帮忙。
【问题讨论】：
模态窗口是什么意思？ 模式窗口是浏览器模式窗口。它会弹出，当单击一个按钮时，它将有一个链接。单击该选项时，必须弹出一个pdf弹出窗口。 您可以使用 iframe 显示您的 pdf，但它只会显示插件是否可用于浏览器。另一种选择是使用 js 库 嗨 Rajesh，你说的 js 库是什么？有没有关于如何实现这种功能的例子？ 查看jspdf 和pdfjs。如果您至少分享模态窗口的html/CSS 以帮助那些试图帮助您的人，那就太好了。
【参考方案1】：
您可以在模态表单中使用 iframe，因此当您打开 iframe 窗口时，它会在您的模态表单中打开。我希望你用一些 url 渲染到一些 pdf 打开器，如果你有 pdf 内容，只需以模态形式将内容添加到 div 中。
【讨论】：
如果你想要 vanilla js，试试这个：jsfiddle.net/74udp5yz/1。【参考方案2】：你可以看看这个库：https://github.com/mozilla/pdf.js 它在 Web/HTML 页面中呈现 PDF 文档
您也可以使用 Flash 将文档嵌入到任何 HTML 页面中：
<object data="your_file.pdf#view=Fit" type="application/pdf" >
<p>
It appears your Web browser is not configured to display PDF files. No worries, just <a href="your_file.pdf">click here to download the PDF file.</a>
</p>
</object>
【讨论】：
现在在 2019 年，如果您这样做，大多数浏览器似乎只会显示 PDF 内联。我没有尝试使用里面的警告，但我的大多数浏览器都只显示 PDF。【参考方案3】：您可以使用 jQuery UI 对话框来执行此操作，您可以从这里下载 JQuery ui Download JQueryUI
在<head>标签中首先包含这些脚本
<link href="css/smoothness/jquery-ui-1.9.0.custom.css" rel="stylesheet">
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script src="js/jquery-ui-1.9.0.custom.js"></script>
JQuery 代码
<script language="javascript" type="text/javascript">
$(document).ready(function()
$('#trigger').click(function()
$("#dialog").dialog();
);
);
</script>
<body> 标记内的 HTML 代码。使用 iframe 加载里面的 pdf 文件
<a href="#" id="trigger">this link</a>
<div id="dialog" style="display:none">
<div>
<iframe src="yourpdffile.pdf"></iframe>
</div>
</div>
【讨论】：
赞成，看起来不错。试试看，Tx 我已经测试并发布了它。希望对你有帮助。 它在大多数现代浏览器中都能完美运行，除了 safari。在 safari 中，当关闭模型窗口时，它不会关闭 iframe 本身。有什么想法吗？ @Swarne27 - 如何在编辑模式下打开 pdf，然后在 javascript 中保存我的编辑。 请注意，该行为取决于浏览器的设置。例如，默认情况下，Firefox 将下载文档并显示一个空白框架，而 Chrome 将按预期在框架内预览文档。不过，这些设置可以更新。【参考方案4】：您可以在模态标记中包含一个 iframe，并将其 src 属性作为指向您的 pdf 的链接。点击链接后，您可以显示此模式标记。
【讨论】：
Darshan，你能给我任何示例代码吗？这将有助于我理解它。以上是关于如何在模态窗口中显示 pdf？ [关闭]的主要内容，如果未能解决你的问题，请参考以下文章