Android 使用PDF.js浏览pdf的方法示例

Android 使用PDF.js浏览pdf的方法示例,第1张

概述Android的WebView做不到ios的WebView那样可以很方便的直接预览pdf文件。要实现利用WebView预览pdf我们可以使用谷歌文档服务:

AndroID的WebVIEw做不到ios的WebVIEw那样可以很方便的直接预览pdf文件。要实现利用WebVIEw预览pdf我们可以使用谷歌文档服务:

mWebVIEw.loadUrl("http://docs.Google.com/gvIEwembedded=true&url=" + pdfUrl);

这种方式国内网络环境是不用考虑的。当然也有替代的方案:我们可以使用mozilla开源的pdf.Js。

Github

mozilla 官方demo

一 WebVIEw设置:

WebSettings webSettings = mWebVIEw.getSettings();webSettings.setJavaScriptEnabled(true);webSettings.setAllowfileAccess(true);webSettings.setAllowfileAccessFromfileURLs(true);webSettings.setAllowUniversalAccessFromfileURLs(true);

二 实现方式

方式一: 使用mozilla部署在github pages上的VIEwer

VIEw.loadUrl("http://mozilla.github.io/pdf.Js/web/vIEwer.HTML?file=" + pdfUrl);

这种方式和使用Google docs是差不多一样的,重要的是国内可以直接访问,但是会遇到跨域的问题。

方式二: 下载PDF.js放到assets目录下


如果pdf文件不能跨域访问的话可以使用这种方式,先把文件下载到本地然后传入本地文件路径预览pdf:

 mWebVIEw.loadUrl("file:///androID_asset/pdfJs/web/vIEwer.HTML?file=" + pdfUrl);

pdf.Js本身是一个比较大的库,如果全部放到本地的话apk差不多会增大5m左右。所以我们可以考虑吧pdf.Js部署到服务端或者使用cdn的方式。

方式三:自定义预览界面,pdf.Js使用cdn的方式导入

1.首先写一个预览的index.HTML

<!DOCTYPE HTML><HTML lang="en"><head>  <Meta charset="UTF-8">  <Meta name="vIEwport"     content="wIDth=device-wIDth,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>  <Title>document</Title>  <style type="text/CSS">    canvas {      wIDth: 100%;      height: 100%;      border: 1px solID black;    }  </style>  <script src="https://unpkg.com/pdfJs-dist@1.9.426/build/pdf.min.Js"></script>  <script type="text/JavaScript" src="index.Js"></script></head><body></body></HTML>

2.实现预览index.Js

var url = location.search.substring(1);pdfJs.cMapUrl = 'https://unpkg.com/pdfJs-dist@1.9.426/cmaps/';pdfJs.cMapPacked = true;var pdfDoc = null;function createPage() {  var div = document.createElement("canvas");  document.body.appendChild(div);  return div;}function renderPage(num) {  pdfDoc.getPage(num).then(function (page) {    var vIEwport = page.getVIEwport(2.0);    var canvas = createPage();    var ctx = canvas.getContext('2d');    canvas.height = vIEwport.height;    canvas.wIDth = vIEwport.wIDth;    page.render({      canvasContext: ctx,vIEwport: vIEwport    });  });}pdfJs.getdocument(url).then(function (pdf) {  pdfDoc = pdf;  for (var i = 1; i <= pdfDoc.numPages; i++) {    renderPage(i)  }});

3.WebVIEw加载HTML

 mWebVIEw.loadUrl("file:///androID_asset/index.HTML?" + pdfUrl);

这样我们最终放到assets目录下的就index.HTML和index.Js两个文件,可以避免直接全部导入带来的apk体积增大的问题,如果我们对预览UI和交互有要求的话可以方便的通过修改HTML来实现。

三 遇到的问题

在直接实现预览的时候遇到显示模糊的问题,通过增大scale系数解决

var vIEwport = page.getVIEwport(2.0);//设置为2.0

pdf内容显示不完整,通过设置cMapUrl和cMapPacked解决

pdfJs.cMapUrl = 'https://unpkg.com/pdfJs-dist@1.9.426/cmaps/';pdfJs.cMapPacked = true;

四 实现效果

mozilla vIEwer:

自定义预览界面:

Github https://github.com/wangyiwy/PDF_Preview

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程小技巧。

您可能感兴趣的文章:Android webview转PDF的方法示例Android实现pdf在线预览或本地预览的方法Android 如何本地加载pdf文件Android 下载并打开PDF,Dwg文档实例Android 打开网络上pdf文件Android 打开本地pdf文件Android pdf viewer在android studio应用问题说明详解 总结

以上是内存溢出为你收集整理的Android 使用PDF.js浏览pdf的方法示例全部内容,希望文章能够帮你解决Android 使用PDF.js浏览pdf的方法示例所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1149698.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-31
下一篇 2022-05-31

发表评论

登录后才能评论

评论列表(0条)

保存