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