【前端实现在线预览ppt、word、xls、pdf、视频】

历目

已于 2022-06-30 14:42:39 修改

阅读量3.6k

点赞数 1

分类专栏： JavaScript 文章标签：前端 javascript 开发语言

于 2022-01-11 15:56:55 首次发布

原文链接：https://blog.csdn.net/qq_41638795/article/details/96137597?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-4.no_search_link&spm=1001.2101.3001.4242.3&utm_relevant_index=7

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、预览ppt、word、xls

转载地址：

https://blog.csdn.net/qq_41638795/article/details/96137597?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_baidulandingword~default-4.no_search_link&spm=1001.2101.3001.4242.3&utm_relevant_index=7
https://cloud.tencent.com/developer/article/1938566?from=15425

通过调用微软的在线预览功能实现：http://view.officeapps.live.com/op/view.aspx?src=文件路径。
“文件路径”必须是公共可访问。通过以下网址可以查看是否公共：https://products.office.com/zh-CN/office-online/view-office-documents-online?legRedir=true&CorrelationId=4cda62ce-40b5-4b06-abf6-96368fb5b997

// 文件预览
function preview(path,fileType){
    var typeArr = ['doc', 'docx','ppt', 'pptx','xls','xlsx'];
	if(typeArr.indexOf(fileType) != -1){
	    path = 'http://view.officeapps.live.com/op/view.aspx?src=' + path
	}
			
	// window.open()居中打开
	var width = 900,height = 700;
	var top = (window.screen.availHeight-height)/2;
	var left = (window.screen.availWidth-width)/2;
	window.open(path,"","width="+width+",height="+height+",top="+top+",left="+left);
			   
},

注意:无法打开文档？

office文档必须是外网可访问的,链接必须是域名,并且是80端口
若您看到错误“很抱歉，由于某种原因我们无法打开该文件”，它意味着无法找到文档或无法显示文档。可能的原因包括：

在您提供的 URL 中无法找到任何文档。请确保您提供正确的 URL。
文档而言太大。Word 和 PowerPoint 文档必须小于 10 兆字节;Excel 必须小于五个兆字节。
文档的保存格式不是 Web 浏览器支持打开的格式。请尝试将您的文档保存为下列格式之一： Word: docx dotx 。 Excel：xlsx、xlsb、xls、xlsm。PowerPoint: pptx、 ppsx、 ppt、 pps、 potx、
ppsm
您需要登录或提供密码才能打开该文档。将文档设为可公开查看。
文档的文件名称包含无效字符。请尝试编码的文件的名称，当您键入文档的 URL 或重命名文件以仅使用字母和数字。例如，要编码的 URL，包括与号 (&)，您需要键入%26 & 字符。有关 URL 编码的详细信息，也称为为百分比编码，请参阅维基百科的百分比编码。

！：写在最后,这种方式,有可能将你的Office文件上传到微软服务器,机密文件请谨慎使用.

二、 pdf

访问公共路径pdf，可以在浏览器直接预览。

三、视频预览

访问公共路径视频，可以在浏览器直接播放。需要注意的是，该页面是使用的HTML 5 的video标签，只支持一部分的视频格式和一些视频编码。
HTML 5 支持的视频编码：
MP4 = MPEG 4文件。使用 H264 视频编解码器和AAC音频编解码器
WebM = WebM文件。使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg = Ogg文件。使用 Theora 视频编解码器和 Vorbis音频编解码器
后端对视频转码参考网址：
https://blog.csdn.net/weixin_39702714/article/details/114133783
https://www.cnblogs.com/lxp-java/p/15346537.html