Android 使用 WebView 直接加载 PDF 文件，通过 JS 实现

_无_妄_2025-08-26 11:49

加载 PDF 文件，使用 WebView 来进行加载PDF(比如某个远端文件 XXXX.pdf )。

需要两个文件，存放在 assets 目录下跟 WebViewActivity 同级

文件 1 pdf.js

ini 复制代码

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

文件 2 pdf.html

xml 复制代码

<!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></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="pdf.js"></script>
</head>
<body>
</body>
</html>

使用方法 webView.loadUrl("file:///android_asset/pdf.html?文件地址")