前端程序员实现在线预览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 href="http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=http://www.xdocin.com/demo/demo.docx" 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文件在线预览功能

您的项目需求