在手机端浏览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秒左右，不知知道这个跟我们的服务器有关系没，但是还是觉得速度太慢。

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

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

手机端阅读 pdf 文件 touchPDF.js
touchpdf 中文API 下载地址: http://github.com/loicminghetti/touchpdf/archive/master.zip 一款在手机端阅读pdf 文件的 js ...
WPF 浏览PDF 文件
很长时间没写文章感觉手有点生了,前段时间忙的要死公事.家事.私事,事事操心.还好现在有些时间可以继续写博客了.本篇将为大家演示如何在WPF 程序中浏览PDF 文件,本例将通过Adobe PDF Rea ...
网站开发之ie下在线浏览pdf文件无需本地支持
1.首先,务必通过后面给的链接了解一些可实现的方法:打开链接. 2.个人选择了PDFObject+PDF.js来实现,这里需要下载pdfobject.js和PDF.js.对于pdfobject.js, ...
微信小程序----微信小程序浏览pdf文件
微信小程序----微信小程序浏览pdf文件说明:通过wx.downloadFile,wx.openDocumen来实现打开pdf文件.只需在js操作即可. HTTP.Config.Request(' ...
分享一款手机端的PDF文件编辑软件「PDF处理助手」简单、免费
今天给大家来一款手机端的PDF文件编辑神器,"PDF处理助手",不过这款软件目前只有Android端的喔,ios的小伙伴有需要的话可以直接去Appstore搜索[pdf]下载相关的 ...
微信公众号或者浏览器实现在线浏览pdf文件
微信公众号或者浏览器实现在线浏览pdf文件实现在线浏览pdf文件方法开发步骤: 实现在线浏览pdf文件方法我们在日常的开发当中经常需要实现pdf文件的显示,最近做了一个在微信公众号中实现pdf浏 ...
h5页面预览pdf文件_H5移动端在线浏览pdf文件，推荐插件TouchPDF
pdf.png 公共的pdf页面可以自己写,调用插件的代码也相对简单: seePDF.html seePDF.js $(function() { //文件服务器的路径 var picDownloadS ...
html在线浏览pdf文件
最近在做一个项目,其中涉及到pdf文件,于是就想试着在线加载pdf文件,经过我的不懈努力,终于让我解决了这个问题解决这个问题总共有两种方式方式一. 将pdf转为图片保存,然后再把图片的地址发到页面 ...
8个实现在线浏览PDF文件的实用jQuery插件
在web开发当中我们经常需要进行需要在线浏览PDf内容,在线嵌入动态pdf,传统的解决方法安装客户端PDF阅读器,如果是在谷歌是可以在线浏览的,因为他自身就带了一些插件,以前遇到这样的问题往往是费时又 ...

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

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

最新文章

热门文章