移动端实现PDF文件在线预览

移动端直接使用pdf的路径当做超链接时，pdf需要下载也能查看，所以使用插件来实现无需下载在线预览的效果。

1、插件下载官网：https://mozilla.github.io/pdf.js/

       两个版本都可以（个人只使用了v1.9.426版本，另一版本未使用）

2、修改文件配置

$('#Paper').click(function () {  
    window.open('../viewer.html?file=paper01.pdf');  
});
//paper01.pdf就是你想要打开的文件名称

注意：viewer.html就是下载下来文件包中的那个viewer.html，

在此html中已经引入了viewer.css、locale.properties、pdf.js和viewer.js。

所以我们要修改viewer.js中的以下代码：

var DEFAULT_URL = 'compressed.tracemonkey-pldi-09.pdf';修改为  var DEFAULT_URL = '';

    需要预览的pdf文件，就是window.open('../viewer.html?file=paper01.pdf');中的paper01.pdf文件。

注意：pdf文件需要和 viewer.html放在同一个目录下，如果不在同一个目录下，需修改路径。

通过以上的配置，就实现了在线预览pdf文件。

但是，现在这样的配置要求文件只有指定的一个，如果是多个文件，就需要修改jquery代码。

<div class="pagecity">
        	<dl>
            	<dt>北京</dt>
                <dd>
                	<a href="#"><span><img src="images/paper.png"/></span><p>产业共性技术需求</p></a>
                    <a href="#"><span><img src="images/paper.png"/></span><p>企业技术难题和技术需求</p></a>
                </dd>
            </dl>
            <dl>
            	<dt>上海</dt>
                <dd>
                	<a href="#"><span><img src="images/paper.png"/></span><p>产业共性技术需求</p></a>
                    <a href="#"><span><img src="images/paper.png"/></span><p>企业技术难题和技术需求</p></a>
                </dd>
            </dl>
            <dl>
            	<dt>广州</dt>
                <dd>
                	<a href="#"><span><img src="images/paper.png"/></span><p>产业共性技术需求</p></a>
                    <a href="#"><span><img src="images/paper.png"/></span><p>企业技术难题和技术需求</p></a>
                </dd>
            </dl>
</div>

$('.pagecity dl dd a').click(function () {  
		var anow = $(this).index();
		var citynow = $(this).parents("dl").index();
		//window.open('web/viewer.html?file=zcxx.pdf');  
		window.open('web/viewer.html?file=need'+citynow+'-'+anow+'.pdf');  
});