前端实现ppt、word、xls、视频等文件在线预览

最新推荐文章于 2022-03-22 10:37:42 发布
最新推荐文章于 2022-03-22 10:37:42 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： javaScript 文章标签： 文件预览
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41638795/article/details/96137597
版权

项目需求，上传的文件能够预览。

        对于word、ppt文件可以通过调用微软的在线预览功能实现：http://view.officeapps.live.com/op/view.aspx?src=文件路径。而这个“文件路径”必须是公共可访问。公共可访问就是这个文件路径直接在浏览器中打开，如视频能够直接看，word、ppt可以弹出下载框。此外，可以通过此链接https://products.office.com/zh-CN/office-online/view-office-documents-online?legRedir=true&CorrelationId=4cda62ce-40b5-4b06-abf6-96368fb5b997去查看文件路径是否公共可访问。如下：

实现代码如下：preview方法中，path参数代表文件路径，fileType参数代表文件类型。

// 文件预览
function preview(path,fileType){
最低0.47元/天 解锁文章
星星之火M
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端页面预览word_前端实现在线预览pdf、word、xls、ppt等文件
weixin_39675513的博客
12-19 5895
1、前端实现pdf文件在线预览功能方式一: 通过a标签href属性实现pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览方式二: 通过jquery插件jquery.media.js实现这个插件可以实现pdf预览功能(包括其他各种媒体文件)但是对word等类型的文件无能为力。实现方式：html结构：调用方式：...
前端实现在线预览pdf、word、xls、ppt等文件
最新发布
springdk2009的博客
05-30 1768
1、免费纯前端方式实现在线预览word、excel、ppt最优选择微软在线预览（不可编辑）2、利用后端将文件转为图片，前端以图片形式预览（可行方案）3、购买在线预览服务例如百度DOC文档服务永中I DOC VIEW等XDOC文档预览服务。
前端实现在线预览pdf、docx、xls、ppt等文件
u010227042的博客
08-26 7886
思路：前台将各种格式的附件上传到服务器----后台通过方法将这些格式的文件转化成图片，前台通过放映ppt的方式将其展示在页面上。 关键点：reveal.js 参考文章：https://www.awesomes.cn/repo/hakimel/reveal.js 百度文库预览ppt:https://wenku.baidu.com/browse/getbcsurl?doc_id=9c6b472924c52cc58bd63186bceb19e8b8f6ec06&pn=1&rn=99999
【前端实现在线预览ppt、word、xls、pdf、视频】
limuzhixing的博客
01-11 3588
前端实现在线预览ppt、word、xls、pdf、视频一、 预览ppt、word、xls二、 pdf三、 视频预览 一、 预览ppt、word、xls 转载地址：https://blog.csdn.net/qq_41638795/article/details/96137597?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-4.no_search_link&spm=1
前端js实现在线预览pdf、word、xls、ppt等文件
热门推荐
逆水行舟，不进则退
06-05 4万+
昨天遇到一个需求，公司的视频项目都是视频类型，如果是文件类型就直接打开预览，或者下载查看 项目把请求的资源都作为视频资源处理，直接赋值给 video 标签解析。所以我新增了一个功能函数，方法很简单 文件预览原理： 通过 a 标签直接访问，如果是浏览器支持的文件，可以直接打开预览 加上 h5 的 download 属性可以实现下载，而不预览。经本人测试，该属性在移动端没效果 前端 ifr...
前端实现预览word、excel、pdf、ppt文件
海阔天空
06-19 8278
最近遇到一个需要同时支持预览word、excel、pdf、ppt的需求，在此记录一下，目前只是简单实现预览的功能，没有作深入的了解。 1.非常简单的一个方法如下（亲测同时支持word、excel、pdf、ppt文件类型）, 详情可查看文档 //file_url是你的文件地址 <a href="http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=file_url" target="_blan
前端【vue】实现文档在线预览功能，在线预览pdf、word、xls、ppt等office文件
江咏之
03-22 1万+
前端江太公 前端实现文档在线预览功能 最直接的就是使用XDOC 文档云服务 XDOC可以实现预览以DataURI表示的DOC文档，此外XDOC还可以实现文本、带参数文本、html文本、json文本、公文等在线预览，具体实现方法请看官方文档下面这种方式可以实现快速预览word但是对文件使用的编辑器可能会有一些限制 XDOC文档预览服务接口简单，只需要传入文档地址 XDOC文档预览云服务：https://view.xdocin.com/. 看看XDOC如何做Word文档预览： https://view..
前端简单实现在线预览pdf、word、xls、ppt等文件
ZH
04-26 3235
目前免费纯前端方式实现在线预览word、excel、ppt最优选择微软在线预览，但不可编辑。 还有一种方案就是利用后端将文件转为图片，前端以图片形式预览。 <a target="_blank" href={'https://view.officeapps.live.com/op/view.aspx?src=' + url}> {name}</a> 用法：打开页面https...
在线浏览pdf doc html,前端实现在线预览pdf、word、xls、ppt等文件
weixin_33514864的博客
06-10 1284
1、前端实现pdf文件在线预览功能方式一: 通过a标签href属性实现pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览方式二: 通过jquery插件jquery.media.js实现这个插件可以实现pdf预览功能(包括其他各种媒体文件)但是对word等类型的文件无能为力。实现方式：html结构：调用方式：...
如何前端实现在线预览pdf、word、xls、ppt等文件
04-27
前端实现在线预览pdf、word、xls、ppt等文件 在前端开发中，预览文件是一个非常重要的功能，特别是在在线文档查看和分享方面。如何前端实现在线预览pdf、word、xls、ppt等文件是一个常见的问题，本文将为大家提供六...
java实现ppt,xls,doc在线预览
03-27
本篇将深入探讨如何使用Java实现PPT、XLS和DOC格式的文件在线预览。 首先，我们要理解这三种文件格式。PPT（PowerPoint）是Microsoft Office套件中的演示文稿格式，用于创建和展示幻灯片。XLS（Excel）则是电子表格...
前端实现文件预览（word、excel、pdf、ppt、mp4、图片、文本）
04-21
前端实现文件预览（word、excel、pdf、ppt、mp4、图片、文本） 前言 ===== 在前端开发中，预览文件是一项非常重要的功能，很多业务场景下都需要实现文件预览。今天，我们将介绍如何实现文件预览，包括word、excel...
Vue实现文件预览，支持word excel pdf ppt image txt mp4等格式
10-14
在Vue.js开发中，有时我们需要实现前端文件预览功能，以提供用户在不下载文件的情况下查看内容。这个功能尤其适用于word文档、excel表格、pdf、ppt演示文稿、图像、文本文件、json数据以及视频文件如mp4。下面将详细...
aspose实现在线预览word,ppt,excel,pdf文件架包（1）
06-14
本篇将详细介绍如何利用Aspose实现在线预览这些文件类型。 1. **Aspose.Words for .NET** Aspose.Words 是Aspose产品家族中的一个重要组件，专门用于处理Microsoft Word文档（.doc, .docx等）。通过这个库，你可以...
JavaScript 正则表达判断经度纬度是否符合规范。
Emily
10-17 2944
1. 纬度       校验纬度是否符合规范 var latreg = /^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/; var latitude =22.2222; if(!latreg.test(latitude)){ console.log("纬度整数部分为0-90,小数部分为0到6位!"); } 2. ...
解决iPhone手机时间格式化“NAN“问题
Emily
09-18 2723
这是之前做项目时遇到的问题，今天就总结、记录一下吧。 //时间格式化 function formatDate(date, fmt) { if (date == null || date == '' || date == undefined) return null; try { //解决ios手机时间格式化NAN问题 if(typeof(date) == "string" && date.indexOf('-') != -1){ da.
babel认识、安装、使用
Emily
07-08 2675
一. 认识babel 作为一种语言，javascript在不断发展，各种新标准和提案层出不穷，但是浏览器的多样性导致有可能几年之内都无法广泛普及，而babel可以让你提前使用这些语言特性，它是一种多用途的javascript编译器，它把最新版本的javascript编译成当下可以执行的版本。 二. 安装、使用 1. 创建根目录：babel （命名自定义） 2. 进入babel目录，创建...
实现在线预览word文件
08-03
要实现在线预览Word文件，有几种解决方案可以选择。一种是使用Spring Boot结合OpenOffice来实现文档的在线预览。这种方案可以支持doc、docx、ppt、pptx、xls、xlsx、zip、rar等格式的文件。具体实现方式是将本地文档添加到服务器上，然后将文档转换为HTML格式，最后通过HTML方式进行预览。[2] 另一种方案是使用纯前端的JavaScript库，例如docx-preview。这个库的优点是可以在前端直接对.docx文件进行在线预览，而不依赖后端。但需要注意的是，它不支持doc格式的文件。[3] 如果你选择使用Spring Boot来实现在线预览Word文件，可以结合OpenOffice来实现。而如果你希望在纯前端实现预览，可以考虑使用docx-preview这个JavaScript库。具体的安装和使用方法可以参考它们的官方文档或GitHub地址。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值