将网页上的 PDF 文件显示为轮播，每页显示为单独的幻灯片

Posted 2023-03-13

【中文标题】将网页上的 PDF 文件显示为轮播，每页显示为单独的幻灯片

【英文标题】：Show PDF file on webpage as Carousel with each page as a separate slide

【发布时间】：2016-07-18 20:35:21

【问题描述】：

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

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

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

1) 第一种方法 - 嵌入 PDF

如果我将在每张幻灯片中嵌入 pdf 并指定 page 参数怎么办？

我试过了：

a) 普通嵌入

b) 对象

我已经使用了下一个参数#page=5&toolbar=0&navpanes=0&scrollbar=0&view=fitwith pdf。

结果几乎相同：

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

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

2) 第二种方法：将 PDF 转换为另一种格式（尚未尝试过）

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

a) 使用 ImageMagick 转换为 PNG。缺点 - 客户端必须在服务器上安装 ImageMagic 和可能的 Ghostview，如果可能的话，我希望避免使用。

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

那么我应该采取哪种方式？我个人更愿意让它尽可能简单...... 有没有人遇到过类似的问题，可以给我建议吗？

请帮忙！

【问题讨论】：

我最终选择了 ImageMagik 方式。

【参考方案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>  

【参考方案2】：

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

最简单的方法是将服务器端转换为 PNG。嵌入到轮播中不会有任何复杂性，并且兼容性会最高。最通用的可能是 PDF.js。如果担心的话，使用 Flash 会忽略移动浏览器。