1. 程式人生 > >初次體驗PDF.JS,非常好用的pdf前臺包

初次體驗PDF.JS,非常好用的pdf前臺包

客戶死活要用IE,IE這破爛仗著他老爹微軟這幾年的影響力,在各大公司佔了瀏覽器的重要職位。

IE就連自己開啟pdf也不會,只能靠外援他爹的盤友adobe,adobe自以為有點料,一開啟就要上頭條,給個iframe讓他穿穿他都不要,直接裸身出鏡,把哥的整個頁面都擋住,靠!!這倆2B!!

pdf.js 是firefox的pdf解析,現在開源,試用了一下,挺好,全js操作,可控性好,想怎麼顯示就怎麼顯示,基本達到了人盡可夫滴境地啦~~~哈

首先去下個git。(待會需要用git去拿pdf.js哦)

下載完畢後安裝(哥安裝的是IE他老爹windows的,哥也被window控制了好些年,悲催)

裡面有下載包,有例子,還教你怎麼取buil你想要的包。

開啟你本地cmd,把direct到安裝git的bin包裡,

C:\Program Files\Git\bin>

然後輸入

git clone git://github.com/mozilla/pdf.js c:/xxxx (此為你要儲存的本地路徑)

回車,這時你會看到git開始下載。

下載完畢後,你可以再c:/xxxx資料夾裡看到下載的檔案

好了,裡面有examples資料夾,裝有一些簡單的例子,hellow world,

右鍵擊index.html,open with ie9, 額,開不了,開啟修改index.html

新增一個js連線

 <script type="text/javascript" src="../../web/compatibility.js"></script>

讓它支援IE9

接著開啟hello.js, 找到PDFJS.getDocument('helloworld.pdf'),改為PDFJS.getDocument('http://www.copyright.gov/legislation/dmca.pdf'),讓他開啟一個online的pdf,安全考慮,因為pdfjs不能開啟本地檔案,必須要是伺服器上的,他原本的這個測試包,是要求釋出到一個伺服器,然後可以讀取http://localhost/helloworld.pdf,而我沒釋出,直接點選的,所以就在網上找了一個線上pdf,好了,可以打開了。很好,還沒有完成哦

現在要build一個js的包,他包括顯示pdf的所有功能,就是他的viewer。

先下載一個node.js

因為只是用來buil,所以我只下了個exe。

把下載下來的exe拷貝到之前下載pdf.js的路徑裡c:/xxxx

開啟cmd, direct to c:/xxxx

確定該路徑裡有個make.js

然後輸入

node make generic

執行結束後,該路徑下會生成一個bulid資料夾,裡面才是我們要用到的檔案

我們來看一下效果

開啟一個wamp server,把generic拷貝到wamp server的www裡。(大家可以選擇自己的web server,我剛好裝了wamp,用它比較簡單)

開啟localhost,找到generic,開啟找到裡面的web資料夾,點開,選擇裡面的viewer.html

頁面顯示

漂亮哦,全pdf的功能,左上角還有slider,最重要的是,全js,可控性強,想要什麼按鈕就要什麼按鈕~~哈

注:專案當中有跨域讀取pdf的問題,pdf.js只能讀取同一個域裡的pdf,如果需要跨域讀取,一般需要被請求方set head的Access-Control-Allow-Origin:*,這個不是很好,最好是先用後臺讀取跨域的pdf流,寫到前臺,pdf.js讀取該後臺方法獲取流顯示。

如php:

開啟viewer.js

找到var DEFAULT_URL = 'compressed.tracemonkey-pldi-09.pdf';

該為var DEFAULT_URL = 'test.php';

然後再test.php裡

相關推薦

初次體驗PDF.JS非常pdf前臺

客戶死活要用IE,IE這破爛仗著他老爹微軟這幾年的影響力,在各大公司佔了瀏覽器的重要職位。 IE就連自己開啟pdf也不會,只能靠外援他爹的盤友adobe,adobe自以為有點料,一開啟就要上頭條,給個iframe讓他穿穿他都不要,直接裸身出鏡,把哥的整個頁面都擋住,靠!!這

yum升級CURL到最新版本的方法非常

首先,先為你的伺服器獲取最新匹配的源:http://mirror.city-fan.org/ftp/contrib/yum-repo/ # 安裝新版libcurl的yum源rpm -ivh http://mirror.city-fan.org/ftp/contrib/y

java使用replaceAll的正則表示式替換非常

package com.blog.test; import java.util.regex.Matcher; import java.util.regex.Pattern; public class TEst { public static void main(St

外掛非常的請求REST的工具restclient非常的請求http的工具HttpRequester

firefox外掛,非常棒,有圖有真相, restclient chrome://restclient/content/restclient.html HttpRequester 在firef

一個非常線上畫圖軟體。開源的線上畫流程圖軟體超級棒。draw.io

前言 本文的原文連線是: https://blog.csdn.net/freewebsys/article/details/83689187 未經博主允許不得轉載。 博主地址是:http://blog.csdn.net/freewebsys 1,關於draw.io

推薦一個非常的Chrome擴充套件應用用於美化Json字串

這個Chrome擴充套件應用的名稱叫JSON Viewer Awesome 1.0.6: 安裝之後,在Chrome工具欄會出現一個紫色的小圖示: 然後可以把任意Json字串直接貼到Chrome介面裡: 點Parse JSON, 就可以以樹狀結構顯示結果:

SourceInsight巨集外掛2(非常強力推薦)

Quicker巨集在SI中的使用方法(下載地址:連結:https://pan.baidu.com/s/1VrDxlPhft7RPUCCOKxsGIg  提取碼:2d4u) Quicker巨集的新增到SI中配置方法: 1. 執行SI,開啟Base工程,如果沒有該工程,則生成它,將Quicker.e

SourceInsight巨集外掛3(非常強力推薦)

openfolder.em原始碼:(連結:https://pan.baidu.com/s/1draaimWzCHZ3vLxL--lfiQ  提取碼:zyq4) //使用資源管理器開啟當前檔案所在資料夾,並個高亮選中當前檔案 推薦快捷鍵 ctrl+D macro ToExplorerFold

給大家推薦一個非常的資管分倉軟體——易投資管軟體資產管理公司的神器!

易投資管軟體是一套非常成熟的分倉軟體系統,不知道大家有沒有用過? 易投資管系統大概包含: 1、客戶開戶推廣管理系統(網站) 2、行情分析系統(客戶端) 3、賬戶監控管理系統(監控) 4、資管櫃檯系統(分倉) 5、財務結算管理系統(財務) 這些足夠滿足我一個資產管理公司的所有需求,而且不用多花一分

一款非常的 Windows 服務開發框架開源專案Topshelf

  Topshelf是一個開發windows服務的比較好的框架之一,以下演示如何開發Topshelf服務。 1、首先開啟你的vs。新建一個TopshelfStudy控制檯程式,如下圖所示: 這是我用vs2017新建的。 2、然後選中你的專案,執行Nuget,可以手工搜尋Topshelf進行安裝,也可

什麼PDF線上壓縮器怎麼操作?

  PDF檔案是辦公中常見的檔案格式,隨著時間的積壓,PDF檔案也是越來越多,不要以為PDF檔案小,可是過多的PDF檔案也會產生手機電腦的卡頓,針對這一現象,就會有很多人再問PDF檔案怎麼壓縮才好呀,很多的線上壓縮PDF檔案的壓縮器會改變PDF檔案的內容,下面借給大家推薦一款

非常的產品櫥窗滑動js

/**  * BxSlider v4.1.1 - Fully loaded, responsive content slider  * http://bxslider.com  *  * Copyright 2013, Steven Wanderski - http://stevenwanderski.com

respondsToSelector的相關使用(非常的方法一定要了解!!!)

-(BOOL) isKindOfClass: classObj 用來判斷是否是某個類或其子類的例項 -(BOOL) isMemberOfClass: classObj 用來判斷是否是某個類的例項 -(BOOL) respondsToSelector: selector

向大家介紹一款非常的ssh工具finalshell符合我們國人的使用習慣。

FinalShell 是一體化的的伺服器,網路管理軟體,功能強大的開發,運維工具,充分滿足開發,運維需求. 訪問 主要特性: 1.多標籤,批量伺服器管理. 2.支援登入 Ssh 終端和 Windows 遠端桌面. 3.漂亮的平滑字型顯示,內建 158 個 Sh

與其他的PDF編輯器相比迅捷PDF編輯器實在太多了

      一個針對各種PDF檔案的PDF編輯器,在同行業中,迅捷PDF編輯器實在是要好上太多了,現在在網上,像這些編輯器實在是太多了,用過那麼多編輯器要麼就是功能不全,要 麼就是需要收費,而且操作還不是很簡單,相比而言,小編還是喜歡用迅捷PDF編輯器,那麼迅捷PDF編輯好

Windows非常的快捷鍵(一)

快捷鍵 windows快捷鍵 今天娜娜分享幾個電腦使用中非常好用的快捷鍵,看完相信你能更高效的使用電腦。1)開始菜單:【win】這是最簡單的一個快捷鍵了,省去用鼠標點開始菜單了。2)鎖屏:【win】+【L】當你離開電腦時不希望別人使用你的電腦,按下這兩個鍵,想使用電腦就先輸入密碼吧,前提是你的用戶設置

ThinkPHP5 支付寶支付擴展庫(超簡單~)

thinkphp5 支付寶支付 alipay 支付寶擴展我的想法是,只需要調用一個靜態方法就可以完成所需要的所有工作,再也不必重復造輪子!ThinkPHP5 支付寶支付擴展庫, 包括手機網站支付、電腦網站支付、支付查詢、退款、退款查詢、對賬單等隨著支付寶官方不斷更新(目前是2017年7月21日),大家可以在G

PHP非常的分頁類

onf pan url pre ++ reg fig cti wal 分頁類: <?php /* * ********************************************* * @類名: page * @參數: $myde_tota

sass安裝絕對的方式

重做 解決 tro img com 是否 思路 gem 過程 系統重做了,很多東西都重裝,sass也一樣,結果在安裝的過程中遇到了問題,這裏記錄下,也給同樣遇到問題的朋友們一個思路。本方法是參照http://www.w3cplus.com/sassguide/insta

非常的CSS clip-path polygon工具

win .com blog cli polygon .cn image too mage http://betravis.github.io/shape-tools/polygon-drawing/ 非常好用的CSS clip-path polygon工具