在webview中檢視PDF檔案--PDF.js

阿新 • • 發佈：2019-01-28

話不多說，目前要在國內Android平臺WebView中檢視PDF檔案，你應該找不到其他更好的方式了，只有PDF.js

PDF.js介紹：

pdf.js 是Mozilla的，主要用於在 HTML5 平臺上展示 PDF 文件，無需任何本地技術支援。

GitHub：https://github.com/mozilla/pdf.js/

下載包：http://mozilla.github.io/pdf.js/

整合：

1、下載下來的包解壓到資料夾pdfjs，資料夾pdfjs裡主要有3個部分

2、把這個資料夾整體放到asserts目錄中

3、當然你需要一個下載工具類，因為，這個pdf是要先下載到本地的

public class DownloadUtil {

public static void download(final String url, final String saveFile, final OnDownloadListener listener) {
    Request request = new Request.Builder().url(url).build();
    new OkHttpClient().newCall(request).enqueue(new Callback() {
        @Override
        public void onFailure(Call call, IOException e) {
            listener.onDownloadFailed(e.getMessage());
        }

        @Override
        public void onResponse(Call call, Response response) throws IOException {
            InputStream is = null;
            byte[] buf = new byte[2048];
            int len;
            FileOutputStream fos = null;
            try {
                is = response.body().byteStream();
                long total = response.body().contentLength();
                File file = new File(saveFile);
                fos = new FileOutputStream(file);
                long sum = 0;
                while ((len = is.read(buf)) != -1) {
                    fos.write(buf, 0, len);
                    sum += len;
                    int progress = (int) (sum * 1.0f / total * 100);
                    listener.onDownloading(progress);
                }
                fos.flush();
                listener.onDownloadSuccess(file.getAbsolutePath());
            } catch (Exception e) {
                listener.onDownloadFailed(e.getMessage());
            } finally {
                try {
                    if (is != null)
                        is.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
                try {
                    if (fos != null)
                        fos.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    });
}

public interface OnDownloadListener {
    void onDownloadSuccess(String path);

    void onDownloading(int progress);

    void onDownloadFailed(String msg);
}
}

4、下載並檢視PDF關鍵程式碼

private void download(String url) {
DownloadUtil.download(url, getCacheDir() + "/temp.pdf", new DownloadUtil.OnDownloadListener() {
            @Override
            public void onDownloadSuccess(final String path) {
                Log.d("MainActivity", "onDownloadSuccess: " + path);
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        preView(path);
                    }
                });
            }

            @Override
            public void onDownloading(int progress) {
                Log.d("MainActivity", "onDownloading: " + progress);
            }

            @Override
            public void onDownloadFailed(String msg) {
                Log.d("MainActivity", "onDownloadFailed: " + msg);
            }
        });
}


 /**
 * 預覽pdf
 *
 * @param pdfUrl url或者本地檔案路徑
 */
private void preView(String pdfUrl) {
//1.只使用pdf.js渲染功能，自定義預覽UI介面
// mWebView.loadUrl("file:///android_asset/index.html?" + pdfUrl);
//2.使用mozilla官方demo載入線上pdf
// mWebView.loadUrl("http://mozilla.github.io/pdf.js/web/viewer.html?file=" + pdfUrl);
//3.pdf.js放到本地
mWebView.loadUrl("file:///android_asset/pdfjs/web/viewer.html?file=" + pdfUrl);
//4.使用谷歌文件服務
// mWebView.loadUrl("http://docs.google.com/gviewembedded=true&url=" + pdfUrl);
}

5、說明

你應該已經看到了，檢視pdf提供了4種方式。

a）第4種不用考慮了，有牆的存在，google的服務是用不了了。

b）目前我使用的就是第3種。把PDF.js放在本地，apk包增加5M左右。

c）當然生產環境你也可以使用第2種，但是沒必要，跟第3種原理一樣，但是要去github上找個檔案，這就不太穩定了

d）第1種，使用自定義的UI介面，這個要前端同事寫個頁面用一下了。下面提供一個樣例。這兩個檔案都要放在assets目錄下。

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>

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

6、預覽本地PDF

當然，你也可以檢視本地PDF，只需要將pdf放到assets目錄中，然後，像這樣呼叫即可：

preView("file:///android_asset/JDK1.8.pdf");

不再贅述。

7、效果圖

歡迎關注微訊號，瞭解更多內容：OpenShare

在webview中檢視PDF檔案--PDF.js

話不多說，目前要在國內Android平臺WebView中檢視PDF檔案，你應該找不到其他更好的方式了，只有PDF.js PDF.js介紹： pdf.js 是Mozilla的，主要用於在 HTML5 平臺上展示 PDF 文件，無需任何本地技術支援。 GitHub：http

xcode,在webView中引入本地html,image,js,css檔案的方法

專案需求最近開發的專案，需要一個webView，同時這個webView會需要引入一些專案中的資源：一個本地的html檔案，作為webView的模板兩張loading圖片，在圖片未載入的時候進行佔位jquery.js,scrollLoading.js 也是本地的，實現滾動載入圖片功能然後就開始了漫長的Go

手機端閱讀 pdf 檔案 touchPDF.js

touchpdf 中文API 一款在手機端閱讀pdf 檔案的 js庫，能夠通過滑動進行 pdf 預覽翻頁 TouchPDF是一個jQuery外掛，它使用pdf.js短語和呈現支援觸控手勢和自動頁面選項卡的Web PDF檢視器。依賴關

擦他丫的，今天在Django專案中引用靜態檔案jQuery.js 就是引入報錯，終於找到原因了！

擦，今天在Django專案中引用靜態檔案jQuery.js 就是引入報錯，終於找到原因了！問題在於我使用的谷歌瀏覽器，預設使用了快取，導致每次訪問同一個url時，都返回的是快取裡面的東西。通過谷歌瀏覽器裡面的開發者工具network下面的選項能禁用快取。禁用快取後，則在django開發環境裡面，執行

TensorFlow中檢視checkpoint檔案中的變數名和對應值

在載入模型時，需要知道checkpoint中變數名稱，一下程式碼可以檢視TensorFlow中checkpoint檔案中的變數名： #!/usr/bin/env python # -*- coding:utf-8 -*- import os from tensorflow.pytho

如何在Ubuntu檔案管理器中檢視隱藏檔案和資料夾

Ubuntu檔案管理器本文介紹如何在Ubuntu 18.04 LTS系統上檢視Ubuntu檔案瀏覽器中的隱藏檔案和資料夾。您可以從Ubuntu桌面上的“活動”檢視訪問檔案瀏覽器。檢視隱藏內容的最簡單方法是在檔案瀏覽器開啟時使用Ctrl + h組合鍵。在下圖中，您可以看到現在顯示的所有隱藏內容：

mac中檢視.ssh檔案

因為一些原因需要重新生成github的ssh Key，但是找不到之前的安裝路徑的了。好在我是選擇預設路徑的，因此要找到ssh資料夾下的id_rsa.pub檔案，只需要：開啟終端輸入 $ open ~/.ssh 即可，開啟資料夾，就可以找到id_rsa.

Linux中檢視文字檔案內容命令cat/tac/nl/more/less/head/tail/vi總結

概述在Linux系統下，有很多命令可以檢視文字檔案的內容，如cat/tac/nl/more/less/head/tail等命令，當然還有vi/nano等文字編輯器。在這裡，我只介紹其中自己常用的一部分命令和操作。 cat：從第一行開始顯示全部的文字內容；

Linux中檢視日誌檔案的正確姿勢，求你別tail走天下了！

作為一個後端開發工程師，在Linux中檢視檢視檔案內容是基本操作了。尤其是通常要分析日誌檔案排查問題，那麼我們應該如何正確開啟日誌檔案呢？對於筆者這種小菜雞來說，第一反應就是 cat，tail，vi（或vim）了，是的，我曾經用過好多次vim編輯器來檢視日誌檔案。千萬不要使用vi命令來檢視大檔案內容，尤其

WPF中檢視PDF檔案-

最近研究了兩種PDF檔案檢視器，MoonPdfLib或者AdobeReader。今天先說第一種，在網上扒到的很好的WPF中用MoonPdf類庫來展示PDF檔案。在Sourceforge上下載到MoonPdf編譯好的Dll。 https://git

PDF.js —— vue專案中使用pdf.js顯示pdf檔案（流）

前言：專案中有一個需要預覽下載pdf的需求，網上找了很久，決定使用 pdf.js 完成。第一步：首先肯定是匯入外掛，我是從官網直接下載，連結：點選開啟連結，注意需要放在static檔案目錄下注意：這裡面有核心的pdf.js和pdf.worker.js,以及展示pdf的vi

網頁中使用pdf.js展示pdf檔案，全屏問題以及絕對路徑如何讀取

PDF展示 Web專案其中有個需求是在網頁中內嵌一個pdf展示,通過一側展示出來的檔案樹的點選事件，展示不同的pdf檔案，同時還要支援pdf的放大縮小旋轉全屏等功能。起初想了幾種方案： 1. 將pdf檔案轉換成tiff檔案（icepdf），公司有可以展示ti

vue專案中使用pdf.js預覽pdf檔案

專案要求需要預覽pdf檔案，網上找了很久，大多數都是推薦pdf.js，自己起了解了一下，最後決定用pdf.js，但是發現，在vue中使用這個很少！！！！！所以我就寫這一篇幫助一下vue使用pdfjs的朋友！其實這和前端框架無關的，直接使用pdf.js原生

mfc中控制元件的使用可以檢視本地pdf檔案(vs2013環境)

1.新建一個mfc對話方塊程式。 2.在此對話方塊上點選右鍵： 3.點選插入Activex控制元件，選擇： 4.點選後在對話方塊中顯示為： 5.右鍵點選這個控制元件，選擇類嚮導： 6.點進去後新增成員變數： 7.然後在程式中呼叫這個變數myweb的方法，即可

WEB中前臺JS控制列印PDF檔案

最近遇到專案中需要在瀏覽器中一鍵列印遠端PDF檔案，經過網上搜集資料最終選擇了在客戶端安裝adobe reader後，實現上從伺服器端下載一個pdf檔案流，在IE中用adobe外掛開啟（在前臺頁面中隱藏Object標籤），然後用adobe的列印選單通過prin

使用 pdf.js 在網頁中載入 pdf 檔案

在網頁中載入並顯示PDF檔案是最常見的業務需求。例如以下應用場景：（1）在電商網站上購物之後，下載電子發票之前先預覽發票。（2）電子政務管理系統中檢視釋出的公文，公文檔案一般是PDF格式的檔案。目前隨著瀏覽器技術發展的不斷成熟與強大，大部分的瀏覽器都支援直接把PDF檔案拖到瀏覽器中顯示，最方便的是這個

在PDF檔案中添加簽名的方法

工作中，時常會需要將紙質檔案掃描成PDF檔案。當我們忘記在紙質檔案上簽名而檔案已經掃描時，我們該如何直接在PDF檔案中添加簽名呢？今天，小編就給大家帶來在PDF檔案中添加簽名的方法。　　１、首先我們需要通過PDF編輯器開啟我們需要添加簽名的PDF檔案，這裡我們使用編輯器是比較常見的，其他編

springboot整合pdf.js用檔案流預覽本地磁碟pdf檔案

背景最近專案中有需求需要在前端上傳pdf檔案並進行預覽，上傳功能比較簡單。而pdf預覽的話，在網上對比個多個外掛後，確定使用pdf.js外掛進行pdf的展示。官網地址：[http://mozilla.github.io/pdf.js/] 程式碼實現將pdf.js檔案放入專案資原

另類爬蟲：從PDF檔案中爬取表格資料

簡介本文將展示一個稍微不一樣點的爬蟲。以往我們的爬蟲都是從網路上爬取資料，因為網頁一般用HTML,CSS,JavaScript程式碼寫成，因此，有大量成熟的技術來爬取網頁中的各種資料。這次，我們需要爬取的文件為PDF檔案。本文將展示如何利用Python的camelot模組

怎麼提取pdf檔案中的圖片

通常我們在網上下載的PDF檔案中，圖片和文字都是在一起的，當我們看到一些好看的圖片想儲存下來的時候，那麼，我們怎麼提取PDF檔案中的圖片呢，小編在這裡向大家簡單的介紹一下提取PDF檔案中的圖片吧。 1、PDF檔案大家都知道是無法修改的，那我們怎麼把裡面好看的圖片提取出來呢。2、首先我們要在電腦上安裝一個××

在webview中檢視PDF檔案--PDF.js

相關推薦