Question

当尝试从npm安装的pdfjs中使用PDF.JS时，不会在未向控制台显示任何错误的情况下渲染pdf。

使用在线资源（例如//mozilla.github.io/pdf.js/build/pdf.worker.js）时，可以很好地呈现PDF。

这是我正在使用的代码，几乎直接取自this example：

<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的远程版本进行的

这是通过本地（npm）版本进行的

Answer 1

我不确定在实现上述代码时遇到了什么错误。更具体地说-浏览器中的控制台错误。

我在本地实现了与您相同的方式，但是没有使用节点模块。我已经从PDFJS网站-https://mozilla.github.io/pdf.js/

下载了最新的dist文件夹。

为了使代码在演示中正常工作，我进行了以下更改

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）通过在其后面附加http来修改workerSrc网址

// 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也应该可行。

希望这对您有所帮助！

Answer 2

如果您可以访问HTML，则可以直接在主体部分中嵌入此代码，而不是通过js脚本来实现，以显示this文章中讨论的用户友好的pdf查看器。

<iframe
    src="path-to-viewer-inside-web-folder/viewer.html?file=path-to-pdf-file/test.pdf"
    width="800px"
    height="600px"
    style="border: none;" />

本地安装的PDF.JS无法呈现

2 个答案: