前端程序員實現(xiàn)在線預(yù)覽pdf、word、xls、ppt等文件，超實用！

、前端實現(xiàn)pdf文件在線預(yù)覽功能

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

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

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

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

html結(jié)構(gòu)：

 <body>
 <div id="handout_wrap_inner"></div>
 </body>
復(fù)制代碼

調(diào)用方式：

<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>
復(fù)制代碼

方式三、直接通過頁面內(nèi)嵌iframe

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

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

<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>
復(fù)制代碼

方式四、通過標(biāo)簽嵌入內(nèi)容

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

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

方式五、標(biāo)簽和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>
復(fù)制代碼

除方式二以外其他都是直接通過標(biāo)簽將內(nèi)容引入頁面實現(xiàn)預(yù)覽

方式六、PDFObject

PDFObject實際上也是通過標(biāo)簽實現(xiàn)的直接上代碼

<!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嵌入到網(wǎng)頁
 PDFObject.embed("index.pdf", "#pdf_viewer" );
 } else {
 location.href = "/canvas";
 }
</script>
</html>

還可以通過以下代碼進(jìn)行判斷是否支持PDFObject預(yù)覽

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

方式七、PDF.js

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

2、word、xls、ppt文件在線預(yù)覽功能

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

<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>
復(fù)制代碼

src就是要實現(xiàn)預(yù)覽的文件地址具體文檔看這微軟接口文檔

補(bǔ)充：google的文檔在線預(yù)覽實現(xiàn)同微軟（資源必須是公共可訪問的）

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

3、word文件

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

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

<a  target="_blank" rel="nofollow">XDOC</a>
復(fù)制代碼

4、excel文件

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

總結(jié)：

1、免費純前端方式實現(xiàn)在線預(yù)覽word、excel、ppt最優(yōu)選擇微軟在線預(yù)覽（不可編輯）

2、利用后端將文件轉(zhuǎn)為圖片，前端以圖片形式預(yù)覽（可行方案）

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

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

覺得有用記得收藏轉(zhuǎn)發(fā)！

家好，我是小繪！

你們知道嗎，在Word文檔中不只能插入文本和圖片，如果想讓你的Word文檔變得更加的豐富，我們可以插入一些Flash動畫，網(wǎng)絡(luò)視頻等，那么接下來跟小繪一起來看看怎么在word文檔中插入動畫和視頻吧~

一、Word文檔中插入Flash動畫

第一步我們先打開word，然后點擊「插入」，選擇「文本」，再選擇「對象」，點擊「由文件創(chuàng)建」，選擇「瀏覽」選中Flash動畫的路徑位置，然后插入。

我們需要復(fù)制一下文件路徑，然后點擊「確定」后返回文檔，鼠標(biāo)點擊「右鍵」選擇插入的對象，再點擊「屬性」，在「Movie」后面的空白處粘貼一下剛剛復(fù)制的路徑。接下來關(guān)閉「屬性」，再進(jìn)入「開發(fā)工具」，點擊「控件后」取消「設(shè)計模式」。

二、Word中插入網(wǎng)絡(luò)視頻

如果我們想在word里插入愛奇藝或者優(yōu)酷等一些網(wǎng)絡(luò)視頻，我們可以先在網(wǎng)站視頻上點擊「分享」按鈕，然后「復(fù)制Html」代碼?；氐絎ord文檔中，點擊「插入」，然后選擇「媒體」再點擊「聯(lián)機(jī)視頻」，在「來自視頻嵌入代碼」后面空白處，將代碼粘貼進(jìn)去，然后點擊后面的「插入」按鈕。

怎么樣，你學(xué)會了嗎？

更多打印知識、職場小技巧記得

多跟小繪在留言區(qū)溝通哦~

老板給我1天時間做的Excel產(chǎn)品報價表格，我只用了2分鐘

ord是我們最常用的文檔編輯器，雖然幾乎每天都在使用，但有些可以顯著提高使用效率的技巧可能被忽略。本期內(nèi)容就為大家分享一些利刃君覺得比較有用的Word實用小技巧，希望對大家能有所幫助！

1. 縮短Word文檔自動保存的時間

撰寫論文時，最恐怖的莫過于忘記保存文檔或遇到突發(fā)情況電腦突然關(guān)機(jī)沒來得及保存了。我們都知道Word中有自動保存的功能，可能是被大家忽略的，但一般自動保存的時間為10分鐘，時間有點長，有丟失重要內(nèi)容的風(fēng)險。那么如何縮短Word文檔自動保存的時間呢，只需如下設(shè)置：

點擊“文件 -> 選項 -> 保存”，勾選“保存自動恢復(fù)信息時間間隔”，后面的文本框設(shè)置想要的時間間隔即可，如3分鐘，點擊“確定”即可。

2. 設(shè)置默認(rèn)的字體、段落等格式

這也是一個容易被忽略的實用技巧。我們處理的很多文檔，都需要相同或類似的格式，每次修改都太麻煩了，不如把常用的格式設(shè)置為默認(rèn)的，省時省力！

如設(shè)置默認(rèn)的字體，在菜單欄選擇“開始”選項卡，點擊字體一欄中右下角的小箭頭符號，設(shè)置字體、字形、字號等，點擊“設(shè)為默認(rèn)值”，選擇“所有基于Normal.dotm模板的文檔”，點擊“確定”。如此一來，之后就不需要重復(fù)更改字體格式了。同樣的方法可以對段落、標(biāo)題等格式進(jìn)行設(shè)置。

3. 表格的合并與拆分

如果我們需要合并兩個表格，可以直接使用剪切的方式進(jìn)行合并或者按住“Alt+Shift+↑”進(jìn)行合并，如下演示：

如果我們需要對表格進(jìn)行拆分，選中需要拆分的地方，按住“Ctrl+Shift+Enter”就可以實現(xiàn)拆分，如下演示：

4. 分屏查看不同文檔

大家可能比較熟悉多個應(yīng)用的左右分屏功能，在Word文檔中，如果我們需要打開多個文檔進(jìn)行對比查看，左右分屏或上下分屏以及同步滾動十分有用，可使用Word中的重排功能實現(xiàn)。

打開需要分屏查看的兩個文檔，在菜單欄選擇“視圖”選項卡，點擊“全部重排”可以實現(xiàn)上下分屏查看兩個不同文檔。

如果我們選擇“并排查看”并且“同步滾動”也為選擇狀態(tài)，可以實現(xiàn)兩個不同文檔的左右分屏，并且滾動瀏覽任一文檔時，另一文檔也會隨之滾動，是不是非常方便？

5. 去掉自動編號功能

默認(rèn)情況下，Word會自動編號，如果我們需要自己進(jìn)行編號時，這個功能就很煩人。那么如何取消其自動編號功能呢？

在菜單欄點擊“文件 -> 選項 -> 校對 -> 自動更正選項”打開“自動更正”窗口，選擇“鍵入時自動套用格式”選項卡，找到“鍵入時自動應(yīng)用”組中的“自動編號列表”復(fù)選項，取消前面的勾即可。這樣就可以去掉那些“煩心”的自動編號功能了。

6. 設(shè)置插入Word中的圖片不壓縮

在Word中插入圖片時，默認(rèn)情況下會對圖片進(jìn)行一定程度的壓縮，這可能導(dǎo)致圖片不清晰，特別是在論文寫作過程中，容易出現(xiàn)圖片不符合期刊要求的情況。實際上可以設(shè)置插入圖片時不壓縮，設(shè)置方法如下：

在菜單欄點擊“文件 -> 選項 -> 高級”，找到“圖像大小和質(zhì)量”，后面的下拉菜單選擇“所有新文檔”，勾選“不壓縮文件中的圖像”，默認(rèn)分辨率選擇“高保真”，然后點擊“確定”即可。

7. 快速提取Word文檔中的圖片

我們在使用Word編輯文檔時，會遇到需要將文檔中的圖片單獨保存的情況。通常我們是使用鼠標(biāo)右鍵，選擇“另存為圖片”來單張保存圖片，但是如果有多張圖片都需要提取，這樣的方法顯然很費力費時。下面就為大家介紹快速提取Word文檔中所有圖片的方法。

方法一：

保存Word文檔時，直接選擇“文件-> 另存為 -> 網(wǎng)頁（*.htm，*.html）”，另存為網(wǎng)頁格式；

此時會產(chǎn)生一個文件夾，打開該文件夾可以看到文檔內(nèi)所有的圖片都在里面。

方法二：

將文件擴(kuò)展名修改為.zip，之后解壓可以得到一個文件夾，在解壓后的文件夾中找到“word -> media”文件夾，可以發(fā)現(xiàn)Word文檔中所有的圖片都保存在該文件夾中。請看如下演示：

是不是非?？旖菽?？同樣的方法大家也可以對Excel和PPT進(jìn)行嘗試，會有驚喜喲~

技能擴(kuò)展：

對于科研人員來說，閱讀文獻(xiàn)時，最常用的文獻(xiàn)格式是PDF，很多時候也需要對PDF中的圖片進(jìn)行提取。這里為大家推薦一款免費的在線工具——iLovePDF，地址如下：

https://www.ilovepdf.com/zh-cn/pdf_to_jpg

使用時，只需上傳PDF文件，可以選擇“將頁面轉(zhuǎn)換為JPG文件”或“提取圖片”，等待提取完成下載即可。值得一提的是，iLovePDF支持同時上傳多個文件，進(jìn)行批量提取或轉(zhuǎn)換，非?？旖莘奖?！

以上就是本期為大家分享的一些Word的實用技巧啦，下期繼續(xù)為大家分享在論文寫作中格式修改方面的Word技巧，敬請期待~

在線咨詢

上一篇：Springboot,Mybatis修改登錄用戶的密碼
下一篇：玩法創(chuàng)新的手機(jī)頁游-《傳奇世界H5》測評

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

前端程序員實現(xiàn)在線預(yù)覽pdf、word、xls、ppt等文件，超實用！

、前端實現(xiàn)pdf文件在線預(yù)覽功能

2、word、xls、ppt文件在線預(yù)覽功能

家好，我是小繪！

一、Word文檔中插入Flash動畫