bad*_*aly 7 html javascript html5 pdf.js
我创建了一个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:协议而不是http:or时遇到了这个问题https:。不同协议之间存在不同的安全考虑。
这是一篇关于使用XMLHttpRequest本地文件的博客文章，以及关于 Mozilla Firefox 票证的讨论。
项目上有几张票（包括这张和这张）可以提供指点。这张票的评论说：
典型的 pdf.js 用例需要使用 Web 服务器和现代 HTML5 浏览器。
我建议解决你的问题，你只需通过网络服务器运行它来使用该http协议。Nginx 和 Apache 易于安装和设置。
如果这不起作用，请使用此方法为您的系统生成 pdf.js 和 pdf.worker.js （如果上述步骤不起作用）。