pdf.js 入門使用指南4-手機端瀏覽pdf(touch.js)

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

經過測試，使用pdf.js這個開源庫，自己編寫程式碼實現pdf 檔案瀏覽也不是很複雜。參照我以前的blog文章，如果要實現上一頁，下一頁，旋轉等都非常簡單。
但是，手機端是個比較依賴手勢特殊存在。如果要實現如下功能：

1：雙指放大，通過捏合雙指進行放大或縮小
2：單個手指移動，放大後，通過單指移動，定位到pdf指定的區域
3：左右滑動分頁，比如左滑上一頁，右滑下一頁。

如果要實現如上功能，自己編寫的話，還真不容易。
但有一個現成的開源外掛–touch.js .已經實現上述的所有功能，並且還具有章節導航等其他附加功能。
1：touch.js 介紹

touch.js 是I整合了pdf.js,PanZoom TouchSwipe
等多個開源系統，實現了專用於手機端瀏覽的系統。簡單的說，你想用最小的程式碼，想在手機端簡單的瀏覽pdf的話，那麼touch,js
是您的最佳選擇

2：下載安裝
2.1:軟體github

https://github.com/loicminghetti/touchpdf

2.2:下載地址

https://github.com/loicminghetti/touchpdf/archive/master.zip

3：目錄結構

請注意，如果要預覽demo,本地需要安裝iis,apache 等web服務區端

目錄結構

4：核心程式碼
請注意：官方demo ，jquery 使用的 google 的cdn ,國內可能無法訪問，請更換（具體百度， jquery cdn,版本1.11已上）
程式碼結構

5：顯示效果如下圖
這裡寫圖片描述

6：功能示意圖，縮放等功能非常強大
功能展示圖片

雙指捏合放大縮小
向左滑動上一頁
向右滑動下一頁
可以有章節導航
。。。。

7：完成程式碼

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta charset="UTF-8">
  <title>TouchPDF</title>
  <link href 
="../jquery.touchPDF.css" rel="stylesheet" media="screen" />
    <style>
        body , html{
            background-color: #404040;
            height: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>

<div id="myPDF" style="height: 95%; width: 95%; margin: auto;"></div>


<script type="text/javascript" src="../pdf.compatibility.js"></script>
<script type="text/javascript" src="../pdf.js"></script>
<script
        src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous"></script>
<script type="text/javascript" src="../jquery.touchSwipe.js"></script>
<script type="text/javascript" src="../jquery.touchPDF.js"></script>
<script type="text/javascript" src="../jquery.panzoom.js"></script>
<script type="text/javascript" src="../jquery.mousewheel.js"></script>

<script type="text/javascript">

    $(function() {
        $("#myPDF").pdf( {
            source: "demo.pdf",
            tabs: [
                {title: "第一章", page: 2, color: "orange"},
                {title: "第二章", page: 3, color: "green"},
                {title: "第三章", page: 5, color: "blue"},
            ]
        } );
    });

</script>
</body>
</html>

8：demo ,jquery cdn 更改後的版本
下載地址

https://download.csdn.net/download/niedewang/10427314

9：總結
如果您只需要展示pdf，那麼本外掛非常合適。
但也有如下缺點

該程式碼最新程式碼是兩年前，近期不怎麼維護了

使用核心元件pdf.js 版本較老，0.4

如果要深度定製，需要考慮定製成本，應為該系統整合了多個開源js外掛

pdf.js 入門使用指南4-手機端瀏覽pdf(touch.js)

經過測試，使用pdf.js這個開源庫，自己編寫程式碼實現pdf 檔案瀏覽也不是很複雜。參照我以前的blog文章，如果要實現上一頁，下一頁，旋轉等都非常簡單。但是，手機端是個比較依賴手勢特殊存在。如果要實現如下功能： 1：雙指放大，通過捏合雙指進行放大或縮小 2：單個手指

手機端閱讀 pdf 檔案 touchPDF.js

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

易學筆記-第2部分 Node.js入門指南/第5章 Node.js在幣圈流行麼

第2部分 Node.js入門指南/第5章 Node.js在幣圈流行麼/5.1 Node.js在開源社群很流行 Node.js在開源社群很流行概念：JavaScript大部分專案都是建立在Node.js平臺之上的在Github上專案採用的語言統計，JavaScr

js實現自動識別手機端pc端跳轉

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

three.js 入門指南（敷衍一下）

今天看了一本好書three.js,感覺特別適合我這種對three.js 瞭解不深的人。其實要學習three.js,還有許多其他方面的知識要了解，例如如何繪製多邊形，如何繪製曲線，攝像機的一些基礎知識等等。推薦一本老外的three.js指南 https://pan.baidu.com/

pdf.js實現在HTML下直接瀏覽pdf文件，無需外掛即可實現

近期，有一個朋友做B端，伺服器存了大量的金融類資料，很多都是pdf文件，他現在的做法是，先將pdf文件轉換成flash,再放到瀏覽器上給使用者瀏覽，但是他告訴我，這種體驗太差了，而且很好資源，空間已經快不夠了，向我諮詢有沒有可以直接讀取pdf文件的，我之前也沒做過，於是，我簡單搜尋了一下，還真是有，下面給

手機端網頁返回頂部js程式碼

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <

Ember.js 入門指南（二）

@(Ember)[MVVM|前端框架|HTML桌面應用] 序言經常有人質疑，在前端搞MV*有什麼意義？也有人跟我提出這樣的疑問：以AngularJS，Knockout，BackBone為代表的MV*框架，它跟jQuery有什麼區別？我jQuery用

Ember.js 入門指南——處理事件

ber.js 入門指南——處理事件你可以在元件中響應事件，比如使用者的雙擊、滑鼠滑過、鍵盤的按下等等事件。只需要在元件類中增加Ember提供的處理事件，然後Ember會自動判斷使用者的操作執行相應的事件，只要在元件類中新增的事件不衝突你甚至一次性增加多個

Ember.js 入門指南——控制器（controller）

ember new chapter5_controllers cd chapter5_controllers ember server 從本篇開始進入第五章控制器，controller在Ember2.0開始越來越精簡了，職責也更加單一——處理邏輯。下面是準備工作。

Ember.js 入門指南——非同步路由

本文將為你介紹路由的高階特性，這些高階特性可以用於處理專案複雜的非同步邏輯。關於單詞promises，直譯是承諾，但是個人覺得還是使用原文吧。讀起來順暢點。 1，promises（承諾） Ember的路由處理非同步邏輯的方式是使用promises。簡

Ember.js 入門指南——元件定義

不得不說，Ember的更新是在是太快了！！本教程還沒寫到一半就又更新到v2.1.0了！！！！不過為了統一還是使用官方v2.0.0的參考文件！！從本篇開始進入新的一章——元件。這一章將用6篇文章介紹Ember的元件，從它的定義開始知道它的使用方式，

Ember.js 入門指南——路由定義

當你的應用啟動的時候，路由器就會匹配當前的URL到你定義的路由上。然後按照定義的路由層次逐個載入資料、設定應用程式狀態、渲染路由對應的模板。 1，基本路由在app/router.js的map方法裡定義的路由會對映到當前的URL。當map方法被

p5.js入門教程(4) 滑鼠互動

一、滑鼠互動常用關鍵詞 p5.js提供了許多滑鼠操作用的關鍵詞與函式，常用的有： mouseIsPressed：關鍵詞，若滑鼠按下則為true，反之為false mouseButton：關鍵詞，用來判斷滑鼠按下的是哪個鍵案例如下： function setup() {

手機端喚醒APP 、js 微信分享

#喚醒APP var ifr = document.createElement("iframe"); ifr.src = 'xiaosi://caizhidao:8888'; ifr.style.display

Ember.js 入門指南——新建、更新、刪除記錄

前一篇介紹了查詢方法，本篇介紹新建、更新、刪除記錄的方法。本篇的示例程式碼建立在上一篇的基礎上。對於整合firebase、建立route和template請參看上一篇，增加一個controller：ember g controller articles。 1，新建

Ember.js 入門指南——{{action}} 助手

action助手所現實的功能與javascript裡的事件是相似的，都是通過使用者點選元素觸發定義在元素上的事件。Ember的action助手還允許你傳遞引數到對應的controller、component類，在controller或者component上處理事件的邏輯。

Ember.js 入門指南——工具類的助手

本篇主要介紹格式轉換、自定義helper、自定義helper引數、狀態helper、HTML標籤轉義這幾個方面的東西。按照文章慣例先準備好測試所需要的資料、檔案。仍然是使用Ember CLI命令，這次我們建立的是helper、controller、route

Ember.js 入門指南——繫結（bingding）

正如其他的框架一樣Ember也包含了多種方式繫結實現，並且可以在任何一個物件上使用繫結。也就是說，繫結大多數情況都是使用在Ember框架本身，對於開發最好還是使用計算屬性。 1，雙向繫結 // 雙向繫結 Wife = Ember.Object.extend(

Ember.js 入門指南——路由切換的防止和重試

在路由的切換過程中，Ember路由器會通過回撥（beforeModel、model、afterModel、redirect）解析一個transition物件到切換的下一路由中。任何一個回撥都可以通過傳遞過來的transition引數獲取transition物件，然

pdf.js 入門使用指南4-手機端瀏覽pdf(touch.js)

相關推薦