Android利用PDF.js实现PDF预览

50 浏览量更新于2024-08-29 收藏 466KB PDF 举报

"Android 使用 PDF.js 浏览 pdf 的方法示例" 在 Android 开发中，如果想要在 WebView 中预览 PDF 文件，通常会遇到一些挑战，因为与 iOS 的 WebView 不同，Android 的 WebView 并不直接支持 PDF 预览。本示例将介绍如何利用 Mozilla 开源项目 PDF.js 来解决这一问题。首先，我们可以尝试使用谷歌的文档服务，通过加载特定的 URL 来预览 PDF，如 `mWebView.loadUrl("http://docs.google.com/gview?embedded=true&url=" + pdfUrl);`。然而，这种方法可能在国内网络环境下不可用，因此我们需要寻找替代方案。替代方案是利用 Mozilla 的 PDF.js 库。PDF.js 是一个纯 JavaScript 库，可以在浏览器环境中渲染 PDF 文档。你可以从其 GitHub 仓库（https://github.com/mozilla/pdf.js）获取源码，并查看官方 demo（https://mozilla.github.io/pdf.js/web/viewer.html）来了解其工作原理。在 Android 中使用 PDF.js，你需要对 WebView 进行一些设置，以允许执行 JavaScript 和访问文件： ```java WebSettings webSettings = mWebView.getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setAllowFileAccess(true); webSettings.setAllowFileAccessFromFileURLs(true); webSettings.setAllowUniversalAccessFromFileURLs(true); ``` 接下来，有三种不同的方式来实现 PDF.js 预览 PDF：方式一：使用 Mozilla GitHub Pages 上的 Viewer 你可以直接通过 Viewer 加载 PDF 文件，例如：`mWebView.loadUrl("http://mozilla.github.io/pdf.js/web/viewer.html?file=" + pdfUrl);`。这种方式的好处是不需要本地部署 PDF.js，但可能会遇到跨域问题。方式二：下载 PDF.js 至 assets 目录如果你的 PDF 文件无法跨域访问，可以将 PDF.js 下载到项目的 assets 目录下，然后加载本地的 viewer.html 文件并传入 PDF 文件的 URL，如：`mWebView.loadUrl("file:///android_asset/pdfjs/web/viewer.html?file=" + pdfUrl);`。不过，这样做会增加 APK 的大小，因为 PDF.js 库本身较大。方式三：自定义预览界面，使用 CDN 引入 PDF.js 为了减小 APK 大小，你可以将 PDF.js 从 CDN 加载，创建一个预览界面的 index.html 文件，如下所示： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">  <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script> ... </head> <body>  <canvas id="the-canvas"></canvas> <script> // 加载 PDF 文件并渲染到 canvas pdfjsLib.getDocument(pdfUrl).promise.then(function(pdf) { pdf.getPage(1).then(function(page) { var scale = 1; var viewport = page.getViewport({ scale: scale }); var canvas = document.getElementById('the-canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); }); </script> </body> </html> ``` 然后，使用 `mWebView.loadUrl("file:///android_asset/your_custom_index.html");` 来加载这个自定义的预览界面。通过以上方法，你可以在 Android 的 WebView 中实现流畅的 PDF 预览功能，即使在没有 Google 服务的环境下也能正常工作。记得根据实际项目需求选择最合适的实现方式，并考虑优化性能和文件大小。

Android 使用使用PDF.js浏览浏览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>

<head>

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38597533

粉丝: 11
资源: 919

Android利用PDF.js实现PDF预览

Android-pdf.js:适用于Android的Mozilla pdf.js实现

Android利用pdfJS浏览pdf（本地，网络）优化

Android利用pdfJS浏览pdf（本地，网络）

uniapp 使用pdf.js

pdf.js实现骑缝章兼容

android js pdf

android 显示pdf文件

pdf android

开发一个网页，WIN，安卓上可以操作。具体要求，可以读取PDF，然后在PDF上标注信息（比如图画），请写出实例代码

react-native-view-pdf使用

最新资源