浏览器在线预览文件，可能基于后端来做效果会更好，前端的话，预览pdf还行，其他就感觉一般了，甚至有的很难支持。
本文之说pdf文件和docx文件的预览
ps:图片预览就不说了哈，浏览器天然的支持 (=
言归正传，其实借助插件，用起来也简单的，麻烦的地方插件都帮你写好了
但是插件体积比较大，所以该功能慎用吧，除非真的需要。vue-pdf插件，生产环境生产的插件代码800kb左右，如果项目并么有必须要这个功能，我觉得还是不要用了。
基于vue-cli创建的vue项目演示
首先安装依赖
npm i vue-pdf mammoth axios --save
创建file-over-view.vue文件
在项目中创建 路由页面文件file-over-view.vue，并且配置好路由，我这里配置实例如下
{
path: '/file-over-view',
name: 'FileOverView',
component: () => import( /* webpackChunkName: "FileOverView" */'../views/file-over-view/file-over-view.vue'),
},
然后直接上file-over-view.vue的代码吧，比较感觉真没啥说的
<!--FileOverView-->
<template>
<div class="fileOverViewBox">
<div class="fileOverViewContentBox">
<div v-if="fileType==='pdf'">
<div style="height:60px;">
<div class="arrow rowCenter">
<span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage===1}">上一页</span>
<div class="pageBox rowCenter">
<span> {
{currentPage}}</span>
<span>/</span>
<span>{
{pageCount}}</span>
</div>
<span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage===pageCount}">下一页</span>
</div>
</div>
<pdf
:src="src"
:page="currentPage"
@num-pages="pageCount=$event"
@page-loaded="currentPage=$event"
@loaded="loadPdfHandler">
</pdf>
</div>
<div v-if="/docx/.test(fileType)" v-html="viewHtml" class="docViewBox"></div>
</div>
</div>
</template>
<script>
import pdf from 'vue-pdf'
import mammoth from 'mammoth'
import axios from 'axios'
export default {
name: 'FileOverView',
components: {
pdf
},
data () {
return {
currentPage: 0, // pdf文件页码
pageCount: 0, // pdf文件总页数
fileType: '', // 文件类型 src: '', // pdf文件地址
src: '', // pdf文件地址
viewHtml:'',//网页字符串
}
},
async created(){
// 有时PDF文件地址会出现跨域的情况,这里最好处理一下
let {
url}=this.$route.query
let fileName=url.split('/')[url.split('/').length-1]
this.fileType=fileName.split('.')[1]
if(/pdf/.test(this.fileType)){
this.src = pdf.createLoadingTask(url)
}else if(/docx/.test(this.fileType)){
let res=await axios({
url,
withCredentials:false,
responseType:'arraybuffer'
})
mammoth.convertToHtml({
arrayBuffer: res.data})
.then(result=>{
console.log(result.value)
this.viewHtml=result.value
})
.done()
}else {
alert('文件格式不支持，仅支持pdf,docx文件预览')
}
},
methods: {
// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
changePdfPage(val) {
// console.log(val)
if (val === 0 && this.currentPage > 1) {
this.currentPage--
// console.log(this.currentPage)
}
if (val === 1 && this.currentPage < this.pageCount) {
this.currentPage++
// console.log(this.currentPage)
}
},
// pdf加载时
loadPdfHandler(e) {
this.currentPage = 1 // 加载的时候先加载第一页
}
}
}
</script>
<style scoped lang="scss">
.fileOverViewBox{
background:#000000;
min-width:100vh;
.fileOverViewContentBox{
width:1000px;
margin:0 auto;
background:#ffffff;
.arrow{
position: fixed;
width:100%;
height:60px;
z-index: 100;
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.5);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.5);
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
background:rgba(255,255,255,0.9);
.turn{
cursor:pointer;
&:hover{
color:#58A5FE;
}
}
.pageBox{
margin:0 20px;
}
}
.docViewBox{
padding:20px;
}
}
}
</style>