在手机端浏览pdf文件，遇到的问题整理

在起微信中预览文件

第一种方法：
直接使用a标签，将href属性的值赋为你想要展示的文件的路径地址。
我用自己的手机测试（android）时，主要要经过下面的流程
打开----->首先下载QQ浏览器（手机没有安装的情况下）----->点击下载文件（这个文件会在QQ）浏览器中的下载那里出现(不会直接显示出来需要自己点击)------>点击这个文件之后会询问使用手机上面那个软件打开（如：WPS Office，浏览器等）

第二种方法：不用下载文件，使用pdf.js插件，最后在canvas中将我们要展示的pdf文件的内容绘制出来
pdf.js官方地址：http://mozilla.github.io/pdf.js/
下面是我自己的代码：
css部分

.lightbox {
            position: fixed;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            z-index: 7;
            opacity: 0.3;
            display: block;
            background-color: rgb(0, 0, 0);
        }
        .page-btn {
            background-color:#fff;
            z-index:9;
        }
        .pop {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            z-index: 9;
        }
            .pop input {
                width:100px;
                padding:0px;
                height:30px;
            }
        canvas {
            width: 100%;
            height: 100%;
            border: 1px solid black;
        }

下面是html部分

<ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right" onclick="loadPdf()">在线查看文件</a>
        </li>
    </ul>
<div id="container" style="display: none;">
        <div class="lightbox"></div>
        <div id="pop" class="pop">
            <div class="page-btn">
                <label>
                    当前页：
                    <input type="text" name="name" id="page_num" value="" />
                </label>
                <label>
                    总页数：
                    <input type="text" name="name" id="page_count" value="" />
                </label>
                <button id="prev">上一页</button>
                <button id="next">下一页</button>
            </div>
            <canvas id="the-canvas"></canvas>
        </div>
    </div>

JS部分

打开viewer.js文件，ctrl+f 搜索‘DEFAULT_URL 如果这个搜索不到可以改为搜索：compressed.tracemonkey这个字段，这个为默认文件地址，要修该的话，直接改掉它就可以了

<script src="pdf.js"></script>
    <script>
        var url = 'help.pdf';
        // The workerSrc property shall be specified.
        PDFJS.workerSrc = 'pdf.worker.js';
        //PDFJS.cMapUrl = 'https://unpkg.com/pdfjs-dist@1.9.426/cmaps/';
        //PDFJS.cMapPacked = true;
        var pdfDoc = null,
            pageNum = 1,
            pageRendering = false,
            pageNumPending = null,
            scale = 3.0,
            canvas = document.getElementById('the-canvas'),
            ctx = canvas.getContext('2d');
        /**
        * Get page info from document, resize canvas accordingly, and render page.
        * param num Page number.
        */
        function loadPdf() {
            PDFJS.getDocument(url).then(function (pdfDoc_) {
                pdfDoc = pdfDoc_;
                document.getElementById('page_count').value = pdfDoc.numPages;
                renderPage(pageNum);
            });
        }
        function renderPage(num) {
            var container = document.getElementById("container");
            container.style.display = "block";
            pageRendering = true;
            pdfDoc.getPage(num).then(function (page) {
                var viewport = page.getViewport(scale);
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                var renderContext = {
                    canvasContext: ctx,
                    viewport: viewport
                };
                var renderTask = page.render(renderContext);
                
                renderTask.promise.then(function () {
                    pageRendering = false;
                    if (pageNumPending !== null) {
                        renderPage(pageNumPending);
                        pageNumPending = null;
                    }
                });
            });
            document.getElementById('page_num').value = num;
        }
        
       function queueRenderPage(num) {
            if (pageRendering) {
                pageNumPending = num;
            } else {
                renderPage(num);
            }
        }

        function onPrevPage() {
            if (pageNum <= 1) {
                return;
            }
            pageNum--;
            queueRenderPage(pageNum);
        }
         document.getElementById('prev').addEventListener('tap', onPrevPage);

        function onNextPage() {
            if (pageNum >= pdfDoc.numPages) {
                return;
            }
            pageNum++;
            queueRenderPage(pageNum);
        }
        document.getElementById('next').addEventListener('tap', onNextPage);
        </script>

第三种：借用viewer.html来加载我们要预览的文件（如下图的文件结构中）

在需要跳转的地方添加点击事件：window.location.href = ‘/lib/Pdf/web/viewer.html?file=你要预览的文件的名字’;
注意：如果要用上面的地址需要将你要预览的文件放在与viewer.html文件同级的位置，同时如果有分不同类别的文件的话，可以新建自己的文件夹，与此同时你要修改window.location.href = '/lib/Pdf/web/viewer.html?file=这个位置不仅是你要打开的文件的名字了，还要有他的路径;

---

上面的第三种方法不好的地方是，你需要将你预览的文件都复制到项目中，如果预览的文件较多就会导致这个项目过大，这种情况并不是我们所希望的，我们一般都会将文件放在我们自己专属的文件服务器上，同时通过远程来访问这些文件。

远程访问就需要我们取修改源码中的一些地方，同时也需要后台配合可以进行跨域访问
需要修改的地方有以下几个地方：
1>要远程访问的话，远程访问文件名也可以放在file，和原来一样写上文件的名字就可以了
但是远程访问的话，file后面跟的就是http地址，这样浏览器就会因为识别不了两条http而报出一些奇怪的问题，这是就需要对file后面的文件地址进行转码，这里可以用js自带的encodeURIComponent就可以了，这样浏览器就不会报错了，你请求的地址就是经过转码之后的路径了。
2>首先这样远程访问还是会有问题的，首先pdf.js是不支持跨域文件加载的，直接加载是不会成功的，会报“file origin does not match viewer”错误，这里需要修改viewer.js中的代码,
注释掉下图中圈起来的地方

前端配置好了之后，还是会访问失败的，需要后端的配合，需要后端配置允许跨域访问。

都配置好之后就可以实现远程访问了。

不过上述所有的方法到目前为止，当访问的文件数大时，就会加载很慢，
可以通过下面的方法优化pdf加载速度：
可以修改下面图片中的数字：我将原本默认的数字改成了16，加载速度是比以前快了一些。

经过上面的处理加载速度是快了一点，但是我测试了一个300页的文件它的加载速度还是很慢的大概需要：30秒左右，不知知道这个跟我们的服务器有关系没，但是还是觉得速度太慢。

我的文件预览是做在微信中的，这个响应时间还是太慢了，目前我还没有找到更好的解决方案，有没有大神有什么更好的建议，欢迎留言。