1. 程式人生 > >瀏覽器線上瀏覽PDF檔案之pdf.js

瀏覽器線上瀏覽PDF檔案之pdf.js

場景

解決方案

注意: PDF.js is a Portable Document Format (PDF) viewer that is built with HTML5.
PDF.js is community-driven and supported by Mozilla Labs. Our goal is to create a general-purpose, web standards-based platform for parsing and rendering PDFs.

上面的文字說明pdf.js是基於h5來實現的,所以這個只能是支援h5的瀏覽器才能使用。
2. 按照官網的Getting Started


剛開始一看用npm,不知道這是個上面命令,後來查閱資料發現是node.js的命令。所以我們首先要先安裝node.js:在公司下載的好久才下載下來一個下面的版本
這裡寫圖片描述
現在node.js已經到了如下的版本,本來想下載最新的穩定版本8.9.1呢,後來一直下載失敗就放棄了,沒有用代理。有代理的可以試試。
node.js官網:https://nodejs.org/en/
安裝成功,能看到上圖操作結果則繼續下一步
還有更重要的就是拉程式碼
由於原始碼都是在開源的GitHub,所以我們首先就是要在本地安裝一個git客戶端。官網:https://git-scm.com/
我是安裝的如下版本
這裡寫圖片描述
安裝好以後,使用下面命令拉原始碼,並且進入pdf.js目錄

git clone https://github.com/mozilla/pdf.js.git
cd pdf.js

接下來就是安裝專案所需要的各種外掛
官網上面都是用的npm來安裝,本地測試發現下載很慢,有的最後還報錯,查閱資料發現npm下載都是用的國外映象。國內推薦阿里的cnpm。cnpm官網:https://cnpmjs.org/
使用如下命令安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

這裡寫圖片描述
安裝成功如下圖:
這裡寫圖片描述
下面使用cnpm安裝各種外掛
全域性安裝gulp-cli

cnpm install -g
gulp-cli

這裡寫圖片描述
If everything worked out, install all dependencies for PDF.js:
安裝其他外掛

cnpm install

這裡寫圖片描述
gulp啟動

gulp  server

這裡寫圖片描述
看到上圖我們就可以通過下面地址去訪問了
http://localhost:8888/web/viewer.html
效果圖如下:
這裡寫圖片描述
這樣就說明我們拉下來的原始碼已經跑起來了!
3. Building PDF.js

使用下面命令

gulp generic

成功後,我們會看到原始碼根目錄中會多出一個build資料夾,如下圖:
這裡寫圖片描述
build資料夾裡面的目錄結構如下
這裡寫圖片描述
下載路徑:http://download.csdn.net/download/gao36951/10120663
直接將generic下面的build和web目錄放在web專案的webapp下面
直接啟動就可以訪問了,如下圖:
這裡寫圖片描述
訪問截圖:
這裡寫圖片描述
以上就是pdf.js自己搞的全過程~,有什麼不對的歡迎來噴

相關推薦

瀏覽器線上瀏覽PDF檔案pdf.js

場景 解決方案 注意: PDF.js is a Portable Document Format (PDF) viewer that is built with HTML5. PDF.js is community-driven an

前端生成pdf檔案pdfmake.js

 轉載:點選檢視原文 pdfmake.js是一個簡單的生成pdf檔案的外掛。 pdfmake.js     https://files.cnblogs.com/files/s313139232/pdfmake.min.js 程式碼也很簡單: html檔案:

(四)java實現文件的線上瀏覽-使用swftools將pdf轉換為swf

 利用swftools工具將pdf轉換為swf,建議下載swftools-0.9.1.  新建PDF2SWFUtil.java package com.iori.webapp.util; import java.io.BufferedReader; import java

怎麼編輯PDF檔案PDF檔案怎麼去除水印

  在很多的時候,大家都會使用到PDF檔案,對於PDF檔案的修改,則是需要使用到PDF編輯軟體的,那麼,PDF檔案怎麼去除水印呢,是不是有很多的小夥伴都想知道應該怎麼做呢,那就可以看看下面的文章,說不定就知道了哦。     1.開啟執行PDF編輯器,在編輯器中開啟需要

如何編輯PDF檔案PDF檔案怎麼去掉水印

  隨著時代的發展,PDF檔案使用的越來越多,PDF檔案的修改編輯也是需要用到PDF編輯器的,那麼,在編輯檔案的時候怎麼去掉檔案中的水印呢,不會的小夥伴有福氣了,快來看看下面的文章,瞭解一下哦。     1.開啟執行PDF編輯器,在編輯器中開啟需要修改的PDF檔案。

怎麼修改PDF檔案PDF如何新增文字

  在很多的時候,我們都會使用到PDF檔案,對於PDF檔案,不熟悉的小夥伴,還是會頭疼的,而熟悉的小夥伴會知道,修改編輯PDF檔案,是需要在PDF編輯軟體中進行的,那麼,在修改檔案的時候,想要在檔案中新增文字內容,又該如何去新增呢,不會的小夥伴可以看看下面的文章了哦。  

如何編輯PDF檔案PDF怎樣新建空白頁

  在我們日常的工作中會經常使用到PDF檔案,PDF檔案是一種需要PDF編輯器才可以進行修改的檔案,怎樣修改和編輯PDF檔案也是很多人共同疑惑的問題,那麼如何編輯PDF檔案,PDF怎樣新建空白頁呢?不瞭解的小夥伴可以跟著小編一起看看哦。   1.開啟PDF編輯器,在編輯器中開啟需要修改的PDF檔案。

對現有docx/pdf檔案pdf,並新增超連結

需求:上傳一個檔案(可能關聯絡統中已有的公文),要求能自動識別並替換為超連結,顯示在網頁中。目標:以PDF的形式進行展示,儘可能支援更多的檔案種類。定義:以[公文名]的形式定義替換實現:暫支援docx,對pdf支援不太友好,doc就涼涼首先,我們先獲取我們需要處理的物件(檔案

如何編輯pdf檔案pdf中新增圖章的方法

一些小夥伴有在自己作品上簽名的習慣,就像是每一個公司都有自己的logo。那麼如果想要給自己製作的PDF蓋上章,或是在PDF中新增上公司的logo該怎麼做呢?接下來筆者給大家分享下如何在PDF中新增圖章的方法。 第一步,執行捷速PDF編輯器,點選“檔案——開啟”或按快捷鍵

iis伺服器線上瀏覽.log檔案

IIS預設是不能直接瀏覽.log檔案的,需要在iis中MIME中新增副檔名.log,MIME型別為text/plain。 IIS設定流程: 右鍵點選 “網站”—-開啟“HTTP頭”—點選“MIME對映”欄的“檔案型別”按鈕,新建型別,確定—應用。(如果還有彈出選擇哪個

怎麼編輯pdf檔案,在pdf上修改文字

目前辦公中一些文件檔案主要還是以office型別的文件為主,而pdf檔案則不那麼常見,所以大家對這種檔案都不是很瞭解。在遇到這種文件需要編輯操作的時候不知道怎樣處理。接下來就講講怎麼編輯pdf檔案,

PDF檔案線上預覽pdf.js

概述 pdf.js在是一個很成熟的技術了,網上也有很多相關的資料。但是都相對比較零散,所以當時我在做的時候還是花了較多的一個時間。本文在這裡主要是對自己當時在處理時候碰到的一些相關問題做一個整理記

線上瀏覽PDFPDF.JS (附demo)

解壓開啟,這兩個資料夾是精華 你可以自己看看目錄 我們的目標是:web/viewer.html 先開啟看看: 噢,shit 了(PDF.js預設情況下不可以開啟本地PDF檔案(釋出後可以開啟伺服器檔案),也不可以跨域瀏覽PDF) 我們抱有懷疑的態度,好吧,先看看能不能用: 工具

Jquery.media.js實現網頁線上預覽pdf檔案

近期在工作中遇到了需要在網站預覽pdf檔案的需求,網上的資料很多,我使用了其中一種,即使用 Jquery.media.js包實現。 首先需要準備兩個內容: 1,jquery.js,任意版本 2,jquery.media.js,可以從網上搜,或者去下面我提供的地方下載(是我上傳的),

瀏覽器線上預覽pdf檔案(不使用外掛)

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="jquer

Asp.net MVC 利用(aspose+pdfobject.js) 實現線上預覽word、excel、ppt、pdf檔案

線上預覽word、excel、ppt利用aspose動態生成html 主要程式碼 private bool OfficeDocumentToHtml(string sourceDoc, string saveDoc) { bool result = false;

8個實現線上瀏覽PDF檔案的實用jQuery外掛

在web開發當中我們經常需要進行需要線上瀏覽PDf內容,線上嵌入動態pdf,傳統的解決方法安裝客戶端PDF閱讀器,如果是在谷歌是可以線上瀏覽的,因為他自身就帶了一些外掛,以前遇到這樣的問題往往是費時又費力,很不好解決, 今天就給大家分享一系列使用javascript實現

使用pdfobject.js實現線上瀏覽PDF

閒來無事,就翻看了一個同學的作品,作品中有一個展示他的簡歷的頁面,簡歷寫在一個PDF中。 然後在頁面中直接顯示出來了,可以下載,還可以列印,這個技術我還沒有嘗試過呢。 正好想弄點新鮮玩意兒玩

工作筆記三——使用pdf.js實現pdf檔案線上預覽

最近做移動專案(H5)時遇到一個需求,就是線上預覽pdf檔案。其實本來使用window.open()就可以實現了,但是這個API在IOS上是正常的開啟Safari瀏覽器進行預覽,在安卓上開啟是則是下載預覽,客戶不滿意;而且在將該應用嵌入到釘釘微應用時,這個API在安卓裝置上根

jquery.media.js 外掛實現線上預覽PDF檔案

 程式碼: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content