我们可以使用 Magnific Popup 插件查看 .pdf 文件吗？答案

【问题标题】：Can we use Magnific Popup plugin to view .pdf files?我们可以使用 Magnific Popup 插件查看 .pdf 文件吗？
【发布时间】：2014-05-28 09:44:48
【问题描述】：

我正在使用 Magnific Popup 插件来查看 .pdf 文件。如果文件是图像，它可以工作，但如果文件是 .pdf，如何实现这一点？以下是带有 pdf 文件链接的示例锚点。

<a href="https://test-qa.s3.amazonaws.com/34/239/expRepo/1785678479007_ProjectExpenseReport(Jan 1, 2014-Jan 24, 2014) (2).pdf?iframe=true&width=90%&height=100%" class="with-caption image-link" title="Click on image to enlarge/reduce it">Click here to open</a>

提前致谢。

【问题讨论】：

你为什么不把你的 pdf 转换成图像并显示图像呢？也许应该更简单
我的 pdf 文件可能包含更多页数。因此，如果用户单击提供的链接（例如 google docs），则要求在弹出窗口中加载它们。

标签： javascript jquery css magnific-popup

【解决方案1】：

尝试使用 iframe 进行放大弹出窗口？

$(document).ready(function() {
    $('.iframe-popup').magnificPopup({
        type: 'iframe'
    });
});

打开方式

<a class="iframe-popup" href="http://example.com/file.pdf">Open Iframe PDF</a>

【讨论】：

只要浏览器支持，Iframe 就适用于 PDF。 Chrome、Safari 和 Firefox 都包含原生 PDF 支持，但 IE 和 Edge 不支持，根据下表：en.wikipedia.org/wiki/Comparison_of_web_browsers
iframe 选项在带有 pdf 文件的 IE 和 Edge 中对我有用。 Edge 不显示花哨的“打印”或“保存”按钮，但可以通过右键单击下载文件。 IE 在 iframe 的底部显示按钮。它在其他浏览器中看起来仍然更好，但至少它在 IE/Edge 中可以工作
@sidvishnoi 如果浏览器不支持查看 pdf 文件或不是有效的 pdf 文件，我如何提供可下载链接？谢谢
通过使用这个：<a class="iframe-popup" href="http://example.com/file.pdf">Open Iframe PDF</a> ?