方法一：assets文件下创建 pdf.thml和pdf.js

pdf.html 文件内容为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=4.0,user-scalable=yes"/>
    <title>PDF查看</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="pdf.js"></script>
</head>
<body>
</body>
</html>

pdf.js 文件内容为：

var url = location.search.substring(1);
pdfjsLib.cMapUrl = 'https://unpkg.com/[email protected]/cmaps/';
pdfjsLib.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({scale:2.0});
        var canvas = createPage();
        var ctx = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        page.render({
            canvasContext: ctx,
            viewport: viewport
        });
    });
}
pdfjsLib.getDocument(url).promise.then(function (pdf) {
    pdfDoc = pdf;
    for (var i = 1; i <= pdfDoc.numPages; i++) {
        renderPage(i)
    }
});

我们在代码里使用方法：

//此方法可以在webview中打开链接而不会跳转到外部浏览器
                webView.setWebViewClient(new WebViewClient());
                //此方法可以启用html5页面的javascript
                webView.getSettings().setJavaScriptEnabled(true);
                webView.getSettings().setGeolocationEnabled(true);
                //自适应屏幕
                webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
                webView.getSettings().setLoadWithOverviewMode(true);
                //设置可以支持缩放
                webView.getSettings().setSupportZoom(true);
                webView.getSettings().setUseWideViewPort(true);
                webView.getSettings().setBuiltInZoomControls(true);
                webView.getSettings().setDisplayZoomControls(false);
                webView.getSettings().setAllowFileAccess(true);
                webView.getSettings().setAllowFileAccessFromFileURLs(true);
                webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
                webView.loadUrl(url);

最后，在测试的时候，发现这样去访问跨域的文件就不行；看了看前端同事的操作

扫描二维码关注公众号，回复： 15249157 查看本文章

突然去试着模仿这样写了写，发现是可行的

先把网络路径用 Base64进行编码进行编码，再用 encodeURIComponent 进行编码。最后在加载的时候这样

//网址前面的部分是 文件预览的
webView.loadUrl("http://127.0.0.1:8012/onlinePreview?url=" + 转码后的地址);

方法二：新的SDK

上面的方法可能在使用过程中有不便之处，后面发现了一个新的SDK，可以直接使用

首先，添加依赖

implementation 'com.wdeo3601:pdf-view:1.0.4'

注意：添加该依赖后，若要正常运行，所有module的minSdkVersion不可小于21，即 android 5.0

xml页面布局

<com.wdeo3601.pdfview.PDFView 
    android:id="@+id/pdfView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

activity中使用：

// 设置当前显示页的前后缓存个数，效果类似 ViewPager 的这个属性
pdfView.setOffscreenPageLimit(2)
// 是否支持缩放
pdfView.isCanZoom(true)
// 设置最大缩放倍数,最大支持20倍
pdfView.setMaxScale(10f)
// 从本地文件打开 pdf
pdfView.showPdfFromPath(filePath)
// 从网络打开 pdf
//pdfView.showPdfFromUrl("url")

至此，就可以加载PDF了

个人感觉如果只需要加PDF，方法二就可以直接使用了。如果还需要显示其它类型文件，建议使用方法一

Android 在线预览PDF

方法一：assets文件下创建 pdf.thml和pdf.js

方法二：新的SDK

猜你喜欢