【原创】关于 PDFJS v2.0.943 踩过的坑

@[关于 PDFJS v2.0.943 踩过的坑]

by 宿哥

背景：公司之前的PDF是浏览器直接打开的，新入职的我需改造一下，公司暂时没引入nodejs，预计下个月启动

问题： 之前的版本网上的实现方法很简单，但如果同学你要用最新版本，是的，最新，那么可能不好用哦

实现：

1. 官网下载最新PDFJS
2. 加载核心组件

// 加载核心组件
<script type="text/javascript" src="resources/js/pdf/pdf.js"></script>
<script type="text/javascript" src="resources/js/pdf/pdf.worker.js"></script>

3. 之前做法（已不适用，你们可以百度到最多的实现）

// 请修改成你自己的路径
PDFJS.cMapUrl = baseUrl + '/resources/js/pdf/cmaps/';
PDFJS.cMapPacked = true;

4. 现在的做法

var obj = {
    url: g_url
    // 请修改成你自己的路径
    , cMapUrl: baseUrl + '/resources/js/pdf/cmaps/'
    , cMapPacked: true
};
var loadingTask = PDFJS.getDocument(obj);

5. 附上具体实现（初版官网实例简单改造）

var PDF = {
    clearPDF: function () {
        $('#st-fullscreen')[0].innerHTML = "";
    },
    renderPDF: function (pdf, pageNumber) {
        pdf.getPage(pageNumber).then(function (page) {
            console.log('Page loaded ' + pageNumber);

            var scale = 2.8; //随意设置的
            var viewport = page.getViewport(scale);

            // Prepare canvas using PDF page dimensions
            // var canvas = document.getElementById('the-canvas');
            var canvas = document.createElement('canvas');
            canvas.setAttribute("id", "the-canvas-" + pageNumber);
            var element = document.getElementById("st-fullscreen");
            element.appendChild(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');
            });
        });
    },
    showPDF : function () {
        this.clearPDF();

        if (g_url) {
            var obj = {
                url: g_url
                , cMapUrl: baseUrl + '/resources/js/pdf/cmaps/'
                , cMapPacked: true
            };
            var loadingTask = PDFJS.getDocument(obj);
            loadingTask.promise.then(function(pdf) {
                console.log('PDF loaded');
                var total = pdf._pdfInfo.numPages;
                for (var i = 0; i < total; i++) {
                    var pageNumber = i + 1;
                    // 如果你有node(vue ag...)环境，那么请用async/await替换掉
                    setTimeout(PDF.renderPDF(pdf, pageNumber), 10);
                }

            }, function (reason) {
                // PDF loading error
                console.error(reason);
            });
        }
    }
};

就到这里了，欢迎各位大神批评指正，如果能帮到你的话，我很开心。