Android之WebView顯示PDF文檔

參考:https://blog.csdn.net/Android_Cll/article/details/131641229
https://cloud.tencent.com/developer/article/2301730
Android項目新增js:/app/src/main/assets/wwwroot/index.js 我新建了一個wwwroot放裏面了。自己看着辦。

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

同樣目錄,再新增一個index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=4.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>

webview加載pdf

package com.jay.myappstudy;

import android.app.Activity;
import android.content.Context;
import android.os.Build;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class WebViewPdfActivity extends Activity {
    private WebView mWv1;
    private Context ctx = this;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view_pdf);
        mWv1 = findViewById(R.id.wv1);
        WebSettings webSettings = mWv1.getSettings();
        // 允許javascript 設置支持JS就自動打開IndexedDB存儲機制
        webSettings.setJavaScriptEnabled(true);
        webSettings.setUseWideViewPort(true); //將圖片調整到適合WebView的大小
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setLoadWithOverviewMode(true); // 縮放至屏幕的大小
        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
        webSettings.setUserAgentString("User-Agent");
        //webSettings.setLightTouchEnabled(true);//設置用鼠標激活被選項
        webSettings.setBuiltInZoomControls(true);//設置支持縮放
        webSettings.setDomStorageEnabled(true);//設置DOM緩存,當H5網頁使用localStorage時,一定要設置
        webSettings.setDatabaseEnabled(true);
        //WebSettings.LOAD_NO_CACHE 設置去緩存,防止加載的爲上一次加載過的
        webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
        webSettings.setSupportZoom(true);//設置支持變焦
        mWv1.setHapticFeedbackEnabled(false);
        //webSettings.setPluginState(WebSettings.PluginState.ON);
        webSettings.setAllowFileAccess(true);
        webSettings.setAllowContentAccess(true);
        // 設置是否允許通過 file url 加載的 Javascript 可以訪問其他的源(包括http、https等源)
        webSettings.setAllowUniversalAccessFromFileURLs(true);
        // 支持通過JS打開新窗口
        webSettings.setAllowFileAccessFromFileURLs(true);
        webSettings.setDefaultTextEncodingName("UTF-8");
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

        webSettings.setGeolocationEnabled(true);
        webSettings.setAppCacheEnabled(false);
        mWv1.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);

        //觸摸焦點起作用
        mWv1.requestFocus();

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            //http與https的方法
            webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }
        mWv1.loadUrl("file:///android_asset/wwwroot/viewpdf.html?http://192.168.9.9:8090/1.pdf");
    }
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章