最近开发app,需要在app内浏览pdf文件内容,搜索到以下文章,按照其所述第3种方式实现了这个功能。
但这篇文章中代码只给了核心部分,没有给出全部代码,对于Android studio开发的小白来说,要想最终能实现,可能还有一定困难。本人经过摸索,以这篇文章所述为基本,在此基础上补全了代码以及所需的assets文件夹,形成了一个完整的as工程文件,程序文件还不完善,欢迎大家下载交流。
下边对整个过程做一说明:
目录
一、准备工作
1、建立assets文件夹
2、添加index.html文件和index.js文件
3、添加index.html和index.js文件代码
4、添加权限
5、layout文件编辑
二、添加主程序代码
三、运行结果
四、存在问题
1、有几处警告信息,对运行结果没有影响
2、试用了一些其他网站pdf链接发现异常
五、源代码
一、准备工作
1、建立assets文件夹
(1)选中app文件夹,鼠标右键单击 ->
(2)New ->(3)Folder ->(4)Assets Folder
按照上述操作步骤即可建立assets文件夹。
2、添加index.html文件和index.js文件
(1)选中assets文件夹,鼠标右键 ->(2)New ->(3)File ->
(4)在弹出的New File对话框中输入index.html -> (5)单击"OK"按钮,完成添加
按照上述操作步骤,添加index.js文件,添加完的效果如下图所示。
3、添加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>
<link rel="resource" type="application/l10n" href="locale/locale.properties">
<script src="https://unpkg.com/pdfjs-dist@1.9.426/build/pdf.min.js"></script>
<script src="https://unpkg.com/pdfjs-dist@1.9.426/build/pdf.worker.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)
}
});
4、添加权限
(1)点开在manifest文件夹,双击AndroidManifest.xml文件 ->
(2)添加权限:
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
5、layout文件编辑
点开layout文件夹,双击activity_main.xml文件,把原有默认代码删除,把以下代码粘贴进去,添加WebView视图完成,视图id为:view_web。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<WebView
android:id="@+id/view_web"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
二、添加主程序代码
双击打开MainActivity.class文件,把以下代码替换原有代码。
package com.example.mywebviewpdf;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
public class MainActivity extends AppCompatActivity {
private WebView mWebView;
private String url ="https://lingsy.oss-cn-beijing.aliyuncs.com/%E6%B5%85%E8%B0%88%E3%80%8A%E8%AF%97%E7%BB%8F%E3%80%8B%E4%B8%AD%E7%94%9F%E5%91%BD%E6%84%8F%E8%B1%A1%E7%9A%84%E6%83%85%E6%84%9F%E5%86%85%E6%B6%B5%E4%B8%8E%E4%BB%B7%E5%80%BC_%E9%A1%BE%E6%99%B4%E5%B7%9D.pdf";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = findViewById(R.id.view_web);
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setAllowFileAccess(true);
webSettings.setAllowFileAccessFromFileURLs(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);
webSettings.setSavePassword(false);
webSettings.setBuiltInZoomControls(true);
mWebView.setWebChromeClient(new WebChromeClient());
mWebView.loadUrl("file:///android_asset/index.html?" + url);
}
}
三、运行结果
四、存在问题
1、有几处警告信息,对运行结果没有影响
2、试用了一些其他网站pdf链接发现异常
代码中的PDF文件链接,为本人上传到服务器的文件,可以正常浏览。但对于其他几个网站上的pdf文件,调试会出现以下报错,找了好多文件,这个问题还没有解决,期待大神帮忙。
I/chromium: [INFO:CONSOLE(0)] "Uncaught (in promise) UnexpectedResponseException: Unexpected server response (0) while retrieving PDF "http://www.tushu007.com/ISBN-9787507514704.pdf".", source: file:///android_asset/index.html?http://www.tushu007.com/ISBN-9787507514704.pdf (0)