Question

我的服务器上有一个包含pdf文件的目录我想根据他们的帐户类型给我的用户提供查看pdf文件的选项，即：基本用户只能看到10页的pdf文件，高级帐户可以查看pdf文件的完整内容。
我需要知道如何限制pdf.js只渲染有限数量的pdf文件？

搜索pdf.js github存储库我找到了这个例子 https://github.com/mozilla/pdf.js/blob/master/examples/learning/prevnext.html
并尝试在我的申请中使用它，如下所示：
正如您所看到的，我通过名为 $ file_path 的变量传递pdf路径，并使用 $ maximumPage 变量传递最大页数。

@extends('master')
@section('head')
<meta charset="UTF-8">
<title>Previous/Next example</title>
@stop
@section('content')
<h1>'Previous/Next' example</h1>

<div>
<button id="prev">Previous</button>
<button id="next">Next</button>
&nbsp; &nbsp;
<span>Page: <span id="page_num"></span> / <span id="page_count"></span></span> 
</div>

<div>
<canvas id="the-canvas" style="border:1px solid black"></canvas>
</div>

<!-- for legacy browsers add compatibility.js -->
<!--<script src="../compatibility.js"></script>-->

<script src="{{asset('js/pdfjs/src/pdf.js')}}"></script>

<script id="script">
//
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
//
//
 var url = '{{asset($file_path)}}';

//
// Disable workers to avoid yet another cross-origin issue (workers need
// the URL of the script to be loaded, and dynamically loading a cross-origin
// script does not work).
//
// PDFJS.disableWorker = true;

//
// In cases when the pdf.worker.js is located at the different folder than the
// pdf.js's one, or the pdf.js is executed via eval(), the workerSrc property
// shall be specified.
//
// PDFJS.workerSrc = '../../build/pdf.worker.js';

var pdfDoc = null,
        pageNum = 1,
        pageRendering = false,
        pageNumPending = null,
        scale = 0.8,
        canvas = document.getElementById('the-canvas'),
        ctx = canvas.getContext('2d');

/**
 * Get page info from document, resize canvas accordingly, and render page.
 * @param num Page number.
 */
function renderPage(num) {
    pageRendering = true;
    // Using promise to fetch the page
    pdfDoc.getPage(num).then(function(page) {
        var viewport = page.getViewport(scale);
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // Render PDF page into canvas context
        var renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };
        var renderTask = page.render(renderContext);

        // Wait for rendering to finish
        renderTask.promise.then(function () {
            pageRendering = false;
            if (pageNumPending !== null) {
                // New page rendering is pending
                renderPage(pageNumPending);
                pageNumPending = null;
            }
        });
    });

    // Update page counters
    document.getElementById('page_num').textContent = pageNum;
}

/**
 * If another page rendering in progress, waits until the rendering is
 * finised. Otherwise, executes rendering immediately.
 */
function queueRenderPage(num) {
    if (pageRendering) {
        pageNumPending = num;
    } else {
        renderPage(num);
    }
}

/**
 * Displays previous page.
 */
function onPrevPage() {
    if (pageNum <= 1) {
        return;
    }
    pageNum--;
    queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);

/**
 * Displays next page.
 */
function onNextPage() {
    if (pageNum >= {{$maximumPages}}) {
        return;
    }
    pageNum++;
    queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);

/**
 * Asynchronously downloads PDF.
 */
PDFJS.getDocument(url).then(function (pdfDoc_) {
    pdfDoc = pdfDoc_;
    document.getElementById('page_count').textContent = pdfDoc.numPages;

    // Initial/first page rendering
    renderPage(pageNum);
});
</script>
@stop

问题在于它没有显示pdf，尽管路径被正确填充我应该提一下，我正在使用laravel框架，我是新手，所以我把pdf文件放到我的laravel应用程序的公共目录中。

以下是页面源代码以及运行应用程序后url获取的值：

var url = 'http://localhost:8000/pdf/books/Database Systems - Design, Implementation, and Management (9th Edition).pdf';

我真的很困惑，因为我无法查看pdf文件。
任何帮助将不胜感激。

我终于想到了我只需要取消注释PDFJS.workerSrc路径的问题，因为我的应用程序无法正确找到路径。取消注释以下行

// PDFJS.workerSrc = '../../build/pdf.worker.js';

到

    PDFJS.workerSrc = '{{ asset('js/build/pdf.worker.js') }}';

我现在可以在网页上看到我的pdf文件了。

如何限制pdf.js呈现pdf文件的有限页数？

0 个答案: