菜单

澳门太阳娱乐手机登录:js使用教程

2020年1月4日 - 澳门太阳娱乐手机登录

pdf.js使用教程

pdf.js框架的魔力所在,为其为HTML5兑现的,无需任什么地点方扶助,何况对浏览器的宽容性也是相比好,要求唯有一个:浏览器援救HTML5就好了!(可是对此低版本的IE,就必须要节哀顺变了!)

听别人说IE9上述是OK的,因为本身本地是IE11,所以本人只在IE11上测验过,是经过的(当然火狐,360,我也测了一下,是足以的)。

因为品种支出要求,在线展现PDF,何况要包容IE,所以就筛选了pdf.js,不过英特网对他的科目比较少,我花了一天时间才消除,回头看了后生可畏晃,也并没有想像中那么窘迫,所以决定写意气风发篇博客,以便大家仿照效法!

以下是pdf.js相关的网站:

GitHub:

下边这一个网站,有pdf.js的基本简要介绍,以至怎样收获源码,之后怎么着实行塑造!

可是他的拿走源码使用:

$ git clone git://github.com/mozilla/pdf.js.git

创设利用:

$ node make generic

不明了在Windows7上该怎么用git、node(如果有知道的,能够告诉小编下,在那谢过!),所以本身就改用linux实行营造(时期有好些个心酸历程,认为都能够拍成都电子通信工程大学影了!!!比如说小编用git获取源码时,系统提醒笔者git未有安装,笔者用node时,提醒作者ShellJs未有安装,安装ShellJS,他告诉本身要动用npm,意料之中,npm笔者也绝非安装…),其实,我们应用pdf.js,最后只要求构建后的原委,大家能够因而此处开展下载:

——————————————分割线——————————————

无偿下载地址在

客户名与密码都以www.bkjia.com

切切实实下载目录在 /二零一六年龄资历料/11月/二十七日/pdf.js使用教程/

下载情势见

——————————————分割线——————————————

营造后的目录构造为:

有了营造后的build内容,我们就能够做多少个简约的测验,把generic拷贝到汤姆cat的webapps中

澳门太阳娱乐手机登录 1

起步Tomcat后,就足以经过:

进展拜候!能够看出多个太酷气的界面:

澳门太阳娱乐手机登录 2

generic/web/viewer.html首假诺渲染pdf阅读器的样式,而generic/web/viewer.js则是钦赐张开的pdf文件(当然还也是有此外职能,可是那个都不是大家关心的),我们看坐落于generic/web/viewer.js的生龙活虎段代码:

澳门太阳娱乐手机登录 3

咱俩得以看出,他暗许展开generic/web/compressed.tracemonkey-pldi-09.pdf文件,再来看下边这段代码:

澳门太阳娱乐手机登录 4

那就告知我们,能够通过传递file形参来动态钦点张开的pdf文件!如:

下边笔者就介绍下,具体嵌入项目中是哪些利用的!

能够把generic中的内容作为第三方插件实行应用,在类型中得以像如下寄存:

澳门太阳娱乐手机登录 5

下一场页面能够采纳<iframe>标签来加载pdf

<iframe src=”<c:url
value=”/resources/plugin/pdfJs/generic/web/viewer.html”
/>?file=<c:url value=”/publicity/displayPDF.do” />”
width=”100%” height=”800″></iframe>

效果图,如下:

澳门太阳娱乐手机登录 6

精气神就是大家直接访谈generic/web/viewer.html,然后为其钦定多少个file形参,用于钦定展开的pdf文件!笔者下边使用的流的艺术开展点名的。

地方只是生龙活虎种容易的行使方法,上面介绍豆蔻梢头种复杂点的使用办法:

不亮堂我们有未有试过上边这段url央浼:

 我们在实际上利用中,或者会根据区别的参数,来采撷显示差异的pdf文件,那时候就涉及到传参的标题了,细心考查地点这段url地址会发觉,在file央求参数中的值为一个url地址,而以此url地址又充实了和谐的呼吁参数,那就招致叁个url地址中现身2个”?”

招致浏览器不可能健康剖析这段url!

风度翩翩种缓和思路是:大家可以把file形参的值,先编码,然后再解码来化解那几个难题!

此刻,就足以请encodeUQashqaiIComponent(State of Qatar函数出场了!因为其为js函数,所以需求在文书档案就绪函数中动态为iframe设置src的值,如下所示:

<%@ page contentType=”text/html;charset=GBK” language=”java” %>
<%@ taglib prefix=”c” uri=”” %>
<script type=”text/javascript”>
    $(function(){
        $(“#displayPdfIframe”).attr(“src”,'<c:url
value=”/resources/plugin/pdfJs/generic/web/viewer.html” />?file=’ +
encodeURIComponent(‘<c:url value=”/displayPDF.do?id=${id}”/>’));
    });
</script>
<div class=”ctrlDiv”>
    <div class=”eleContainer elePaddingBtm”>
        <iframe id=”displayPdfIframe” width=”100%”
height=”100%”></iframe>
    </div>
</div> 

既然有编码,那么就决然要有解码来剖析他,可是那些专门的学业generic/web/viewer.js已经替大家做过了,如下所示:

澳门太阳娱乐手机登录 7

时至后天,pdf.js插件的牵线就止住了,第叁遍写博客,如有不到之处,希望大家能够多多支持,多谢!

在那多谢pdf.js的两位作者!(真心钦佩这一个国外民代表大会见,2私人住房能够写三个这么好的框架,并且照旧开源的!)。

正文永世更新链接地址:

pdf.js框架的魅力所在,为其为HTML5兑现的,不须求任哪个位置方援助,况且对浏览器的宽容性也是相比较好,供给只有一个:浏览器支…

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图