工作筆記三——使用pdf.js實現pdf檔案的線上預覽

阿新 • • 發佈：2019-01-17

最近做移動專案（H5）時遇到一個需求，就是線上預覽pdf檔案。其實本來使用window.open()就可以實現了，但是這個API在IOS上是正常的開啟Safari瀏覽器進行預覽，在安卓上開啟是則是下載預覽，客戶不滿意；而且在將該應用嵌入到釘釘微應用時，這個API在安卓裝置上根本不起效果。於是在網上找到了這個外掛，去官網摘了個例子，並且結合移動端的上下左右滑動滑動翻頁做了個例子，完美解決。以下是詳細程式碼。註釋都在程式碼中。

<html>
<head>
    <meta charset="UTF-8">
    <title>pdf線上預覽</title>
    <script src="js/pdf.js" type="text/javascript"></script>
    <style>
        button {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: lightseagreen;
            border: 1px solid transparent;
            border-radius: 5px;
            height: 30px;
            width: 70px;
        }

        .header-bar {
            background-color: cornflowerblue;
            height: 5%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 2em;
        }

        .pdf-container {
            background-color: gainsboro;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 95%
        }
        canvas{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="header-bar">
    <span>當前第 <span id="page_num"></span> 頁    共<span id="page_count"></span>頁</span>
</div>
<div class="pdf-container">
    <canvas id="the-canvas"></canvas>
</div>

</body>
<script type="text/javascript">
    var url = 'test-js.pdf';

    //  workerSrc的路徑
    PDFJS.workerSrc = 'js/pdf.worker.js';

    var pdfDoc = null,
        pageNum = 1,
        pageRendering = false,
        pageNumPending = null,
        scale = 1,////設定pdf文字顯示區域的縮放級別
        canvas = document.getElementById('the-canvas'),
        ctx = canvas.getContext('2d');

    /**
     * 渲染對應的文件頁碼，並且調整canvas大小，渲染介面
     * @param num 頁碼.
     */
    function renderPage(num) {
        pageRendering = true;
        // 通過promise來獲取
        pdfDoc.getPage(num).then(function (page) {

            var viewport = page.getViewport(scale);
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            //將PDF檔案渲染進canvas中
            var renderContext = {
                canvasContext: ctx,
                viewport: viewport
            };
            var renderTask = page.render(renderContext);

            //等待渲染結束
            renderTask.promise.then(function () {
                pageRendering = false;
                if (pageNumPending !== null) {
                    // New page rendering is pending
                    renderPage(pageNumPending);
                    pageNumPending = null;
                }
            });
        });

        // 更新頁碼
        document.getElementById('page_num').textContent = num;
    }

    /**
     * 如果有另一個頁面pdf頁正在渲染，那麼先等這個pdf頁渲染完再渲染。否則立即渲染傳進來的頁碼。
     */
    function queueRenderPage(num) {
        if (pageRendering) {
            pageNumPending = num;
        } else {
            renderPage(num);
        }
    }

    /**
     * 上一頁
     */
    function onPrevPage() {
        if (pageNum <= 1) {
            return;
        }
        pageNum--;
        queueRenderPage(pageNum);
    }

    /**
     * 下一頁
     */
    function onNextPage() {
        if (pageNum >= pdfDoc.numPages) {
            return;
        }
        pageNum++;
        queueRenderPage(pageNum);
    }

    /**
     * 非同步的下載pdf檔案
     */
    PDFJS.getDocument(url).then(function (pdfDoc_) {
        pdfDoc = pdfDoc_;
        document.getElementById('page_count').textContent = pdfDoc.numPages;

        // 下載完以後初始化渲染第一頁
        renderPage(pageNum);
    });

    function _touch() {
        var startx;//讓startx在touch事件函式裡是全域性性變數。
        var endx;
        var el = document.getElementsByTagName("body")[0];

        function cons() {   //獨立封裝這個事件可以保證執行順序，從而能夠訪問得到應該訪問的資料。
            var l = Math.abs(startx - endx);
            var h = Math.abs(starty - endy);

            if (l > h) {
                // x事件
                if (startx > endx) {
                    onNextPage();
                } else if (startx < endx) {
                    onPrevPage();
                }

            } else {
                // y事件
                if (starty > endy) {
                    onNextPage();
                } else if (starty < endy) {
                    onPrevPage();
                }
            }

        }

        el.addEventListener('touchstart', function (e) {
            var touch = e.changedTouches;
            startx = touch[0].clientX;
            starty = touch[0].clientY;
        });
        el.addEventListener('touchend', function (e) {
            var touch = e.changedTouches;
            endx = touch[0].clientX;
            endy = touch[0].clientY;
            cons();  //startx endx 的資料收集應該放在touchend事件後執行，而不是放在touchstart事件裡執行，這樣才能訪問到touchstart和touchend這2個事件產生的startx和endx資料。另外startx和endx在_touch事件函式裡是全域性性的，所以在此函式中都可以訪問得到，所以只需要注意事件執行的先後順序即可。
        });
    }

    _touch();
</script>
</html>

demo演示效果：

demo地址：

github上版本的對結構做了一點修改。歡迎star。

工作筆記三——使用pdf.js實現pdf檔案的線上預覽

vue外掛開發使用pdf.js實現手機端線上預覽pdf文件

Wabacus結合PDF.js實現線上文件預覽

java實現office檔案線上預覽

工作筆記三——使用pdf.js實現pdf檔案的線上預覽

PDF檔案線上預覽之pdf.js

通過pdf.js、openoffice實現客戶端線上預覽

txt、doc、xls、ppt、pdf檔案線上預覽

利用OpenOffice、flexpaper、swftools將DOC、JPG檔案轉PDF再轉成SWF線上預覽

js實現視頻本地預覽，一級獲取播放時長

js實現移動端圖片預覽：手勢縮放，手勢拖動，雙擊放大...

JS 實現區域性列印和預覽

JS實現上傳圖片預覽功能

前端js實現圖片上傳預覽

java SpringMvc 實現檔案線上預覽(openoffice+swftools+flexpaper)

JS上傳檔案和預覽（單張和多張）

js實現上傳圖片預覽，購物車加減

Vim無外掛實現Markdown檔案實時預覽

訪問路徑對映到本地實現圖片的線上預覽

使用openoffice實現文件線上預覽

php excel檔案線上預覽（走過的坑）

工作筆記三——使用pdf.js實現pdf檔案的線上預覽

相關推薦