H5 PDF预览

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


 <div id="container">
            <div class="lightbox"></div>
            <div id="pop" class="pop">
            </div>
        </div>

 <script type="text/javascript">
            function GetQueryString(name) {
                var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if(r!=null)return  unescape(r[2]); return null;
            }
        
            var code_url = GetQueryString("code");
            var url = "https://ptphjf.oss-cn-shenzhen.aliyuncs.com/doc/%E8%8E%86%E6%83%A0%E9%87%91%E6%9C%8DAPP%E6%93%8D%E4%BD%9C%E6%89%8B%E5%86%8Cv1.0%E7%AE%80%E7%89%88.pdf";
            
            var container = document.getElementById("container");
            PDFJS.workerSrc = './pdf/pdf.worker.js';
            PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
                var pop=document.getElementById('pop');
                var arr = Array.from({length:pdf.numPages}, (v,k) => k+1)
                function getPdf(data){
                return new Promise((resolve,reject)=>{
                    var pageData = pdf.getPage(data).then(page=>{
                        return page
                    })
                    if(pageData){
                        resolve(pageData)
                    }else{
                        reject('error')
                    }
                })
            }
            var every = arr.map(v=>{
                return getPdf(v)
            })
            Promise.all(every).then(all=>{
                console.log(all)
                all.map(v=>{
                    var scale = 1;
                        var oDiv=document.createElement('canvas');
                        var viewport = v.getViewport(scale);
                        var canvas = oDiv;
                        var context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;
                        var renderContext = {
                            canvasContext: context,
                            viewport: viewport
                        };
                        pop.appendChild(oDiv);
                        v.render(renderContext);
                })
            })
                document.getElementById("loading").style.display = 'none'
            });
        </script>

需要两个文件pdf.js和pdf.work.js