一、仅需实现在线预览,且文件地址公网可访问

(一)微软office免费预览(推荐

支持doc/docx/xls/xlsx/ppt/pptx等多种office文件格式的免费预览

//示例代码

//​在http://view.officeapps.live.com/op/view.aspx?src=后面拼接需要预览的地址,如下:\

let url="http://xxx.com/files/demo.doc"
window.open("​http://view.officeapps.live.com/op/view.aspx?src="+encodeURIComponent(​url))

(二)XDOC文档预览云服务

 移动端和PC端无插件预览PDF、OFD、Word、WPS等多种格式文档

前端vue3实现本地及在线文件预览(含pdf/txt/mp3/mp4/docx/xlsx/pptx)插图

//示例

let url="http://xxx.com/files/demo.doc"

window.open("http://view.xdocin.com/view?src=" + encodeURIComponent(url))

二、本地及非公网文件在线预览

本地或内网预览需要借助插件实现,pdf、mp3、mp4等主要靠原生标签或浏览器自带功能,尽量减少了插件的安装

(一)pdf、txt

直接使用ifrem嵌入页面,用浏览器自带预览功能满足基本需求,其他也可以试试vue-office的pdf插件

pdf预览效果

前端vue3实现本地及在线文件预览(含pdf/txt/mp3/mp4/docx/xlsx/pptx)插图(1)

txt预览效果

前端vue3实现本地及在线文件预览(含pdf/txt/mp3/mp4/docx/xlsx/pptx)插图(2)

(二)mp3、mp4

使用原生audio和video标签能满足基本需求,如有其他功能的需要可以使用video.js等插件

mp3预览效果

本站无任何商业行为
个人在线分享 » 前端vue3实现本地及在线文件预览(含pdf/txt/mp3/mp4/docx/xlsx/pptx)
E-->