前端程序員實現在線預覽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等

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

覺得有用記得收藏轉發！

上一期，我們為大家介紹和分享了Word基礎系列使用小技巧（一），這一期我們就接著來和大家一起分享Word基礎系列使用小技巧（二），各位看官，你要的干貨來啦！

1. 問：Word 里面要寫方程式怎么辦啊？

答：插入－對象－公式編輯器Equation，如果沒有公式編輯器Equation，要自己安裝。

2. 問：想在Word 里面表示矩陣，怎樣才能畫出那個很大的矩陣括號？

答：安裝公式編輯器mathtype 就好啦~

3. 問：Word 中出現公式的行往往要比只有文字的行來得寬，如何把這些行改的跟只有文字的行一樣寬？

答：段落行距設為固定值即可。

4. 問：怎樣可以去掉Word 里面公式，或是圖片上方總是出現的灰色的橫條啊？

答：工具－選項-視圖-域底紋，選不顯示，或選取時顯示，就可以了。

5. 問：怎么在Word 里畫坐標圖?在Word 里有了坐標圖，文字卻加不加去怎么辦?

答：作圖時直接將文字加上去；word 中的繪圖工具條，文字環繞里面尋找合適的方案，把圖放在文字的底層。

6. 問：怎么給Word 文檔加密？

答：打開文檔，另存為―工具―常規選項―打開、修改權限密碼，保存。

7. 問：Word 無法識別origin 中的漢字怎么辦？用origin 做的圖形中有漢字，copy 到word 中就成了問號，因此我不得不先用export 把圖形變為jpg 文件才能解決這個問題，有沒有方便的解決辦法？

答：ORIGIN 里面的字體改成宋體或者仿宋。

8. 問：請教怎么把Origin 中的圖表拷貝到Word？

答：點origin 的Edit 菜單里的copy page 到word 里粘貼就行了。

9. 問：把origin 的圖復制粘貼到word，總有一大塊的空白，這個空白有什么工具可以去掉嗎？還有就是用word 自帶的圖表工具畫圖時，也是有一大塊空白去不掉，這個可以解決嗎？

答：右鍵選擇圖片工具欄，點裁剪。

10. 問：如何把Word 里面圖形工具畫的圖轉化為jpg？

答：另存為html 格式，然后在html 文件對應的文件夾里找。

11. 問：請問什么格式的圖片插入word 最清晰？手頭持有png 和tif 格式，復制粘貼到word 中模糊一片，請問轉換成什么圖片格式用于word 最清晰？什么方法（插入圖片來自文件還是直接復制粘貼）對清晰度有否影響？

答：emf，eps 等矢量圖最清晰，不會因為縮放損失分辨率，而jpeg，bmp 等點陣圖就不行了。

12. 問：Matlab 仿真圖片大家一般怎么弄到word 里面的？

答：一般都是在Matlab 里面把所有的直接修改好了，然后在保存的時候用jpg 格式，在Word 中間導入就好了。

好啦，我們的Word基礎系列小技巧到這里就結束了，我們下期再見咯~\(≧▽≦)/！

Spring Boot中實現Word在線預覽，可以使用開源的文檔轉換庫或者服務來處理Word（.doc或.docx）文件并將其轉換為可以在Web頁面上預覽的形式，如HTML。這里介紹幾個常用的開源解決方案：

1. kkFileView

? kkFileView是一個基于Spring Boot的開源項目，它支持多種格式的文件在線預覽，包括Word文檔。這個項目通過集成各種第三方工具或服務將不同類型的文檔轉換成可以安全預覽的格式。

2. Apache POI

? Apache POI 是Java編寫的用于讀寫Microsoft Office格式檔案的API，它可以用來讀取Word .docx文檔的內容，并將其轉換為HTML或其他可展示的格式。通過在Spring Boot應用中整合Apache POI，你可以實現簡單的Word到HTML的轉換功能。

3. OpenOffice/LibreOffice UNO SDK

? 可以通過調用OpenOffice或LibreOffice的服務接口（UNO），利用它們的headless模式將Word文檔轉換為PDF或HTML。例如，通過Java代碼啟動一個無界面的OpenOffice服務進程，然后通過API進行轉換操作。

4. Aspose Words for Java

? Aspose.Words是一款商業級但也有免費試用選項的Java庫，它提供了強大的文檔處理能力，能夠精確地將Word文檔轉換為HTML。雖然不是完全開源的，但在許多場景下由于其強大和穩定的特性而被采用。

以下是一個使用Apache POI的基本示例（假設僅提取文本內容而非完整樣式轉換）：

import org.apache.poi.xwpf.usermodel.XWPFDocument;

import org.apache.poi.xwpf.usermodel.XWPFParagraph;

import java.io.File;

import java.io.FileInputStream;

import java.io.IOException;

public class WordToHtmlConverter {

public String convertToHtml(String docFilePath) throws IOException {

FileInputStream fis = new FileInputStream(new File(docFilePath));

XWPFDocument document = new XWPFDocument(fis);

StringBuilder htmlContent = new StringBuilder("<html><body>");

for (XWPFParagraph paragraph : document.getParagraphs()) {

htmlContent.append("<p>").append(paragraph.getText()).append("</p>");

}

htmlContent.append("</body></html>");

document.close();

fis.close();

return htmlContent.toString();

}

要真正實現保持原始格式的高質量預覽，可能需要更復雜的邏輯，甚至結合前端富文本編輯器或專門針對Word轉HTML優化的庫來實現。同時，確保在生產環境中正確處理并發訪問和資源釋放等問題。

在線咨詢

上一篇：JavaScript嵌入HTML中的3種方式
下一篇：實用的 CSS動畫知識—貝塞爾曲線(cubic-bezier)

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

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

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

您的項目需求