前端程序員實現在線預覽pdf、word、xls、ppt等文件，超實用！

、前端實現pdf文件在線預覽功能

方式一、pdf文件理論上可以在瀏覽器直接打開預覽但是需要打開新頁面。在僅僅是預覽pdf文件且UI要求不高的情況下可以直接通過a標簽href屬性實現預覽

<a href="文檔地址"></a>

方式二、通過jquery插件jquery.media.js實現這個插件可以實現pdf預覽功能（包括其他各種媒體文件）但是對word等類型的文件無能為力。實現方式： js代碼：

<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="jquery.media.js"></script>
復制代碼

html結構：

 <body>
 <div id="handout_wrap_inner"></div>
 </body>
復制代碼

調用方式：

<script type="text/javascript"> 
 $('#handout_wrap_inner').media({
		width: '100%',
		height: '100%',
		autoplay: true,
 src:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
 }); 
</script>
復制代碼

方式三、直接通過頁面內嵌iframe

$("<iframe src='"+ this.previewUrl +"' width='100%' height='362px' frameborder='1'>").appendTo($(".video-handouts-preview"));
復制代碼

此外還可以在iframe標簽之間提供一個提示類似這樣

<iframe :src="previewUrl" width="100%" height="100%">
This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a>
</iframe>
復制代碼

方式四、通過標簽嵌入內容

<embed :src="previewUrl" type="application/pdf" width="100%" height="100%">

此標簽h5特性中包含四個屬性：高、寬、類型、預覽文件src！與< iframe > < / iframe > 不同，這個標簽是自閉合的的，也就是說如果瀏覽器不支持PDF的嵌入，那么這個標簽的內容什么都看不到！

方式五、標簽和iframe使用差別較小

<object :src="previewUrl" width="100%" height="100%">
This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a>
</object>
復制代碼

除方式二以外其他都是直接通過標簽將內容引入頁面實現預覽

方式六、PDFObject

PDFObject實際上也是通過標簽實現的直接上代碼

<!DOCTYPE html>
<html>
<head>
 <title>Show PDF</title>
 <meta charset="utf-8" />
 <script type="text/javascript" src='pdfobject.min.js'></script>
 <style type="text/css">
 html,body,#pdf_viewer{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 }
 </style>
</head>
<body>
 <div id="pdf_viewer"></div>
</body>
<script type="text/javascript">
 if(PDFObject.supportsPDFs){
 // PDF嵌入到網頁
 PDFObject.embed("index.pdf", "#pdf_viewer" );
 } else {
 location.href = "/canvas";
 }
</script>
</html>

還可以通過以下代碼進行判斷是否支持PDFObject預覽

if(PDFObject.supportsPDFs){
 console.log("Yay, this browser supports inline PDFs.");
} else {
 console.log("Boo, inline PDFs are not supported by this browser");
}
復制代碼

方式七、PDF.js

PDF.js可以實現在html下直接瀏覽pdf文檔，是一款開源的pdf文檔讀取解析插件，非常強大，能將PDF文件渲染成Canvas。PDF.js主要包含兩個庫文件，一個pdf.js和一個pdf.worker.js，一個負責API解析，一個負責核心解析。

2、word、xls、ppt文件在線預覽功能

word、ppt、xls文件實現在線預覽的方式比較簡單可以直接通過調用微軟的在線預覽功能實現 (預覽前提：資源必須是公共可訪問的)

<iframe src='https://view.officeapps.live.com/op/view.aspx?src=http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls' width='100%' height='100%' frameborder='1'>
			</iframe>
復制代碼

src就是要實現預覽的文件地址具體文檔看這微軟接口文檔

補充：google的文檔在線預覽實現同微軟（資源必須是公共可訪問的）

<iframe :src="'https://docs.google.com/viewer?url="fileurl"></iframe>
復制代碼

3、word文件

XDOC可以實現預覽以DataURI表示的DOC文檔，此外XDOC還可以實現文本、帶參數文本、html文本、json文本、公文等在線預覽，具體實現方法請看官方文檔

下面這種方式可以實現快速預覽word但是對文件使用的編輯器可能會有一些限制

<a  target="_blank" rel="nofollow">XDOC</a>
復制代碼

4、excel文件

目前excel文件已經有了類似pdf.js那樣的解析sheet.js

總結：

1、免費純前端方式實現在線預覽word、excel、ppt最優選擇微軟在線預覽（不可編輯）

2、利用后端將文件轉為圖片，前端以圖片形式預覽（可行方案）

3、購買在線預覽服務例如百度DOC文檔服務、永中、I DOC VIEW等

著名：文章內容是從網上搜集資料所得；在次發表只為自己以及頭條程序員兄弟日后使用圖個方便。

覺得有用記得收藏轉發！

要代碼:

Dim doc, objhtml As Object

Dim i As Integer

Dim strhtml As String

If Not Me.WebBrowser1.Busy Then

Set doc = WebBrowser1.Document

i = 0

Set objhtml = doc.body.createtextrange()

If Not IsNull(objhtml) Then

Text1 = objhtml.htmltext

End If

示例下載：（在“了解更多”里下載）

圖示:

indle 憑著電子墨水屏的先天優勢，在一眾電子設備中擁有更舒適的閱讀體驗，但僅僅依靠設備內置的 Amazon Kindle 電子書書店，在書籍資源方面似乎顯得單薄。

秉承無版權糾紛的原則下，我搜集了一些電子書資源站點，整理它們各自的電子書資源特點，以及電子書格式轉換和書本推送至 Kindle 設備的操作技巧，希望能夠豐富大家獲取電子書資源的途徑，真正做到為電子書書架「添磚加瓦」。

書格

書格是一個自由開放的數字古籍圖書館，專注于不同類型古書籍的保護與文化藝術作品數字化傳播，網站創建于 2013 年，最早起源是豆瓣用戶未曾在 2012 年建立的 PDF 小站。網站收錄資源的首要準則是限定為公共版權領域的書籍，分享的書籍資源來源于世界各個圖書館或機構的公開內容。由于書格分享的書籍大多圖文較多，所以暫時只發布 PDF 格式的文件。

書格提倡開放式共享資源，無須用戶注冊即可瀏覽下載網站的任何資源，用戶可以在站內搜索查看已發布資源列表，或者直接進入書格的網盤目錄瀏覽下載。根據書格公布的數據顯示，截止今年 3 月底，網站已經發布超過 1600 套書籍資源，所有資源大小約 616 GB。在書格的資源分類中，我們可以按照學術分類（史地、社會科學、藝術等）和興趣分類（永樂大典系列、練字參考、要看圖多的等）找到不同類型的書籍。

圖靈社區

圖靈社區主要專注于科技書籍的出版，包括計算機、數學統計、科普等領域，提供免費和付費的電子書。用戶可以使用網銀或者支付寶的購買方式，大部分電子書同時提供了三種閱讀方式：在線閱讀、MOBI 推送、PDF 下載，部分書籍只提供其中部分格式。

圖靈社區的圖書分類除了按照常規分類（計算機、科普、設計、高等數學等）外，還可以按不同的 Tag 標簽查找感興趣的書籍。如果你有更準確的書籍信息（ISBN 碼、作譯者、出版日期），通過圖靈社區的高級搜索功能精確地找到對應資源。

在用戶的個人設置頁面中，圖靈社區提供了推送郵箱的功能，填寫好 Kindle 個人郵箱，如果遇到推送失敗的話，可以嘗試將 no-reply@ituring.com.cn 加入 Kindle 已認可的發件人電子郵箱列表中。

Project Gutenberg 古登堡計劃

Project Gutenberg 是國外最知名的電子書分享網站，最初在 1971 年 7 月由 Michael Hart 發起，主要提供大量版權過期后進入公有領域的書籍，目前藏書量超過了 5 萬多本。你可以從網站提供的 TOP 100 下載排行榜獲取最受用戶歡迎的電子書。

古登堡計劃也收錄了中文經典書籍，以下載四大名著之一三國演義為例子，在下載頁面中，用戶可以將電子書轉存至 Dropbox、Google Drive、OneDrive 云盤，網站提供了 HTML、ePub、Kindle（mobi、azw 格式）和富文本多種電子書格式。

Wikibooks 維基教科書

Wikibooks 維基教科書項目隸屬于維基媒體基金會旗下，網站主要收集教科書或者用戶自己編輯的書籍，提倡分析人人可編輯的自由教學讀本，目前已經收錄超過 3000 本共 80000 多頁的電子書。

維基教科書

在維基教科書的中文索引頁面中，我們可以找到相當豐富的教學類電子書資源，涵蓋了自然科學、數學、社會科學、語言、人文科學、工程學、藝術、計算機科學與技術以及部分中小學、大學課本。維基教科書為每一個網頁頁面提供了 PDF 文件下載的選項，稍顯遺憾的是相較于英文目前中文資源數量還比較有限。

維基媒體基金會的類似項目還有維基文庫，目前已經收錄了超過 29 萬篇文檔，主要領域包括了已出版的文獻、譯文、歷史檔案、文獻作者生平等，同樣提供了 PDF 格式的電子文件。

Planet eBook

Planet eBook 被視為古典文學電子書愛好者的樂園，所收錄的小說和書籍均可免費下載和共享，提供的電子書格式包括 ePub、PDF、MOBI，每本收錄的書籍都提供了精致的介紹頁面，電子書的文字排版和圖文質量都有不錯的水準。如果你是外文小說的閱讀愛好者，Planet eBook 肯定是一個不容錯過的電子書平臺。

Gitbook

Github 上總能找到一些相當優秀的資源，其中有朋友分享了一份免費的編程中文書籍索引排行榜，榜單中按照編程知識領域，推薦不同的教程和電子書資源，包含了開發者網站、Gitbook 電子書資源和部分視頻教學資源。

Gitbook 是一個由用戶自主制作和分享電子書的平臺，從多人協作、Markdown 寫作、評論互動等多個環節上為電子書出版和共享提供了一站式解決方案。Gitbook 制作好的電子書支持輸出 ePub, MOBI 和 PDF 格式，Explore 頁面集中列出了已整理出版的電子書，用戶可以按語言分類和電子書主題查找電子書資源。

文件格式轉換和推送技巧

下載書籍后，下一步要做的就是把書傳送到 Kindle 里。Kindle 原生系統支持的格式包括：AZW、TXT、PDF、MOBI、PRC、HTML、DOC、DOCX 以及 JPG，但網上電子書資源大部分會是 ePub 和 PDF 格式，這時就需要文件格式轉換和 PDF 重排工具（PDF 在 Kindle 設備上的閱讀效果并不理想），我收集了以下幾款實用工具：

Calibre 是一款強大的本地電子書管理工具，支持 Windows、macOS 和 Linux 三大平臺，本身支持市面絕大部分的文件導入和轉換，選中需要轉換的書籍后，點擊選擇「轉換書籍」，在打開的轉換頁面中選擇右上角輸出格式，選擇電子書設備支持的輸出格式。另外用戶還能夠調整轉換電子書的更多細節選項，包括輸出界面、字體、內容目錄等。

管理工具：Calibre 使用指南

K2pdfopt 是一款可以優化 PDF 文件、提升在移動設備上閱讀體驗 PDF 文檔的開源軟件，支持 Windows、macOS 和 Linux 三大平臺，還提供了命令行版本，以 Windows 平臺的 GUI 版本為例，

在 File list 區域添加一個或者多個 PDF 文檔；
Output Folder 區域填寫轉換后文檔的保存路徑，留空即保存在源文件所在目錄；
Device 一欄選擇自己的設備，K2pdfopt 支持 Kindle、Kobo、Nook 多款硬件產品；
Conversion Mode 一欄一般選擇默認的 default 模式即可（僅僅希望裁邊的話，選擇 Trim 模式）；
最后點擊軟件界面右下角 Preview 按鈕可預覽效果，點擊 Convert All Files 即可開始轉換。

AConvert 是一款電子書轉換在線工具，支持輸出 AZW3、EPUB、DOCX、HTML、MOBI、PDF、RTF 和 TXT 格式，選擇本地文件上傳或在線地址。在轉換結果的下載頁面中，用戶可以將轉換后的文檔保存至 Dropbox、Google Drive，或者通過掃描二維碼下載文檔。同類型的在線工具還有 ConvertIO、ToePub。

Dropbox + IFTTT 實現云盤電子書推送至 Kindle 設備。部分電子書平臺提供將電子書文件轉存至類似 Dropbox 云存儲空間里，這時候再利用 IFTTT 提供的任務規則可以實現將云盤電子書資源自動推送至 Kindle 設備上，簡單說一下操作步驟：

在 Dropbox 建立一個專門存放和推送電子書的文件夾，比如 sendtokindle；
打開 IFTTT 網站上 Send files from Dropbox to your Kindle 頁面，首次使用需要獲得 Dropbox 和 Gmail 授權；
完成授權操作后，在 New file in your folder 一欄填寫 Dropbox 保存電子書的文件夾名稱，留空的話會自動創建名為 Kindle 的文件夾，Send an email 一欄填寫 Kindle 設備的專屬個人郵箱；
最后，其他選項保持默認狀態即可，設置完成后將電子書保存在 Dropbox 專門的文件夾，就會自動推送至 Kindle 設備。

以上就是我個人搜集的優秀電子書資源站點和書籍格式轉換和傳輸的一些技巧，如果你了解更多的電子書網站，歡迎在評論中與大家分享。

在線咨詢

上一篇：html 頁面內錨點定位及跳轉方法總結
下一篇：selenium之css定位小結