javascript - 本地安装的 PDF.JS 不呈现
问题描述
当尝试从 npm 安装的 pdfjs 使用 PDF.JS 时,不会在控制台上显示任何错误的情况下呈现 pdf。
使用在线资源(例如//mozilla.github.io/pdf.js/build/pdf.worker.js
)时,可以很好地呈现 PDF。
这是我正在使用的代码,几乎直接取自这个例子:
<script type="text/javascript" src="node_modules/pdfjs-dist/build/pdf.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<h1>PDF.js 'Hello, world!' example</h1>
<canvas id="the-canvas"></canvas>
<script>
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 = 'node_modules/pdfjs-dist/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>
解决方案
我不确定您在实现上述代码时到底遇到了什么错误。更具体地说 - 浏览器中的控制台错误。
我正在以与您相同的方式实施,即在本地实施,但不使用节点模块。我从 PDFJS 站点下载了最新的 dist 文件夹 - https://mozilla.github.io/pdf.js/
我进行了以下更改,以便在演示中使用代码
1)从https://mozilla.github.io/pdf.js/build/pdf.js复制内容并保存到JS文件pdf.js中
2) 在顶部的 HTML 页面中包含文件
<script src="pdfjs-2.2.228-dist/build"></script>
<script src="pdf.js"></script>
这里 pdfjs-2.2.228-dist 是从站点下载的文件夹。
3)在脚本中注释了pdfjsLib的赋值和声明
// Loaded via <script> tag, create shortcut to access PDF.js exports.
//var pdfjsLib = window['pdfjs-dist/build/pdf'];
4) workerSrc url 通过附加 http 修改
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = 'http://mozilla.github.io/pdf.js/build/pdf.worker.js';
我还没有尝试过,但是将 url 更改为路径pdfjs-2.2.228-dist/build/pdf.worker.js
也应该可以。
希望这对您有所帮助!
推荐阅读
- python - pandas to_csv 将'''、'"'和''转换为'’s'、'â€'、'Â'
- r - 迭代地将变量添加到 R 中的 lm() 函数?
- java - 从包含值的excel文件中获取一行
- python - 将二维数组转换为 [ [ x0 y0 ] [x1 y1] [x2 y2] ] 形式
- assembly - 从屏幕位置获取字符并将其放入字符串中(不起作用)
- jquery - Jquery 数据表排序问题 yyyy-MMMM
- c++ - C++11 多线程生产者/消费者程序挂起
- mongodb - 如果 MongoDB 中的搜索字符串为空,则正则表达式搜索不应返回任何内容
- prometheus - Prometheus 的黑盒导出器中的 3 个 ICMP 阶段是什么意思?
- apache - 如何修复 SimpleSAMLphp“url 不允许”错误