Android webview加载pdf实验成功

pdf.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件

pdf.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，，一个负责API解析，一个负责核心解析

下载地址：http://cnblogs.com/files/xiangliuyunyang/build.zip

两个主要demo

1.点击连接读取第一页的pdf文档：http://www.51purse.com/pdf/web/demo1.html（此处没有自己上传）

2.点击连接，选择需要打开的文件，进行pdf预览：http://www.51purse.com/pdf/web/demo2.html（此处没有自己上传）

参考代码：

demo1:

1 <html>
2 <head>
3     <metacharset="UTF-8">
4     <title>Document</title>
5     <styletype="text/css">
6 .lightbox{
7 position:fixed;
8 top:0px;
9 left:0px;
10 height:100%;
11 width:100%;
12 z-index:7;
13 opacity:0.3;
14 display:block;
15 background-color:rgb(0, 0, 0);
16         }
17 .pop{
18 position:absolute;
19 left:50%;
20 width:894px;
21 margin-left:-447px;
22 z-index:9;
23         }
24     </style>
25     <scriptsrc="Scripts/pdf.js"type="text/javascript"></script>
26     <scripttype="text/javascript">
27         functionshowPdf() {28             varcontainer=document.getElementById("container");29 container.style.display= "block";30             varurl= 'Scripts/jQuery经典入门教程(绝对详细).pdf';31 PDFJS.workerSrc= 'Scripts/pdf.worker.js';32 PDFJS.getDocument(url).then(functiongetPdfHelloWorld(pdf) {33 pdf.getPage(1).then(functiongetPageHelloWorld(page) {34                     varscale= 1;35                     varviewport=page.getViewport(scale);36                     varcanvas=document.getElementById('the-canvas');37                     varcontext=canvas.getContext('2d');38 canvas.height=viewport.height;39 canvas.width=viewport.width;40                     varrenderContext={41 canvasContext: context,42 viewport: viewport43 };44 page.render(renderContext);45 });46 });47 }48     </script>
49 </head>
50 <body>
51     <h1><ahref="javascript:void(0)"target="_blank"onclick="showPdf()">显示pdf文档</a></h1>
52     <divid="container"style="display: none;">
53         <divclass="lightbox"></div>
54         <divid="pop"class="pop">
55             <canvasid="the-canvas"></canvas>
56         </div>
57     </div>
58 </body>
59 </html>

demo2:

<html>
<head><metacharset="UTF-8"><title>Document</title><styletype="text/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);display:none;}.pop,iframe{position:absolute;left:50%;top:0;width:893px;height:100%;margin-left:-446.5px;z-index:9;}</style><scriptsrc="Scripts/pdf.js"type="text/javascript"></script><scripttype="text/javascript">functionshowPdf(isShow) {varstate= "";if(isShow) {state= "block";}else{state= "none";}varpop=document.getElementById("pop");pop.style.display=state;varlightbox=document.getElementById("lightbox");lightbox.style.display=state;}functionclose() {showPdf(false);}</script>
</head>
<body><ul><li><ahref="Scripts/jQuery经典入门教程(绝对详细).pdf"target="pdfContainer"onclick="showPdf(true)">0001_pdf</a></li>   </ul><divclass="lightbox"id="lightbox"></div><divid="pop"class="pop"style="display: none;"><ahref="javascript:close()"style="position: absolute;right: -90px;display: inline-block;width: 80px;height: 30px;"id="close">关闭</a><iframesrc=""frameborder="0"id="pdfContainer"name="pdfContainer"></iframe></div>
</body>
</html>

项目架构：

Android webview加载pdf实验成功相关推荐

Webview加载pdf遇到的一些坑及解决方法
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群问题来源问题一切的来源还是得从那天说起... 有一天产品小王拿着电脑兴致勃勃的来到我的工位 ...
android 双 webview,Android webview加载页面
释放双眼,带上耳机,听听看~! Android webview加载页面 private WebView webView; public void init() { webView = (WebView ...
android webView加载网络视频
之前,我写过webView加载本地网页的博客,今天,就写写webView加载网络视频的内容. 一.加载网页 1.WebView用来显示网页,使用必须时刻注意我们需要添加网络权限 <uses-pe ...
android webview 太大,Android应用开发之Android WebView加载图片显示过大的处理教程（代码教程）...
本文将带你了解Android应用开发Android WebView加载图片显示过大的处理教程(代码教程),希望本文对大家学Android有所帮助. Webview加载图片时,经常会遇到图片显示不符合 ...
Android WebView 加载https网页白屏，空白解决方案
最近在做一个H5相关的需求,使用WebView加载第三方提供的https网页时显示白屏.但是调试打开Baidu和B站的https网址时就能正常打开.被这个问题困扰了半天. 合作方说是android手机 ...
android WebView加载网页白屏问题优化处理
android WebView加载网页白屏问题优化处理问题描述: 使用webview加载Web界面时,会出现界面白屏的情况.http下通常问题不大,通常https白屏的可能性很大,而且通常没有任何报 ...
Android webview加载html代码上下左右有白边问题
直接开始之前写过一篇文章 Android webview加载html自适应屏幕也可以参考一下后台返回一串html代码字符串然候客户端用webview做展示别的都正常只是四周会有白边 ...
android webview 自适应屏幕宽度,Android webview加载html自适应屏幕
最近又写了一篇文章 Android webview加载html代码上下左右有白边问题可以参考一下 webView.getSettings().setJavaScriptEnabled(true) ...
webview加载pdf
Android的webview压根就不支持加载pdf. Android与iOS不同,iOS加载pdf,不管本地还是在线,直接使用webview渲染就可以了,而Android却做不到. 可直接使用这个资 ...

Android webview加载pdf实验成功

Android webview加载pdf实验成功相关推荐

最新文章

热门文章