在 Bootstrap Accordion 中加载 PDF答案

【问题标题】：Load PDF inside a Bootstrap Accordion在 Bootstrap Accordion 中加载 PDF
【发布时间】：2017-02-20 12:58:40
【问题描述】：

我一直在尝试加载一些将在 Bootstrap 手风琴中显示的 PDF。问题是它们根据浏览器以许多不同的方式加载。我一直在尝试具有不同结果的 iframe 和 object html 标签，并且我在 Safari 中有一个巨大的流程，当我在面板中嵌入 PDF 时，手风琴功能完全中断。

所以我想我的问题是：为了使嵌入的 PDF 在 Chrome、Safari、IE11 和 Firefox 中工作，是否有任何关于交叉浏览的标准？

因为我需要这个在移动设备上工作，所以情况更糟。一些建议将不胜感激。

【问题讨论】：

看看 PDF.js。它将在不使用内置 PDF 查看器或浏览器插件的情况下呈现 PDF。这是我发现让 PDF 始终如一地呈现的唯一方法……如果不是完美的话……在主要浏览器中。我没有将此添加为答案，因为它实际上可能不适用于您的特定 PDF 文件。
我会试一试（看起来实施起来有点复杂），但是您认为 PDF.js 不适用于我的具体情况的具体原因是什么？谢谢！ @joelgeraci
PDF.js 没有实现完整的 PDF 规范。它适用于大多数内容，但如果您使用某些透明模式或其他高级颜色内容，您可能无法获得与从 Adobe Reader 获得的结果相同的结果。 PDF.js 真的超级简单。像这样的 URL 可以解决问题....mozilla.github.com/pdf.js/web/…
谢谢@joelgeraci 我只是想了解如何将它集成到我的应用程序中，我是否只需在我的 html 中添加 .js 文件然后拨打电话，我就可以了来自 json 文档的 pdf src。再次感谢您的反馈！
是的 - 这几乎就是您需要做的所有事情。看看他们的查看器示例。

标签： object pdf iframe

【解决方案1】：

使用“panel-body”类创建一个画布元素，并为其指定一个您选择的 id。然后将以下代码添加到您的文档就绪事件中。

PDFJS.getDocument('YOURPDF.pdf').then(function(pdf) {
    pdf.getPage(1).then(function(page) {
        var scale = 1;
        var viewport = page.getViewport(scale);
        var canvas = document.getElementById('pdfOne'); // The id of your canvas
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        var renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        page.render(renderContext);
    });
});

这将呈现第一页。您需要创建按钮让用户在文档中导航，但根据我提供的内容和示例，它应该很容易实现。

【讨论】：