如何使用pdf.js呈现pdf文件？

我创建了内容的HTML文件，如下 的index.html如何使用pdf.js呈现pdf文件？

<html> 
    <head> 
    <script type="text/javascript" src="./pdf.js"></script> 
    <script type="text/javascript" src="./hello.js"></script> 
    </head> 
    <body> 
    <canvas id="the-canvas" style="border:1px solid black;"/> 
    </body> 
</html>

hello.js与内容

PDFJS.disableWorker = true; 
var pf = PDFJS.getDocument('./helloworld.pdf') 
pf.then(function(pdf) { 
    pdf.getPage(1).then(function(page) { 
    var scale = 1.5; 
    var viewport = page.getViewport(scale); 

    // 
    // Prepare canvas using PDF page dimensions 
    // 
    var canvas = document.getElementById('the-canvas'); 
    var context = canvas.getContext('2d'); 
    canvas.height = viewport.height; 
    canvas.width = viewport.width; 

    // 
    // Render PDF page into canvas context 
    // 
    var renderContext = { 
     canvasContext: context, 
     viewport: viewport 
    }; 
    page.render(renderContext); 
    }); 
});

但PDF格式不正确时，我点了浏览器中显示到index.html。我希望用户能够在他的电脑上选择一个pdf文件，并在浏览器窗口中显示该pdf。

来源

2014-03-26 badanomaly

访问本地文件系统时可能会遇到问题。你如何提供/访问这个？ 'HTTP：'？ '文件：'？ – Joe

另外，我认为第3行的额外反拨是一个错字。 – Joe

@Joe我通过文件访问它：我不知道为什么它会通过http：或文件访问它：毕竟它是JavaScript并且应该以任何方式工作。 – badanomaly

使用file:协议而不是http:或https:时，看起来您正在碰到此问题。在不同的协议之间有不同的安全考虑。

这里的a blog post about using XMLHttpRequest with local files和discussion on a Mozilla Firefox ticket。

项目中有几张门票（包括this one和this one）可能会提供指针。 this ticket评论说：

典型的pdf.js用例需要使用Web服务器和现代HTML5浏览器。

我建议解决您的问题你只要运行这个通过Web服务器使用http协议。 Nginx和Apache很容易安装和设置。

如果上述步骤不起作用，那么您的系统使用this将无法生成pdf.js和pdf.worker.js。

来源

2014-03-26 14:14:08 Joe

创建了一个节点服务器，将helloworld.pdf和pdf.js放在静态文件中并提供index.html（http://paste.ubuntu.com/7157553/），但在送达的文件中仍然没有pdf。 http：// localhost：3000/javascripts/helloworld.pdf然而，它显示了pdf的意思，它可用。也许我在这里做错了什么。 – badanomaly

您是否检查过控制台中的错误？ – Joe

对于/javascripts/pdf.worker.js（http://paste.ubuntu.com/7157625/)在控制台中没有其他错误时为404。此外脚本标记被添加到index.html我不知道如何。我不认为运行服务器是解决方案，因为当我从github克隆pdf.js回购并在浏览器中打开helloworld示例时（https://github.com/mozilla/pdf.js/tree/master/examples/helloworld）它工作正常。 – badanomaly

如何使用pdf.js呈现pdf文件？

回答

相关问题