javascript - pdf.js 不加载 pdf 文件
问题描述
我对 pdf.js 很陌生,可能会犯一些基本错误。我正在尝试复制此处提供的“带有文档加载错误处理的 Hello World”示例:
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”加载失败</p>
2) TypeError: pdfjsLib 未定义
我知道我是这里的初学者,但是请那些付出了这么多努力来创建它的人写几行关于如何为像我这样的初学者使用它的东西会不会太过分了?无论如何,如果有人可以帮助解决我确信是一个非常基本的问题,将不胜感激。
谢谢
解决方案
大多数这些问题是由于您通过打开一个 html 文件来运行您的测试,因此浏览器使用file://
而不是http://
or https://
。
在您的情况下解决问题的快速“hack”是在您的测试 html 文件中插入<base href="https://mozilla.github.io">
(HTML 基本标记)head
(我使用了给定的示例,在空白 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>
推荐阅读
- javascript - 为什么在发布请求离开 div 后会检索值?
- centos - 如何使用 YUM 在 CentOS 中安装多个版本的兼容软件包
- css - 如何让div大时在左边,小时在底部?
- java - 如何使用 shell 脚本运行 jar 并等待其完成然后执行其他任务
- unity3d - Unity AR Foundation 对象锚点问题
- html - 为什么调整大小后flex中的`text-align:center`会破坏布局?
- java - 给定Java中的两个日期startTime和EndTime,每月拆分大块的最佳解决方案是什么?
- android - 一个Activity可以嵌套多少个Layout?
- spring - 在 IntelliJ 中找不到应用程序服务器库
- sharepoint - 从 Sharepoint 数据库中提取 Sharepoint 站点信息