jspdf閱讀器源碼,jspdf 中文

本文目錄一覽：

• 1、vue-pdf.js 在線預覽問題
• 2、如何創建pdf的buffer，讓pdf.js實現預覽pdf文件
• 3、使用js下載保存pdf文件

vue-pdf.js 在線預覽問題

最近修改公司vue項目中使用pdf.js來實現在線預覽上傳的各類文件.由於使用pdf.js在預覽時是直接在標籤內將src屬性賦值為要請求的地址.這就導致一個問題,會直接請求伺服器的文件路徑地址,而這個伺服器文件路徑就會暴露出來。處於安全性考慮在預覽請求時不再返回地址，改為通過調用普通介面,而是統一返迴流（word,pdf）或者base64(jpg,png…)。.前端再進行解析並實現在線預覽.

此時遇到第一個問題：

        這個請求是在插件中進行的無法攜帶項目中封裝的各類請求頭信息（token..等）。 翻看pdf.js源碼及網上總結.發現一個底層方法 

         該方法可傳一個對象作為參數,對象內可以添加url(所請求的介面),headers(請求頭信息)等…. . 有了這個方法就好處理了.

         最後在將該方法當做變數賦值給pdf的src.大功告成.

         最後再補充一些 : @loaded=”docLoaded” @page-loaded =”pageLoaded” 這兩個方法為載入預覽文件時的loading事件,

最後引一波示例,

如何創建pdf的buffer，讓pdf.js實現預覽pdf文件

PDF.js 是基於開放的 HTML5 及 JavaScript 技術實現的開源產品。簡單說就是一個 PDF 解析器。運用HTML5JavaScript（即pdf.js僅使用安全的web語言，不包含任何攻擊者可以用的本地代碼塊）的PDF閱讀器pdf.js，直接在標準的HTML頁面上載入和渲染PDF文件, 還可以提高安全性（不需要安裝第三方插件，安全性由瀏覽器保證），瀏覽器所做的安全措施已經為pdf.js提供了安全的運行環境。其對IE和 FireFox瀏覽器的要求是IE9+, FireFox19+。

在線示例： ，

源碼：

官網：

pdf.js VS 傳統瀏覽器讀取pdf

一般來說，PDF檔案格式都是在瀏覽器中由外掛程式來描繪，通常是Adobe自己的PDF reader或來自其他供應商的描繪工具，但這些外掛通常無法充分運用PDF的特點，而且由於含有大量的受信任代碼，使得Google Chrome瀏覽器必須運用SandBox沙箱原理，來檢查PDF描繪工具是否遭到未知病毒感染。

使用adobe，必須在本地安裝軟體才能使用，而pdf.js不依賴環境、渲染速度快（測試過，確實很快）、安全性高。

pdf.js渲染PDF文件

pdf.js渲染PDF文件的流程：Fetch pdf (url / buffer) —— canvas —— 渲染

如果要深入pdf的渲染，需要去研究pdf.js源代碼。pdf.js可通過pdf文件的地址或pdf數據流獲取pdf，具體實現是調用介面函數 PDFJs.getDoc(url/buffer)將pdf載入html，通過canvas處理, 然後渲染pdf文件。網上給出的都是通過url來獲取pdf的例子，而我在做項目的時候，後台（python）要求是發pdf的數據流給前台，前台接收pdf的buffer,然後通過pdf.js來渲染。當然最初嘗試buffer出現了很多問題，具體問題總結如下：

1）如何通過$.ajax接收後台發給前台的buffer數據；

2）如何將buffer傳給pdf.js來處理（這裡我使用了viewer.js, 所以需要考慮的是如何將buffer傳給viewer.js來處理）；

3）如何將pdf.js轉換成pdf.js可以接收的buffer格式；

（對應問題解決見代碼注釋）

註：viewer.js是pdf.js的擴展，其將列印、翻頁、縮放等功能進行了實現，且界面非常好看。也就是說如果你引入了viewer.js，pdf的渲染和渲染之後的功能界面都已經幫你實現了，你不用自己去寫界面。

先從官網： 下載代碼，然後使用文件viewer.html , 我的html就是在viewer.html 的基礎上修改的，下面我給出buffer的例子：

!DOCTYPE html

html dir=”ltr” mozdisallowselectionprint moznomarginboxes

head

meta charset=”utf-8″

meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″

meta name=”google” content=”notranslate”

title在線預覽/title

{% load static %}{% get_static_prefix as STATIC_URL %}

link href=”{{STATIC_URL}}css/preview.css” rel=”stylesheet” type=”text/css” /

link rel=”stylesheet” href=”{{STATIC_URL}}pdfjs/web/viewer.css”/

script type=”text/javascript” src=”{{STATIC_URL}}pdfjs/web/compatibility.js”/script

link rel=”resource” type=”application/l10n” href=”{{STATIC_URL}}pdfjs/web/locale/locale.properties”/

script type=”text/javascript” src=”{{STATIC_URL}}pdfjs/web/l10n.js”/script

script type=”text/javascript” src=”{{STATIC_URL}}pdfjs/build/pdf.js”/script

script type=”text/javascript” src=”{{STATIC_URL}}pdfjs/web/debugger.js”/script

script src=”{{STATIC_URL}}js/jquery-1.8.3.js” type=”text/javascript”/script

script type=”text/javascript”

//convertDataURIToBinary()

//不知道什麼原因如果後台直接將pdf的數據流發給前台，得到的是亂碼，將數據轉換成 Uint8Array始終不成功

//所以就讓後台將發送之前的數據流做 了base64編碼發給前台，前台再解碼得到的數據就不是亂碼了。

var BASE64_MARKER = ‘;base64,’;

var preFileId = {{mark}};

//viewer.js全局變數,傳入buffer，回答問題2

var DEFAULT_URL

$(document).ready(function(){

$.ajax({

type:”post”,

async: false,

//ajax接收pdf數據流，注意dataType值的設置是否有錯，如果不指定，jQuery將自動根據HTTP包MIME信息返回

//responseXML或responseText . 回答問題1

contentType:”application/pdf;charset=utf-8″,

url:”{% url netPan.File.views.browserFuf%}”,

data:{

id: preFileId

},

success:function(data){

var pdfAsDataUri = data;

//如果引入了viewer.js , 處理方法

var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);

DEFAULT_URL = pdfAsArray;

// 只引入了pdf.js, 未引入viewer.js， 處理方法

// var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);

// PDFJS.getDocument（pdfAsArray).then(); 自己寫pdf的處理函數

}

});

});

function convertDataURIToBinary(dataURI) { //編碼轉換，回答問題3

var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;

var base64 = dataURI.substring(base64Index);

var raw = window.atob(base64);

var rawLength = raw.length;

//轉換成pdf.js能直接解析的Uint8Array類型,見pdf.js-4068

var array = new Uint8Array(new ArrayBuffer(rawLength));

for(i = 0; i rawLength; i++) {

array[i] = raw.charCodeAt(i);

}

return array;

}

/script

!–先設置全局變數DEFAULT_URL 的值，所以要後調入viewer.js —

script type=”text/javascript” src=”{{STATIC_URL}}pdfjs/web/viewer.js”/script

/head

body

省略內容

/body

/html

使用js下載保存pdf文件

pdf.js

是基於開放的

html5

及

javascript

技術實現的開源產品。簡單說就是一個

pdf

解析器。運用html5javascript（即pdf.js僅使用安全的web語言，不包含任何攻擊者可以用的本地代碼塊）的pdf閱讀器pdf.js，直接在標準的html頁面上載入和渲染pdf…