javascript – 在网页上显示PDF文件作为Carousel,每页作为单独的幻灯片

2023年7月7日 167次阅读

我正面临一项具有挑战性的任务 – 创建一个滑块旋转木马绞盘将显示单页多页PDF的单独页面作为单独的幻灯片

网页.查看下面的图片,了解它完成时的外观：

《javascript – 在网页上显示PDF文件作为Carousel,每页作为单独的幻灯片》

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

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

1)第一种方法 – 嵌入PDF

如果我在每个指定页面参数的幻灯片中嵌入pdf怎么办？

我试过了：

a)平原嵌入

b)对象

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

结果几乎相同：

《javascript – 在网页上显示PDF文件作为Carousel,每页作为单独的幻灯片》

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

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

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

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

a)使用ImageMagick转换为PNG.缺点 – 客户端必须在服务器上安装ImageMagic和Ghostview,如果可能的话我宁愿避免使用.

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

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

请帮忙！

最佳答案 您可以使用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>
点赞