我是将预览内容显示在对话框中的,word文件预览需要安装一个库
这是命令:pnpm install vueofficedocx
xml
<el-dialog v-model="dialogTwoVisible" title="文件预览" width="800" align-center fullscreen>
<!-- docx -->
<vue-office-docx v-if="fileType == 'docx'" :src="src" />
<!-- pdf/text -->
<iframe
v-if="['pdf', 'text'].includes(fileType)"
:src="src"
width="100%"
id="bdIframe"
></iframe>
<!-- md -->
<div v-if="fileType == 'md'" :src="src" id="markdown-preview" v-html="html"></div>
</el-dialog>
下面是文件上传成功的回调函数 :on-success="submitFormSuccess"
scss
const html = ref()
const src = ref('')
/** 文件上传成功处理 */
const submitFormSuccess = (response: any, uploadFile) => {
// response是上传成功后的返回值,uploadFile就是你上传的文件
fileType.value = uploadFile.name.split('.')[1]
//word和pdf用的这个
if (fileType.value !== 'md') {
src.value = URL.createObjectURL(uploadFile.raw)
} else {
//将文件内容读入内存
const reader = new FileReader()
//读取完成后触发
reader.onload = () => {
const markdownText = reader.result
const md = new MarkdownIt()
html.value = md.render(markdownText)
}
//异步按字符读取文件内容,结果用字符串形式表示
reader.readAsText(uploadFile.raw)
}
}
pdf有点问题,要改样式,网上搜说是因为触发事件的时候 dialogI弹框里面拿不到 id为bdIframe的组件
ini
const onPreview = () => {
dialogTwoVisible.value = true
if (fileType.value === 'pdf') {
setTimeout(function () {
/**
* iframe-宽高自适应显示
*/
const oIframe = document.getElementById('bdIframe')
const deviceHeight = document.documentElement.clientHeight
// oIframe.style.width = Number(deviceWidth) - 220 + "px"; //数字是页面布局宽度差值
oIframe!.style.height = Number(deviceHeight) - 110 + 'px' //数字是页面布局高度差
}, 500)
}
}
下面就是效果图了