PDF预览

<iframe id="preview" :src="fileUrl" frameborder="0"width="100%":height="editHeight":style="{ overflow: 'auto' }"
></iframe>

// pdf预览
API.common.previewFile(_res.data.id).then((res) => {if (this.filesType === 'pdf') {let blob = new Blob([res.data], {type: application})let url = window.URL.createObjectURL(blob)this.fileUrl = url}
})

docx、xls、ppt预览

<iframe :src="http://view.officeapps.live.com/op/view.aspx?src=http%3a%2f%2fvideo.ch9.ms%2fbuild%2f2011%2fslides%2fTOOL-532T_Sutter.docx" frameborder="0"width="100%":height="editHeight":style="{ overflow: 'auto' }"></iframe>

http://view.officeapps.live.com/op/view.aspx?src=<文档位置>

注意： <文档位置> 需要经过 URL 编码，资源必须是公共可访问的。

具体文档看微软接口文档

docx预览（docx转HTML）

由于公司是内网，所以不能使用微软提供的在线预览，需求是可以预览docx，在网上找到了以下方法，把docx文件转为html，然后渲染到页面

<div class="sub-skeleton-box" v-html="vHtml"></div>

// word预览
API.common.previewFile(_res.data.id).then((res) => {if (this.filesType === 'docx') {let reader = new FileReader()reader.readAsArrayBuffer(res.data)const that = thisreader.onload = function(e) {const buffer = e.target.result // 此时是arraybuffer类型mammoth.convertToHtml({ arrayBuffer: buffer }).then((result) => {that.vHtml = result.value})}}
})

jpeg、jpg、png预览

<img :src="fileUrl" alt="" width="100%"/>

API.common.previewFile(_res.data.id).then((res) => {let blob = new Blob([res.data])let reader = new FileReader()const that = thisreader.readAsDataURL(blob) // 转换为base64reader.onload = function() {that.fileUrl = reader.result}
})

Vue实现pdf、docx、jpg在线预览功能相关推荐

前端vue实现pdf文件的在线预览
3.前端vue实现pdf文件的在线预览我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...
前端【vue】实现文档在线预览功能，在线预览pdf、word、xls、ppt等office文件
前端江太公前端实现文档在线预览功能最直接的就是使用XDOC 文档云服务 XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本.带参数文本.html文本.json文本.公 ...
vue docx-preview实现docx文件在线预览
之前一般做项目进行文件浏览的时候基本都是用的window.open+url的形式打开文件,进行浏览操作的,但是这种打开方式只能够在线浏览如jpg.png.pdf这类文件,对于文档类型docx这种则是用 ...
php 存PDF文件及其在线预览功能
正值奥运时期,一觉醒来有种想用PHP打印PDF来记录各国金牌的想法,即使中国队那么不争气我也忍了. 今天使用的类叫FPDF,FPDF这个PHP Class允许你采用纯PHP(更确切地说就是不需要使用P ...
前端实现docx、pdf格式文件在线预览
介绍在业务中,如果遇到文档管理类的功能,会出现需要在线预览的业务需求,本文主要是通过第三方库来实现文档预览功能,并将其封装成preview组件 docx docx的实现需要使用docx-previe ...
文档在线预览（四）使用js前端实现word、excel、pdf、ppt 在线预览
文章目录实现方案一.docx文件实现前端预览 1.docx-preview 2.Mammoth 二.PDF文件实现前端预览 1.pdf.js 2.pdfobject.js 3.vue-pdf 4. ...
java零碎要点010---Java实现office文档与pdf文档的在线预览功能
最近项目有个需求要java实现office文档与pdf文档的在线预览功能,刚刚接到的时候就觉得有点难,以自己的水平难以在三四天做完.压力略大.后面查找百度资料.以及在同事与网友的帮助下,四天多把它做完 ...
vue移动端实现excel在线预览
上篇博客我提到了ios手机不能实现下载功能,但是可以实现预览,图片预览和pdf预览我已经在前篇博客做了讲解,但是,在工作中大家上传最多的应该是excel的文件,今天我就讲解一下excel移动端的预览实 ...
【aspose】 word/excel转pdf，实现在线预览文件功能
项目场景: 需求描述:上传附件后,可实现在线预览,这里就会存在一个问题,很多附件的类型是没法在线预览的,点击就会下载.除pdf/jpg/jpeg等,于是技术方案定,将word/excel等类型的文件转 ...
java 预览word文档_Java实现office文档与pdf文档的在线预览功能
最近项目有个需求要java实现office文档与pdf文档的在线预览功能,刚刚接到的时候就觉得有点难,以自己的水平难以在三四天做完.压力略大.后面查找百度资料.以及在同事与网友的帮助下,四天多把它做完 ...

Vue实现pdf、docx、jpg在线预览功能

Vue实现pdf、docx、jpg在线预览功能

PDF预览

docx、xls、ppt预览

docx预览（docx转HTML）

jpeg、jpg、png预览

Vue实现pdf、docx、jpg在线预览功能相关推荐

最新文章

热门文章