前端实现文件在线预览

需求: 一个览pdf、word、xls、ppt等文件需要在线预览功能

介绍

使用 XDOC文档预览云服务文档地址

基于HTTP的REST方式调用，只需要传入URL！支持pdf、docx、xlsx、pptx、rtf、jpg、png、mp4等多种文档格式！

使用方法

http://view.xdocin.com/xdoc?_xdoc=你的文档地址 注意：文档地址要用utf-8编码，并且外网可访问。 例如：http://view.xdocin.com/xdoc?_xdoc=http%3A%2F%2Fview.xdocin.com%2Fdoc%2Fpreview.docx

vue代码实现

使用a链接方式打开新标签页，进行在线预览

filePreview(url) { // 文件预览 const a = document.createElement("a"); a.setAttribute("target", "_blank"); a.setAttribute("href", "http://view.xdocin.com/xdoc?_xdoc=" + url); a.click(); }