pdf.js在線預覽效果

1.引入兩個主要js文件

<script src="../js/pdf.js"></script>
<script src="../js/pdf.worker.js"></script>

2.主要js代碼

                let container = document.getElementById("container");
                let popId = document.getElementById("pop");
                let childs = popId.childNodes;
                for(let i = childs.length - 1; i >= 0; i--) {
                    popId.removeChild(childs[i]);
                }
                container.style.display = "block";
                let url = 'http://192.168.0.176:8020/project/HQS20190811104441.pdf';
                // let url = 'http://192.168.0.176:8020/project/2019_PDF.pdf';
                pdfjsLib.workerSrc = '../js/pdf.worker.js';
                pdfjsLib.getDocument(url).then(function getPdfHelloWorld(pdf) {
                    // let $pop = $('#pop');
                    let $pop = document.getElementById("pop");
                    let shownPageCount = pdf.numPages < 50 ? pdf.numPages : 50;//設置顯示的編碼
                    //async/await解決PDF頁面異地問題
                    let getPageAndRender = async function (pageNumber) {
                        let popWidth = document.getElementById("pop").offsetWidth;

                        let page = await pdf.getPage(pageNumber)
                        let scale = 2;
                        let viewport = page.getViewport(scale);

                        let $canvas = document.createElement("canvas");


                        //判斷當前彈框的寬度小於PDF文件的寬度時，將viewport和scale的值重新2倍賦值
                        if( popWidth < viewport.width){
                            scale = popWidth / viewport.width * 2;
                            viewport = page.getViewport(scale);
                        }

                        $canvas.width = viewport.width*2;
                        $canvas.height = viewport.height*2;
                        $canvas.style.width = viewport.width+'px';
                        $canvas.style.height = viewport.height+'px';
                        $pop.appendChild($canvas);
                        let content = $canvas.getContext('2d');
                        content.scale(2,2);
                        page.render({
                            canvasContext: content,
                            viewport: viewport
                        });

                        if (pageNumber < shownPageCount) {
                            pageNumber++;
                            getPageAndRender(pageNumber);
                        }
                    };
                    getPageAndRender(1)
                });

　3.組件

                   <div id="container">
                        <el-scrollbar  class="page-component__scroll">
                            <div id="pop"></div>
                        </el-scrollbar>
                    </div>

　　4.效果如下：