如何使用pdf.js来渲染PDF文件?
我创建了一个html文件,内容如下index.html
<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);
});
});
但是当我将浏览器指向index.html时,pdf没有正确显示。 我希望用户能够在他的电脑上选择一个pdf文件并在浏览器窗口中显示该pdf。
在使用file:
protocol而不是http:
或https:
时,看起来像是遇到了这个问题。 在不同的协议之间有不同的安全考虑。
以下是关于在本地文件中使用XMLHttpRequest
的博客文章,以及关于Mozilla Firefox票据的讨论。
项目中有几张票(包括这一张和这一张)可能会提供指针。 这张票的评论说:
典型的pdf.js用例需要使用Web服务器和现代HTML5浏览器。
我建议解决您的问题,您只需通过Web服务器运行此协议即可使用http
协议。 Nginx和Apache很容易安装和设置。
如果这样做不起作用,那么如果上述步骤不起作用,则为您的系统生成pdf.js和pdf.worker.js。
链接地址: http://www.djcxy.com/p/78399.html