Vue~在线预览doc、docx、pdf、img文件

1、导入控件

2、创建组件

3、使用组件

1、导入控件

//预览docx

npm install docx-preview --save
npm install jszip --save

//图片缩放空控件

npm install vue-photo-preview --save

2、创建组件

<template><!--  图片、pdf、docx 预览"docx-preview": "^0.1.4","jszip": "^3.10.0",--><div><a-modal title="文件预览" :visible="showDoc || showPdf || showImg" :maskClosable="false" @cancel="cancel"width="750px"><template slot="closeIcon"><my-icon icon="close-circle" class="closeIcon"/></template><template slot="footer"><div v-if="showPdf" class="pdf-layout-page"><my-button @click="changePdfPage(0)" :disabled="currentPage===1" name="上一页"/>{{currentPage}} / {{pageCount}}<my-button @click="changePdfPage(1)" :disabled="currentPage===pageCount" name="下一页"/></div><my-button name="取消" @click="cancel"/></template><div class="modal-body form"><div v-if="showImg"><img :src="data:images" preview="1" preview-text="" style="width:100%"/></div><div v-show="showDoc" ref="word"><iframe v-if="fileUrl" frameborder="0":src="fileUrl"width='100%'height="100%"></iframe></div><div v-show="showPdf" class="pdf-layout" id="top"><pdf-viewref="pdf":src="pdfPath":page="currentPage"@num-pages="pageCount=$event"@page-loaded="currentPage=$event"@loaded="loadPdfHandler"/></div></div></a-modal></div>
</template><script>import pdfView from 'vue-pdf'import axios from 'axios'const docxPre = require('docx-preview')window.JSZip = require('jszip')export default {name: 'FilePreview',components: { pdfView },data() {return {showDoc: false,//判断如果是否为word文件显示showPdf: false,//判断如果是否为pdf文件显示showImg: false,//判断如果是否为图片显示fileUrl: '',//pdf链接images: '',//图片链接currentPage: 0, // pdf文件页码pageCount: 0, // pdf文件总页数}},methods: {showView(filePath) {let that = thislet type = filePath.split('.')[filePath.split('.').length - 1]if (type === 'jpg' || type === 'png' || type === 'jpeg') {that.images = filePaththat.showImg = true} else if (type === 'pdf') {that.loadPdfHandler()//重置pdf第一页展示that.pdfPath = filePaththat.showPdf = true} else if (type === 'doc') {//word预览 that.fileUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + filePaththat.showDoc = true} else if (type === 'docx') {//word预览that.showDoc = truethat.previewWord(filePath)}},// 后端返回二进制流previewWord(filePath) {let that = this// 这里需要提起打开弹窗，因为有时很找不到word的ref 会报错axios({method: 'get',responseType: 'blob', // 因为是流文件，所以要指定blob类型url: filePath  }).then(({ data }) => {docxPre.renderAsync(data, this.$refs.word)})},//pdf上一页下一页操作changePdfPage(val) { if (val === 0 && this.currentPage > 1) {this.currentPage-- }if (val === 1 && this.currentPage < this.pageCount) {this.currentPage++this.top()}},top() {document.querySelector('#top').scrollIntoView(true)},// pdf加载时loadPdfHandler(e) {this.currentPage = 1 // 加载的时候先加载第一页},cancel() {this.showDoc = false//判断如果是否为word文件显示this.showPdf = false//判断如果是否为pdf文件显示this.showImg = false//判断如果是否为图片显示}}}
</script>
<style lang="less" scoped>.form {height: 600px;overflow: auto;} .pdf-layout-page {left: 30%;margin: auto;display: inline-block;text-align: center;font-size: 14px;position: absolute}
</style>

3、使用组件


<template> <div><file-preview ref="filePreview"/> </div>
</template><script>//组件中引入 import FilePreview from '@/components/FilePreview/index'export default {components: { FilePreview  },methods: {lookFile() {this.$refs.filePreview.showView(fileUrl)}}
} </script>

docx-preview组件在解析doc文件会失败，docx可以；没搞清楚是为什么

注：示例中使用的ui框架是 Ant Design Vue ，使用的控件可替换成相应项目的ui框架

antui框架官网https://1x.antdv.com/docs/vue/introduce-cn/

Vue~在线预览doc、docx、pdf、img文件相关推荐

在线预览doc,docx文档
在线预览doc,docx文档前言:上传成功以后的每个文档都能获取到所传文件的路径; 我这里是一个maven项目,需要在pom文件引入 <dependenc ...
java文件预览_java 在线预览doc，pdf
先说一说如何实现在线预览doc网上查了很多资料,基本思路就是将doc 转为 pdf,由于低版本浏览器不支持预览pdf,所以基本是再将pdf 转为 swf. 由于我这次做的需求只需要兼容chrome即可 ...
java 文件在线预览_java 在线预览doc，pdf
先说一说如何实现在线预览doc 网上查了很多资料,基本思路就是将 doc 转为 pdf,由于低版本浏览器不支持预览 pdf,所以基本是再将 pdf 转为 swf (使用FlexPaper + swft ...
vue在线预览word，pdf， xls，ppt 文档
首先先踩坑(也不算坑,只是跟我的需求不匹配) 一 ,官方渠道使用微软提供的Office Online平台只需要一个网址即可在线查看Xls,doc,PPT等文档 http://view.officea ...
文件在线预览doc，docx转换pdf（一）
文件在线预览doc,docx转换pdf(一) 前言文档转换是一个是一块硬骨头,但是也是必不可少的,我们正好做的知识库产品中,也面临着同样的问题,文档转换,精准的全文搜索,知识的转换率,是知识库产品的 ...
vue 在线预览、下载word、pdf文件
vue 在线预览.下载word.pdf文件最近项目用vue-cli3要实现word和pdf文档的在线预览和下载,在网上看到各位大佬们各种办法,发现踩坑无数,还是没弄出来,最后发现还是是自己想复杂了 ...
使用Unoconv和LibreOffice进行格式转换实现在线预览 doc，doxc，xls，xlsx，ppt，pptx 文件
此项目根据企业真实需求制作而成,希望能帮助大家解决在线预览的问题! 此项目已开源,欢迎大家来STAR 软件版本 SpringBoot 2.2.2.RELEASE LibreOffice 6.3.2 ...
SpringBoot 使用LibreOffice 在线预览 doc，doxc，xls，xlsx，ppt，pptx 文件
接上一篇:linux环境源码安装unoconv Linux环境_源码安装Unoconv实现文件在线预览doc,doxc,xls,xlsx,ppt,pptx 文件 https://gblfy.blog. ...
SpringBoot 使用unoconv 在线预览 doc，doxc，xls，xlsx，ppt，pptx 文件
接上一篇:linux环境源码安装unoconv Linux环境_源码安装Unoconv实现文件在线预览doc,doxc,xls,xlsx,ppt,pptx 文件 https://gblfy.blog. ...

Vue~在线预览doc、docx、pdf、img文件

1、导入控件

2、创建组件

3、使用组件

Vue~在线预览doc、docx、pdf、img文件相关推荐

最新文章

热门文章