(vue)前后端配合实现文件预览功能
1.页面:
2.后台返回数据:
3.预览效果:
4.代码:
<el-descriptions-item>
<template slot="label">文件名称</template>
<el-button type="text" @click="fileView" >{{ file.name }}</el-button>
</el-descriptions-item>
data(){
return {
file:{
name:"",
id:"",
}
}
}
// 文件预览
fileView() {
const data = {
id: this.file.id
}
preview_direct(data).then((res) => { //preview_direct是后端接口名称
const data = res
const url = window.URL.createObjectURL(
new Blob([data], {
type: 'application/pdf'
})
)
const link = document.createElement('a')
link.style.display = 'none'
window.open(url)
})
},