1、图片和pdf文件可以直接在页面中预览
使用iframe src:后台返回的文件地址或者请求文件流的接口地址直接预览
2、docx文件:
2、1 后台返回的是文件流:
<template>
<div>
<!--文件预览的模块-->
<div v-html="vHtml"></div>
</div>
</template>
<script>
import mammoth from 'mammoth' // mammoth的版本是1.7.2
</script>
fetch(url,{mode:'no-cors'})
.then((response) => response.blob())
.then((res)=>{
const reader = new FileReader()
reader.readAsArrayBuffer(res)
reader.onload = function(e){
mammoth.covertToHtml({ arrayBuffer: e.target.result },
{ includeDefaultStyleMap : true})
.then((result)=>{
let htmlInfo = result.value
//html样式的转化:此处可以根据实际情况进行设置
if(htmlInfo){
let newHtml = htmlInfo.replace(/<img /g,'<img style="max-width:90%;margin:20px auto"')
.replace(/<table/g,'<table style="border:1px solid #ddd"')
this.vHtml = newHtml
}
})
}
})
3、可以参考其他的文章信息
https://blog.csdn.net/xilejie/article/details/103304391
设置展示的文本样式信息 https://www.5axxw.com/questions/simple/9h8m7s