前言
Android的webview壓根就不支持加載pdf，Android與iOS不同，iOS加載pdf，不管本地還是在線，直接使用webview渲染就可以了，而Android卻做不到，所以我們必須得扣腦殼了。方法也有很多種，比如第三方PDFview，MuPDF等，但是不推薦，引入進去apk體積會大很多，所以大多場景都是通過js解析，然后在webview中加載PDF文件，所以內(nèi)庫很小也就2兆多，那我們就開始吧。
一、效果圖
二、實現(xiàn)步驟
1.在項目main目錄下新建一個assets
2.新建一個js為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)
}
});
3.新建一個HTML為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/pdfjs-dist@1.9.426/build/pdf.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
</body>
</html>
4.xml布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff">
<include
android:id="@+id/include"
layout="@layout/title_layout" />
<WebView
android:id="@+id/pdfwebview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/gosign"
android:layout_below="@+id/include" />
<TextView
android:id="@+id/gosign"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
android:layout_marginLeft="30dp"
android:layout_marginTop="10dp"
android:layout_marginRight="30dp"
android:layout_marginBottom="30dp"
android:background="@drawable/blackground_home_blue"
android:gravity="center"
android:text="Go Sign"
android:textColor="#ffffff"
android:textSize="16dp" />
</RelativeLayout>
4.Activity類（kotlin）
注意：activity代碼要點在于WebSettings設(shè)置的參數(shù)和loadUrl()加載URL時加"file:///android_asset/index.html?"
class PDFWebViewActivity : Activity(), OnClickListener {
private lateinit var relative_back: RelativeLayout
private lateinit var text_title: TextView
private lateinit var url: String//接收URL
private lateinit var title: String//接收title
private lateinit var pdfwebview: WebView
private lateinit var gosign: TextView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
//去掉狀態(tài)欄
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
val decorView = window.decorView
val option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or View.SYSTEM_UI_FLAG_LAYOUT_STABLE
decorView.systemUiVisibility = option
window.statusBarColor = Color.parseColor("#00000000")
}
//修改狀態(tài)欄文字為黑色
window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or
View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
setContentView(R.layout.pdfwebviewlayout)
url = intent.getStringExtra("url")!!.trim { it <= ' ' }
title = intent.getStringExtra("title")!!.trim { it <= ' ' }
instantiation()
}
fun instantiation() {
EventBus.getDefault().register(this)
relative_back = findViewById(R.id.relative_back)
text_title = findViewById(R.id.text_title)
text_title.text = title
pdfwebview = findViewById(R.id.pdfwebview)
gosign = findViewById(R.id.gosign)
gosign.setOnClickListener(this)
relative_back.setOnClickListener(this)
webviewDe(url)
}
override fun onClick(v: View?) {
when (v?.id) {
R.id.relative_back ->
finish()
}
}
/**
* webview顯示
*/
@SuppressLint("SetJavaScriptEnabled", "JavascriptInterface")
private fun webviewDe(url: String) {
println("網(wǎng)頁url打?。?/span>$url")
val webSettings: WebSettings = pdfwebview.getSettings()
webSettings.cacheMode = WebSettings.LOAD_DEFAULT
//設(shè)置加載進來的頁面自適應(yīng)手機屏幕
webSettings.useWideViewPort = true
webSettings.loadWithOverviewMode = true
//問題2：基本都需要支持JS
webSettings.javaScriptEnabled = true
webSettings.allowFileAccess = true
//支持通過JS打開新窗口
webSettings.allowFileAccessFromFileURLs = true
webSettings.allowUniversalAccessFromFileURLs = true
webSettings.javaScriptCanOpenWindowsAutomatically = true
webSettings.setGeolocationEnabled(true)
webSettings.domStorageEnabled = true
webSettings.setAppCacheEnabled(false)
pdfwebview.scrollBarStyle = WebView.SCROLLBARS_OUTSIDE_OVERLAY
//觸摸焦點起作用
pdfwebview.requestFocus()
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
//http與https的方法
webSettings.mixedContentMode = WebSettings.MIXED_CONTENT_ALWAYS_ALLOW
}
// 添加js交互接口類，并起別名 Android
pdfwebview.addJavascriptInterface(JavascriptImgInterface(), "Android")
//設(shè)置WebChromeClient類
pdfwebview.webChromeClient = object : WebChromeClient() {
//獲取網(wǎng)站標(biāo)題
override fun onReceivedTitle(view: WebView, title: String) {
println("標(biāo)題在這里$title")
}
//圖片選取
override fun onShowFileChooser(
webView: WebView,
filePathCallback: ValueCallback<Array<Uri>>,
fileChooserParams: FileChooserParams,
): Boolean {
return true
}
}
//設(shè)置WebViewClient類
pdfwebview.webViewClient = object : WebViewClient() {
override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {
// 返回值是true的時候控制去WebView打開，為false調(diào)用系統(tǒng)瀏覽器或第三方瀏覽器
view.loadUrl(url)
return true
}
//設(shè)置加載前的函數(shù) kotlin這里favicon: Bitmap?的Bitmap?必須加?
override fun onPageStarted(view: WebView, url: String, favicon: Bitmap?) {
if (!this@PDFWebViewActivity.isFinishing)
{
println("開始加載了")
DialogUtils.showLoadingDialog(this@PDFWebViewActivity)
}
}
//設(shè)置結(jié)束加載函數(shù)
override fun onPageFinished(view: WebView, url: String) {
println("結(jié)束加載了")
try {
DialogUtils.hideLoadingDialog()
} catch (e: Exception) {
}
}
}
pdfwebview.loadUrl("file:///android_asset/index.html?$url")
}
class JavascriptImgInterface {
/**
* 注意： 在Android4.2極其以上系統(tǒng)需要給提供js調(diào)用的方法前加入一個注釋：@JavaScriptInterface;
* 在虛擬機當(dāng)中 Javascript調(diào)用Java方法會檢測這個anotation，
* 如果方法被標(biāo)識@JavaScriptInterface則Javascript可以成功調(diào)用這個Java方法，否則調(diào)用不成功。
*/
//js調(diào)用Android方法給web返回Token值
@JavascriptInterface
open fun Android_Token(): String? {
println("打印的token：" + SpUtil.get(ConstantUtil.TOKEN, ""))
return SpUtil.get(ConstantUtil.TOKEN, "")
}
}
}
5.Activity類（Java）
注意：activity代碼要點在于WebSettings設(shè)置的參數(shù)和loadUrl()加載URL時加"file:///android_asset/index.html?"文章來源：http://www.zghlxwxcb.cn/news/detail-545873.html
public class PDFWebViewActivity extends Activity implements View.OnClickListener {
private String url;//接收URL
private String title;//接收title
private ImageView left_black_risk;//返回鍵
private TextView text_title;//title
private RelativeLayout gosign;//去簽名
private static String message;//返回消息
private WebView webviewx5;//webview
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//去掉狀態(tài)欄
if (Build.VERSION.SDK_INT >= 21) {
View decorView = getWindow().getDecorView();
int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
decorView.setSystemUiVisibility(option);
getWindow().setStatusBarColor(Color.parseColor("#00000000"));
}
//修改狀態(tài)欄文字為黑色
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
setContentView(R.layout.pdfwebviewlayout);
url = getIntent().getStringExtra("url").trim();
title = getIntent().getStringExtra("title").trim();
instantiation();
}
private void instantiation() {
webviewx5 = findViewById(R.id.webview);
left_black_risk = findViewById(R.id.left_black_risk);
text_title = findViewById(R.id.text_title);
gosign = findViewById(R.id.gosign);
text_title.setText(title);
left_black_risk.setOnClickListener(this);
gosign.setOnClickListener(this);
webviewDe(url);
}
/**
* webview顯示
*/
@SuppressLint({"SetJavaScriptEnabled", "JavascriptInterface"})
private void webviewDe(String url) {
System.out.println("網(wǎng)頁url打印：" + url);
WebSettings webSettings = webviewx5.getSettings();
webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
//設(shè)置加載進來的頁面自適應(yīng)手機屏幕
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
//問題2：基本都需要支持JS
webSettings.setJavaScriptEnabled(true);
webSettings.setAllowFileAccess(true);
//支持通過JS打開新窗口
webSettings.setAllowFileAccessFromFileURLs(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
webSettings.setGeolocationEnabled(true);
webSettings.setDomStorageEnabled(true);
webSettings.setAppCacheEnabled(false);
webviewx5.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
//觸摸焦點起作用
webviewx5.requestFocus();
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
//http與https的方法
webSettings.setMixedContentMode(MIXED_CONTENT_ALWAYS_ALLOW);
}
// 添加js交互接口類，并起別名 Android
webviewx5.addJavascriptInterface(new JavascriptImgInterface(), "Android");
//設(shè)置WebChromeClient類
webviewx5.setWebChromeClient(new WebChromeClient() {
//獲取網(wǎng)站標(biāo)題
@Override
public void onReceivedTitle(WebView view, String title) {
System.out.println("標(biāo)題在這里" + title);
}
//圖片選取
@Override
public boolean onShowFileChooser(WebView webView,
ValueCallback<Uri[]> filePathCallback,
FileChooserParams fileChooserParams) {
return true;
}
});
//設(shè)置WebViewClient類
webviewx5.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// 返回值是true的時候控制去WebView打開，為false調(diào)用系統(tǒng)瀏覽器或第三方瀏覽器
view.loadUrl(url);
return true;
}
//設(shè)置加載前的函數(shù)
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
if (!PDFWebViewActivity.this.isFinishing())//xActivity即為本界面的Activity
{
System.out.println("開始加載了");
DialogUtils.showLoadingDialog(PDFWebViewActivity.this);
}
}
//設(shè)置結(jié)束加載函數(shù)
@Override
public void onPageFinished(WebView view, String url) {
System.out.println("結(jié)束加載了");
try {
DialogUtils.hideLoadingDialog();
} catch (Exception e) {
}
}
});
webviewx5.loadUrl("file:///android_asset/index.html?" + url);
}
public class JavascriptImgInterface {
/**
* 注意： 在Android4.2極其以上系統(tǒng)需要給提供js調(diào)用的方法前加入一個注釋：@JavaScriptInterface;
* 在虛擬機當(dāng)中 Javascript調(diào)用Java方法會檢測這個anotation，
* 如果方法被標(biāo)識@JavaScriptInterface則Javascript可以成功調(diào)用這個Java方法，否則調(diào)用不成功。
*/
//js調(diào)用Android方法給web返回Token值
@JavascriptInterface
public String Android_Token() {
System.out.println("打印的token：" + SpUtil.get(ConstantUtil.TOKEN, ""));
return SpUtil.get(ConstantUtil.TOKEN, "");
}
//js調(diào)用Android方法下載apk
@JavascriptInterface
public String Android_DownloadApk(String url) {
//方式一：代碼實現(xiàn)跳轉(zhuǎn)
Intent intent = new Intent();
//通過intent發(fā)送數(shù)據(jù)
intent.setAction("android.intent.action.VIEW");
//創(chuàng)建一個鏈接 鏈接.語法解析
Uri content_url = Uri.parse(url);
//通過intent接受
intent.setData(content_url);
//開始于當(dāng)前intent
startActivity(intent);
return url;
}
}
@Override
public void onClick(View view) {
switch (view.getId()) {
//返回鍵
case R.id.left_black_risk:
finish();
break;
//去簽名
case R.id.gosign:
break;
}
}
}
總結(jié)
以上便是通過加載js的方式預(yù)覽PDF文件了，都有注釋自己慢慢去理解，有問題歡迎提出并指正！文章來源地址http://www.zghlxwxcb.cn/news/detail-545873.html
到了這里，關(guān)于Android之WebView加載PDF鏈接預(yù)覽PDF文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
