Android studio 使用PDF.js浏览pdf的方法（含代码）

一只爬爬虫

已于 2022-10-08 18:59:04 修改

阅读量2.9k

点赞数 7

文章标签： android studio android ide

于 2022-08-30 19:40:18 首次发布

本文链接：https://blog.csdn.net/m0_72963799/article/details/126608819

版权

最近开发app，需要在app内浏览pdf文件内容，搜索到以下文章，按照其所述第3种方式实现了这个功能。(5条消息) Android 使用PDF.js浏览pdf的方法示例_李醉心的博客-CSDN博客

但这篇文章中代码只给了核心部分，没有给出全部代码，对于Android studio开发的小白来说，要想最终能实现，可能还有一定困难。本人经过摸索，以这篇文章所述为基本，在此基础上补全了代码以及所需的assets文件夹，形成了一个完整的as工程文件，程序文件还不完善，欢迎大家下载交流。

下边对整个过程做一说明：

一、准备工作

1、建立assets文件夹

2、添加index.html文件和index.js文件

3、添加index.html和index.js文件代码

一、准备工作

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>