前端预览PDF文件（使用PDFJS）

<embed src="https://www.lilnong.top/static/pdf/B-4-RxJS%E5%9C%A8React%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8-%E9%BE%99%E9%80%B8%E6%A5%A0_.pdf">

<iframe src="https://www.lilnong.top/static/pdf/B-4-RxJS%E5%9C%A8React%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8-%E9%BE%99%E9%80%B8%E6%A5%A0_.pdf"></iframe>

<iframe src="https://www.lilnong.top/static/project?file=https://www.lilnong.top/static/pdf/B-4-RxJS%E5%9C%A8React%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8-%E9%BE%99%E9%80%B8%E6%A5%A0_.pdf"></iframe>

<iframe src="https://www.lilnong.top/static/project/pdfjs-es5-2.5.207/web/viewer-1.html?file=https://www.lilnong.top/static/pdf/B-4-RxJS%E5%9C%A8React%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8-%E9%BE%99%E9%80%B8%E6%A5%A0_.pdf"></iframe>

(function() {
    let el = document.getElementById('canvasWrap');
    if (!el) {
        el = document.createElement('div')
        el.id = 'canvasWrap'
        document.body.appendChild(el)
    }
    el.innerHTML = ''
    let winW = document.documentElement.clientWidth
    // 加载 pdf 资源
    let loadingTask = pdfjsLib.getDocument('https://www.lilnong.top/static/pdf/B-4-RxJS%E5%9C%A8React%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8-%E9%BE%99%E9%80%B8%E6%A5%A0_.pdf')
    // PDF 加载完成的回调。
    loadingTask.promise.then(function(pdf) {
        console.log('pdf', pdf)
        // 可以获取到总页数。
        let pageNum = pdf.numPages
        var _pageNum = 1;
        var renderPageToCanvas = function(pageNum, auto=false) {
            // 获取其中的一个页面
            pdf.getPage(pageNum).then(function(page) {
                // you can now use *page* here
                _pageNum = pageNum
                // 获取原始大小的数据
                var viewport = page.getViewport({
                    scale: 1,
                });
                var scale = (500 / viewport.width).toFixed(2)
                viewport = page.getViewport({
                    scale: scale
                });
                var canvas = document.createElement('canvas');
                el.appendChild(canvas)
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                // 创建了一个canvas画板用来存放
                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);
                if (auto)
                    renderPageToCanvas(pageNum + 1, auto);
            });
        }
        renderPageToCanvas(_pageNum, true);
        canvasPrev.onclick = function() {
            renderPageToCanvas(Math.max(_pageNum - 1, 1));
        }
        canvasNext.onclick = function() {
            renderPageToCanvas(Math.min(_pageNum + 1, pdf.numPages));
        }
    }, function(reason) {
        console.error(reason)
    })
}
)()