pdf.js 連續分頁展示pdf內容

阿新 • • 發佈：2018-11-25

如何使用pdf.js 將所有內容在同一頁中展示。本文將作出相應的展示，這類需求一般適用於手機，pad 等移動端。

前面部落格中，演示的內容。都是點選下一頁進行翻頁。後面有網友問，如何在一頁中展示出來，所以我把這塊補充上。

其實呢，只要知道展示一頁，如果要展示多個頁，核心就是增加個迴圈，建立canvas 物件接受每一頁的pdf檔案繪製。其他的流程和每頁顯示一篇pdf，在流程上是一樣的。

1:迴圈建立canvas 的程式碼

 var canvasList = document.getElementById('canvas_list');
 var canvas = document 
.createElement('canvas');
 canvasList.appendChild(canvas);
 canvasList.appendChild(document.createElement('hr'))

2: 迴圈繪製pdf 的核心程式碼

document.getElementById('page_count').textContent = '總頁數:' + pdfDoc.numPages;
for(var $i =1 ; $i <= pdfDoc.numPages ; $i++) {
    // Initial/first page rendering
    renderPage($i 
);
}

3:注意事項：
本文只是展示，沒有使用懶載入等效能優化手段，對體積較大的pdf，不太使用。

4:demo 下載地址
https://download.csdn.net/download/niedewang/10571405

5：完整html程式碼如下：

<html>
<head>
    <meta charset="utf-8">
    <title>pdf.js展示1，上一頁，下一頁</title>
</head>
<h1>PDF.js連續分頁展示</h1>

<div> 

    <span id="page_count"></span></span>
</div>

<div id="canvas_list">
    <canvas id="the-canvas"></canvas>
</div>


<script src="js/pdfjs/pdf.js"></script>
<script src="js/pdfjs/pdf.worker.js"></script>
<script>
    var url = '/pdf/demo1.pdf';

    var pdfDoc = null,
            pageNum = 1,
            pageRendering = false,
            pageNumPending = null,
            scale = 0.8;


    /**
     * Get page info from document, resize canvas accordingly, and render page.
     * @param num Page number.
     */
    function renderPage(num) {
        pageRendering = true;
        // Using promise to fetch the page
        pdfDoc.getPage(num).then(function(page) {
            var canvasList = document.getElementById('canvas_list');
            var canvas = document.createElement('canvas');
            canvasList.appendChild(canvas);
            canvasList.appendChild(document.createElement('hr'))

            var ctx = canvas.getContext('2d');
            var viewport = page.getViewport(scale);
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Render PDF page into canvas context
            var renderContext = {
                canvasContext: ctx,
                viewport: viewport
            };
            var renderTask = page.render(renderContext);

            // Wait for rendering to finish
            renderTask.promise.then(function() {
                pageRendering = false;
                if (pageNumPending !== null) {
                    // New page rendering is pending
                    renderPage(pageNumPending);
                    pageNumPending = null;
                }
            });
        });

    }

    /**
     * If another page rendering in progress, waits until the rendering is
     * finised. Otherwise, executes rendering immediately.
     */
    function queueRenderPage(num) {
        if (pageRendering) {
            pageNumPending = num;
        } else {
            renderPage(num);
        }
    }


    /**
     * Asynchronously downloads PDF.
     */
    PDFJS.getDocument(url).then(function(pdfDoc_) {
        pdfDoc = pdfDoc_;
        document.getElementById('page_count').textContent = '總頁數:' + pdfDoc.numPages;
        for(var $i =1 ; $i <= pdfDoc.numPages ; $i++) {
            // Initial/first page rendering
            renderPage($i);
        }

    });
</script>
</html>

pdf.js 連續分頁展示pdf內容

如何使用pdf.js 將所有內容在同一頁中展示。本文將作出相應的展示，這類需求一般適用於手機，pad 等移動端。前面部落格中，演示的內容。都是點選下一頁進行翻頁。後面有網友問，如何在一頁中展示出來，所以我把這塊補充上。其實呢，只要知道展示一頁，如果要展示多個頁，核心就是增加個

Node.js部落格系統--22.前臺內容分頁展示

首先寫相關邏輯具體程式碼如下所示 var express = require('express'); var router = express.Router(); var Category = require("../models/category"); var C

base64編碼後的pdf文件前端頁面展示--pdf.js的應用

如何 neu end ctype 創建 obj 展示文件 tle 最近在整理項目中用到的插件或者使用心得，感覺還是寫成博客，能加深新一層的理解。我先說一下我的需求：由於java後臺編譯的文件流在手機端加載速度太慢，所以想著可以在前端解析，放在頁面展示給用戶。所以，我需

js靜態資料分頁展示

拿vue做示例首先定義data data() { return { tableData: [], // 當前頁的資料，用於給表格展示用的 tableDataAll: [], // 需要拿來分頁的總資料 pagination: {

itextsharp 匯出PDF 包括圖片分頁(全面)

//主要程式碼 //計算最大table 有多少列 List<int> clSpanNum = new List<int>(); clSpanNum.Add(subResult.Count + 5);

vue-列印當前頁面為pdf檔案(不分頁----一頁)

1、npm 安裝 npm install jspdf --save npm install --save html2canvas 2、在需要列印的頁面匯入 import html2Canvas from “html2canvas”; import JsPDF from “jspdf”; 3、

pdf.js 利用HTML5技術顯示pdf內容

Mozilla實驗室最近在github上開源了一款js庫pdf.js，用來讀取PDF檔案。 http://mozilla.github.io/pdf.js/ Using base64 encodedPDF HTML頁面內容 <script src="//mo

數據分頁展示

int start class 展示 pack etc n) tla 當前頁 .gz package cn.gzsxt.util; import java.util.List; /** * 分頁封裝 */public class PageUtil { /** * 1

vue.js-列表分頁

class ons posit lap viewport tex .json cor -h <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> &l

fis3+vue+pdf.js制作預覽PDF文件或其他

制作 idt 心得路徑 cal 構建 ack 功能 demo 　　人生第一篇博客，的確有點緊張，但有些許興奮，因為這對於我來說應該是一個好的開始，以此勵誌在技術的道路上越走越遠。　　看過了多多少少的技術博客，給自己帶來了很多技術上的收獲，也因此在想什麽時候自己也可以贈人

js自動分頁加載所有數據

分頁加載 oot con 加載使用 ear last clas 執行原理：通過循環執行scrollTo直至滾動到頁面頂部，循環只能通過setInterval的方式，不能使用for循環。 var cur,last = 0,i = 1; cur = document.g

Laravel5.1 分頁展示

extends pcdn spa 參數實現 compact styles ted derby Laravel為我們提供了一套分頁的邏輯，我們無需自己實現分頁邏輯，只需要執行幾個簡單的方法就能實現漂亮的分頁。 1 simplePaginate 這是一種只顯示上一

純js實現分頁

jin js分頁 src 顯示行數 images 代碼 fun arc log 原理：所有數據已加載好，js通過遍歷部分顯示，實現分頁效果 html代碼 <html> <head> <meta charset=‘utf-8‘>

pdf.js如何跨域讀取pdf文件？

earch decode sed 廣州新一代 pla ont end php服務器 ech 今天，上線一個客戶網站之後（使用的是廣州新一代虛擬空間）發現在讀取上傳的pdf文件的時候讀取錯誤，通過直接在瀏覽器輸入文件地址的時候發現文件地址被重定向了（呵呵！），結果就是pdf文

Oracle+JSP+Servlet實現的資料分頁展示

前言在做任何事情之前，我們都應該清楚的知道這件事是什麼以及我們為什麼做這件事，分頁也不例外，我們在分頁之前首要要知道什麼是分頁？還要知道為什麼要去進行分頁？我們只有弄清楚了這兩個問題，才能去討論如何實現分頁。首先，說一下什麼是分頁以及為什麼進行分頁(這兩個概念放在一起講最合適)？

laravel 框架分頁展示

控制器程式碼 $list = table('user')->paginate(1) //每頁顯示的條數檢視程式碼 //輸出資料庫的內容 @foreach($list as $v) <tr> <td ali

解決js中分頁模組，分頁列表，怎麼做

最近工作中在做一個分頁列表的一個東西，要求在js中寫，不多比比，直接上關鍵程式碼 htmlText=htmlText+'<div class="page">'; //重寫分頁列表 //一頁的內容 var pageSize = parse

layui2.*資料表格分頁展示

直接列出js吧，說明資料表格雖然不算強大，但是簡單的展示渲染還是夠了我也滿足了，只是處理後臺寫罷了 html部分 <table id="demo" lay-filter="test"></table> <div id="page"></div&g

Word轉換Html後分頁展示--第二部分

這篇文章繼續上一篇”Word轉換Html後分頁展示--第一部分“ 實現 2. 當瀏覽器開啟Html頁面後需要執行一段計算分頁的js，這段js是在生成Html後通過改寫加入的。下面是上傳Servlet package com.word.servlet; import java.io

Word轉換Html後分頁展示--第一部分

前言 Word上傳後轉換為Html的問題已經解決，那麼現在問題來了，如果Word內容較多特別是圖片檔案，在網頁上檢視時，載入會耗時耗流量。解決方案就是分頁載入，類似百度文庫的方式。百度文庫對Word顯示是Html的，網上使

pdf.js 連續分頁展示pdf內容

相關推薦