yiyi17

  

  

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</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>
</body>
<script>
    var url = \'//cdn.mozilla.net/pdfjs/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);

            // 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.then(function () {
                console.log(\'Page rendered\');
            });
        });
    }, function (reason) {
        // PDF loading error
        console.error(reason);
    });
</script>

</html>

  官网的demo是个html实现的pdf页面http://mozilla.github.io/pdf.js/web/viewer.html  也可以学习参考

  参考http://mozilla.github.io/pdf.js/

分类:

技术点:

相关文章: