Android 使用webview浏览js文件/网页

最新推荐文章于 2022-03-10 15:25:11 发布

Vincent__Lee

最新推荐文章于 2022-03-10 15:25:11 发布

阅读量2k

点赞数

分类专栏： webview使用文章标签： pdf Android

本文链接：https://blog.csdn.net/li15225271052/article/details/79602247

版权

webview使用专栏收录该内容

11 篇文章 0 订阅

订阅专栏

首先，说明一下webview在ios上是可以很方便的直接预览pdf文件的，但是Android上的webview需要使用谷歌文档服务。如下：

mWebView.loadUrl("http://docs.google.com/gviewembedded=true&url=" + pdfUrl);

这种方式国内网络环境是不用考虑的。（你懂得）
那么下面我要介绍其他的方法了。

一、基本配置

WebSettings webSettings = mWebView.getSettings();
webSettings.setAllowFileAccess(true);--设置在WebView内部是否允许访问文件，默认允许访问。
webSettings.setAllowFileAccessFromFileURLs(true);--设置WebView运行中的一个文件方案被允许访问其他文件方案中的内容，默认值true
webSettings.setAllowUniversalAccessFromFileURLs(true);--设置WebView运行中的脚本可以是否访问任何原始起点内容，默认true

可以看到稍微注意下你之前有么有设置过就可以了，因为默认值都是true。

二、实现方式

方式一: 使用mozilla部署在github pages上的Viewer（这个方法我没有试过，不推荐）

View.loadUrl("http://mozilla.github.io/pdf.js/web/viewer.html?file=" + pdfUrl);

这种方式和使用google docs是差不多一样的，重要的是国内可以直接访问，但是会遇到跨域的问题。
方式二: 下载PDF.js放到assets目录下
pdf下载地址
下载好放到assets目录下，效果如下：
这里写图片描述
调用方式：

  mWebView.loadUrl("file:///android_asset/pdfjs/web/viewer.html?file=" + pdfUrl);

这种方式最大的缺陷是大，这个东西能使apk差不多会增大5m左右，这个对于我们来说肯定是不可以的，所以我们可以考虑吧PDF.js部署到服务端。
方式三:自定义预览界面，PDF.js使用cdn的方式导入
写两个文件index.html、index.js
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>

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)
    }
});

调用方式：

 mWebView.loadUrl("file:///android_asset/index.html?" + pdfUrl);

注意：这里index是根据文件名字来的，没啥意义，可以随便换但要和文件名一致。

这样我们最终放到assets目录下的就index.html和index.js两个文件，可以避免直接全部导入带来的apk体积增大的问题，但是同时功能就比较单一了只能预览，因为我们只是把pdf每一页用 canvas 画出来的，所以如果有交互方面的需求的话，还得改上面的文件。

三、遇到的坑

在直接实现预览的时候遇到显示模糊的问题，通过增大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;

四、实现效果

这里就给一个例子：

public class MainActivity extends AppCompatActivity {
    private WebView webView;
    private TextView textView;
    String pdfUrl = "https://www.mybiosource.com/images/tds/protocol_samples/MBS700_Antibody_Set_Sandwich_ELISA_Protocol.pdf";
    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView = findViewById(R.id.testview);
        webView = (WebView)findViewById(R.id.webview);
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setAllowFileAccess(true);
        webSettings.setAllowFileAccessFromFileURLs(true);
        webSettings.setAllowUniversalAccessFromFileURLs(true);
        webView.loadUrl("file:///android_asset/index.html?" + pdfUrl);
        //这个方法使用后，网页就会在自己浏览器中显示出来
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }

        });
        webView.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                Log.d("pdf pro = ",newProgress+"");
                textView.setText("加载进度："+newProgress);
            }


        });

    }
}