Question

我正面临一项具有挑战性的任务 - 创建一个滑块旋转木马绞盘将显示单页多页PDF的单独页面作为单独的幻灯片网页。查看下面的图片，了解它完成时的外观：

它必须看起来像普通文档，不应该有任何滚动条，工具栏，缩放按钮等。此外，该网站将托管在没有互联网的本地主机上，因此不能选择使用Google PDF Viewer等外部API。

截至目前，我看到了两种不同的方法：在每张幻灯片中嵌入PDF或将PDF转换为PNG以便稍后在幻灯片中显示。我目前在这两种方法中都遇到了一些障碍：

1）第一种方法 - 嵌入PDF

如果我在指定page参数的每张幻灯片中嵌入pdf会怎样？

我试过了：

a）平原嵌入

b）对象

我已将下一个参数#page=5&toolbar=0&navpanes=0&scrollbar=0&view=fit与pdf一起使用。

结果几乎相同：

Chrome不会缩放pdf并显示滚动条以及一些pdf查看器背景以及鼠标悬停时的一些缩放按钮
Firefox显示工具栏
即我和Safari都非常接近我需要的东西，但显示了一些深色的pdf viewer背景

是否有可能没有跨浏览器方式嵌入原始PDF以使其看起来像页面的一部分一样无缝？

2）第二种方法：将PDF转换为其他格式（尚未尝试过这些）

如果我将在服务器端转换PDF怎么办？

a）使用ImageMagick转换为PNG。下行 - 客户端必须在服务器上安装ImageMagic和Ghostview，如果可能的话我宁愿避免使用。

b）使用PHP SwfTools转换为SWF。不确定这是否会按预期实施，加上闪存支持正在下降，可能不是最好的方法。

那么我应该以哪种方式进行？我个人更愿意保持尽可能简单...... 有没有人遇到类似的问题，可以给我一个建议吗？

请帮忙！

Answer 1

您可以使用pdf.js

呈现您的pdf文件

<script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<script type="text/javascript">
function renderPDF(url, canvasContainer, options) {
    var options = options || { scale: 1 };

    function renderPage(page) {
        var viewport = page.getViewport(options.scale);
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var renderContext = {
          canvasContext: ctx,
          viewport: viewport
        };

        canvas.height = viewport.height;
        canvas.width = viewport.width;
        canvasContainer.appendChild(canvas);

        page.render(renderContext);
    }

    function renderPages(pdfDoc) {
        for(var num = 1; num <= pdfDoc.numPages; num++)
            pdfDoc.getPage(num).then(renderPage);
    }
    PDFJS.disableWorker = true;
    PDFJS.getDocument(url).then(renderPages);
}   
</script> 

<div id="holder"></div>

<script type="text/javascript">
renderPDF('sample.pdf', document.getElementById('holder'));
</script>

Answer 2

你实际上有第三个选项 - PDF.js - https://mozilla.github.io/pdf.js/

最简单的是将服务器端转换为PNG。嵌入旋转木马并不复杂，兼容性最高。最通用的可能是PDF.js.如果这是一个问题，使用Flash将会遗漏移动浏览器。

在网页上将PDF文件显示为Carousel，每页作为单独的幻灯片

2 个答案: