pdf.js未加载pdf文件
我是pdf.js的新手，可能会犯一些基本的错误。我正在尝试复制这里提供的"Hello World with document load error provided“示例：
https://mozilla.github.io/pdf.js/examples/
我只是将代码复制并粘贴到新的html、css和js文件中，但不起作用。我尝试将pdfjsLib.getDocument( url )中的url更改为我计算机上的本地文件目录，即./pdf/test.pdf，但不起作用。我试着改变了
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>至
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/build/pdf.min.js"></script>但这也不管用。
我的控制台日志记录了两件事：
1)加载源为“file:///pdf.js/build/pdf.js”的失败
2) TypeError: pdfjsLib未定义
我知道我在这里是一个初学者，但是要求那些花了这么多精力来创建它的人写几行关于如何为像我这样的初学者使用它是不是太过分了？无论如何，如果有人能帮我解决一个非常基本的问题，我将不胜感激。
谢谢
回答 1
Stack Overflow用户
发布于 2020-01-01 10:45:50
大多数问题是由于您通过打开html文件来运行测试，因此浏览器使用的是file://而不是http://或https://。
在你的情况下解决这个问题的一个快速“技巧”是在你的测试html文件的head中插入<base href="https://mozilla.github.io"> (HTML base tag) (我使用了给定的例子，没有在空白的html文档中做任何修改)，这样你就可以欺骗浏览器，让它在Github上搜索文件。
测试这些代码和库的“正确”方法是安装一个本地web服务器，并从那里提供文件(通常作为http://localhost)。
下面是我创建的测试示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="Testing pdf.js">
<meta name="author" content="GramThanos">
<!-- hack code -->
<base href="https://mozilla.github.io">
</head>
<body>
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<h1>PDF.js 'Hello, world!' example</h1>
<canvas id="the-canvas"></canvas>
<script type="text/javascript">
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';
// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
// Asynchronous download of PDF
var loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
// Fetch the first page
var pageNumber = 1;
pdf.getPage(pageNumber).then(function(page) {
console.log('Page loaded');
var scale = 1.5;
var viewport = page.getViewport({scale: 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
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
console.log('Page rendered');
});
});
}, function (reason) {
// PDF loading error
console.error(reason);
});
</script>
</body>
</html>https://stackoverflow.com/questions/59549655
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号