Question

我一直在尝试加载一些将在Bootstrap手风琴中显示的PDF。问题是它们以很多不同的方式加载，具体取决于浏览器。我一直在尝试使用不同结果的iframe和对象html标签，我在Safari中有很大的流量，当我在面板中嵌入PDF时手风琴功能完全破坏。

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

由于我需要在移动设备上工作，情况甚至更糟。一些建议将非常感激。

Answer 1

使用类＆＃34; panel-body＆＃34;创建一个canvas元素。并给它一个你选择的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);
    });
});

这将获得第一页呈现。您需要创建按钮以让用户浏览文档，但根据我提供的内容和样本，它应该很容易实现。

在Bootstrap手风琴中加载PDF

1 个答案: