Android 에서 PDF.js 를 사용 하여 pdf 를 탐색 하 는 방법 예시

4780 단어 Android훑어보다pdf
Android 의 WebView 는 ios 의 WebView 를 만 들 수 없습니다.그러면 pdf 파일 을 편리 하 게 미리 볼 수 있 습 니 다.WebView 미리 보기 pdf 를 이용 하려 면 구 글 문서 서 비 스 를 사용 할 수 있 습 니 다.

mWebView.loadUrl("http://docs.google.com/gviewembedded=true&url=" + pdfUrl);
이런 방식 의 국내 인터넷 환경 은 고려 할 필요 가 없다.물론 대체 방안 도 있 습 니 다.우 리 는 mozilla 오픈 소스 의 PDF.js 를 사용 할 수 있 습 니 다.
Github
mozilla 공식 데모
WebView 설정:

WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setAllowFileAccess(true);
webSettings.setAllowFileAccessFromFileURLs(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);
이 실현 방식
방식 1:github pages 에 mozilla 를 사용 한 Viewer

View.loadUrl("http://mozilla.github.io/pdf.js/web/viewer.html?file=" + pdfUrl);
이런 방식 은 구 글 docs 를 사용 하 는 것 과 차이 가 많 지 않다.중요 한 것 은 국내 에서 직접 방문 할 수 있 지만 크로스 오 버 문제 에 부 딪 힐 수 있다 는 것 이다.
방식 2:PDF.js 다운로드assets 디 렉 터 리 에 넣 기

pdf 파일 이 도 메 인 을 넘 어 접근 할 수 없다 면 이 방식 을 사용 할 수 있 습 니 다.먼저 파일 을 로 컬 에 다운로드 한 다음 로 컬 파일 경로 로 전송 하여 pdf 를 미리 볼 수 있 습 니 다.

 mWebView.loadUrl("file:///android_asset/pdfjs/web/viewer.html?file=" + pdfUrl);
PDF.js 자 체 는 비교적 큰 라 이브 러 리 입 니 다.모두 로 컬 에 두 면 apk 차이 가 많 지 않 고 5m 정도 커 집 니 다.그 러 니까 PDF.js 를 서버 에 배치 하거나 cdn 을 사용 하 는 방식 을 고려 해 볼 수 있 습 니 다.
방식 3:사용자 정의 미리 보기 인터페이스,PDF.js cdn 방식 으로 가 져 오기
1.먼저 미리 보 기 된 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>
  <script src="https://unpkg.com/[email protected]/build/pdf.min.js"></script>
  <script type="text/javascript" src="index.js"></script>
</head>
<body>
</body>
</html>
2.미리 보기 index.js 구현

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)
  }
});
3.WebView 로 딩 html

 mWebView.loadUrl("file:///android_asset/index.html?" + pdfUrl);
이렇게 해서 우 리 는 마지막 으로 assets 디 렉 터 리 에 index.html 와 index.js 두 파일 을 넣 으 면 가 져 온 apk 의 부피 가 커지 는 문 제 를 피 할 수 있 습 니 다.미리 보기 UI 와 상호작용 에 대한 요구 가 있 으 면 html 수정 을 통 해 편리 하 게 실현 할 수 있 습 니 다.
문제
미리 보 기 를 직접 실현 할 때 모호 한 문 제 를 만 나 scale 계 수 를 확대 하여 해결 합 니 다.

var viewport = page.getViewport(2.0);//   2.0
pdf 내용 이 완전 하지 않 습 니 다.cMapUrl 과 cMapPacked 를 설정 하여 해결 합 니 다.

PDFJS.cMapUrl = 'https://unpkg.com/[email protected]/cmaps/';
PDFJS.cMapPacked = true;
4 실현 효과
mozilla viewer：

사용자 정의 미리 보기 인터페이스:

Github https://github.com/wangyiwy/PDF_Preview
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
View 시리즈 의 kotlin 사용자 정의 제스처 설정 온도 컨트롤 방법
사용자 정의 AlertDialog 검은색 배경 제거 솔 루 션

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage