项目种我们可能会用到文件预览这个功能
一般的文件预览这些前端就可以直接实现
pdf预览插件(vue-pdf)
安装
npm install --save vue-pdf
使用
import pdf from “vue-pdf”
在需要用的组件上直接引入
docx预览插件(mammoth)
该插件主要是把源文档转成了html,不支持doc文件
安装
npm install --save mammoth
使用方法同上
import mammoth from ‘mammoth’
我简单做了一个支持图片,pdf,docx文件的在线预览,其他的后续可能会再加
下面就是我的组件的代码了
<template>
<div>
<div v-if="filetype == 1">
<el-button-group>
<el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
<el-button type="primary" size="mini" @click="nextPage">下一页<i
class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
<div style="marginTop: 10px; color: #409EFF">{{ pageNum }} / {{ pageTotalNum }}</div>
<pdf :page="pageNum" :src="url" @progress="loadedRatio = $event" @num-pages="pageTotalNum = $event"></pdf>
</div>
<div v-else-if="filetype == 2">
<div v-html="docHtml"></div>
</div>
<div v-else-if="filetype == 3">
<img :src="url" alt="" style="width: 500px; height: 500px;">
</div>
</div>
</template>
<script>
import pdf from 'vue-pdf'
import mammoth from 'mammoth'
export default {
name: 'Pdf',
components: {
pdf,
},
props: {
fileUrl: {
type: String,
default: '',
}
},
data() {
return {
url: '',
pageNum: 1,
pageTotalNum: 1,// # 总页数
loadedRatio: 0,// # 当前页面的加载进度,范围是0-1 ,等于1的时候代表当前页已经完全加载完成了
filetype: '',
docHtml:'',//docx文件展示
}
},
watch: {
fileUrl(newval) {
console.log(newval);
this.getFiletype(newval)
}
},
created() {
this.getFiletype(this.fileUrl)
console.log(this.fileUrl, '地址');
},
methods: {
/**
* docx文件预览
*/
initDocPreview() {
// 请求文件流
try {
let _this = this
const xhr = new XMLHttpRequest();
xhr.open('get', this.url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
if (xhr.status === 200) {
mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) }).then(function (resultObject) {
_this.docHtml = resultObject.value
})
} else if (xhr.status === 404) {
_this.$error({ message: "文件不存在" })
} else {
_this.$error({ message: "读取服务器文档异常" })
}
}
xhr.onerror = function () {
_this.$error({ message: "访问服务器异常,请检查访问链接是否正常" })
}
xhr.send();
} catch (e) {
this.docHtml = '<h1 style="text-align: center">暂无内容</h1>'
}
},
getFiletype(url) {
this.url = url
if (!url) {
return null
}
let fileName = this.url.lastIndexOf(".");//取到文件名开始到最后一个点的长度
let fileNameLength = this.url.length;//取到文件名长度
let fileFormat = this.url.substring(fileName + 1, fileNameLength);//截
console.log(fileFormat)
if (fileFormat.toLowerCase() === "pdf") {
this.filetype = 1
} else if (fileFormat.toLowerCase() === "docx") {
this.filetype = 2
this.initDocPreview()
} else if (fileFormat.toLowerCase() === "jpeg" || fileFormat.toLowerCase() === "png" || fileFormat.toLowerCase() === "jpg") {
this.filetype = 3
}
console.log(this.filetype);
},
// 上一页
prePage() {
let page = this.pageNum
page = page > 1 ? page - 1 : this.pageTotalNum
this.pageNum = page
},
// 下一页
nextPage() {
let page = this.pageNum
page = page < this.pageTotalNum ? page + 1 : 1
this.pageNum = page
}
}
}
</script>
只需要传进来一个url链接就可以了,快cv拿走用吧