在webview中查看PDF文件--PDF.js

话不多说，目前要在国内Android平台WebView中查看PDF文件，你应该找不到其他更好的方式了，只有PDF.js

PDF.js介绍：

pdf.js 是Mozilla的，主要用于在 HTML5 平台上展示 PDF 文档，无需任何本地技术支持。

GitHub：https://github.com/mozilla/pdf.js/

下载包：http://mozilla.github.io/pdf.js/

集成：

1、下载下来的包解压到文件夹pdfjs，文件夹pdfjs里主要有3个部分

2、把这个文件夹整体放到asserts目录中

3、当然你需要一个下载工具类，因为，这个pdf是要先下载到本地的

public class DownloadUtil {

public static void download(final String url, final String saveFile, final OnDownloadListener listener) {
    Request request = new Request.Builder().url(url).build();
    new OkHttpClient().newCall(request).enqueue(new Callback() {
        @Override
        public void onFailure(Call call, IOException e) {
            listener.onDownloadFailed(e.getMessage());
        }

        @Override
        public void onResponse(Call call, Response response) throws IOException {
            InputStream is = null;
            byte[] buf = new byte[2048];
            int len;
            FileOutputStream fos = null;
            try {
                is = response.body().byteStream();
                long total = response.body().contentLength();
                File file = new File(saveFile);
                fos = new FileOutputStream(file);
                long sum = 0;
                while ((len = is.read(buf)) != -1) {
                    fos.write(buf, 0, len);
                    sum += len;
                    int progress = (int) (sum * 1.0f / total * 100);
                    listener.onDownloading(progress);
                }
                fos.flush();
                listener.onDownloadSuccess(file.getAbsolutePath());
            } catch (Exception e) {
                listener.onDownloadFailed(e.getMessage());
            } finally {
                try {
                    if (is != null)
                        is.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
                try {
                    if (fos != null)
                        fos.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    });
}

public interface OnDownloadListener {
    void onDownloadSuccess(String path);

    void onDownloading(int progress);

    void onDownloadFailed(String msg);
}
}

4、下载并查看PDF关键代码

private void download(String url) {
DownloadUtil.download(url, getCacheDir() + "/temp.pdf", new DownloadUtil.OnDownloadListener() {
            @Override
            public void onDownloadSuccess(final String path) {
                Log.d("MainActivity", "onDownloadSuccess: " + path);
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        preView(path);
                    }
                });
            }

            @Override
            public void onDownloading(int progress) {
                Log.d("MainActivity", "onDownloading: " + progress);
            }

            @Override
            public void onDownloadFailed(String msg) {
                Log.d("MainActivity", "onDownloadFailed: " + msg);
            }
        });
}


 /**
 * 预览pdf
 *
 * @param pdfUrl url或者本地文件路径
 */
private void preView(String pdfUrl) {
//1.只使用pdf.js渲染功能，自定义预览UI界面
// mWebView.loadUrl("file:///android_asset/index.html?" + pdfUrl);
//2.使用mozilla官方demo加载在线pdf
// mWebView.loadUrl("http://mozilla.github.io/pdf.js/web/viewer.html?file=" + pdfUrl);
//3.pdf.js放到本地
mWebView.loadUrl("file:///android_asset/pdfjs/web/viewer.html?file=" + pdfUrl);
//4.使用谷歌文档服务
// mWebView.loadUrl("http://docs.google.com/gviewembedded=true&url=" + pdfUrl);
}

5、说明

你应该已经看到了，查看pdf提供了4种方式。

a）第4种不用考虑了，有墙的存在，google的服务是用不了了。

b）目前我使用的就是第3种。把PDF.js放在本地，apk包增加5M左右。

c）当然生产环境你也可以使用第2种，但是没必要，跟第3种原理一样，但是要去github上找个文件，这就不太稳定了

d）第1种，使用自定义的UI界面，这个要前端同事写个页面用一下了。下面提供一个样例。这两个文件都要放在assets目录下。

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/[email protected]/build/pdf.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
</body>
</html>

index.js

var url = location.search.substring(1);

PDFJS.cMapUrl = 'https://unpkg.com/[email protected]/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)
  }
});

6、预览本地PDF

当然，你也可以查看本地PDF，只需要将pdf放到assets目录中，然后，像这样调用即可：

preView("file:///android_asset/JDK1.8.pdf");

不再赘述。

7、效果图

欢迎关注微信号，了解更多内容：OpenShare

在webview中查看PDF文件--PDF.js

猜你喜欢