(vue)前后端配合实现文件预览功能

(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 = resconst url = window.URL.createObjectURL(new Blob([data], {type: 'application/pdf'}))const link = document.createElement('a')link.style.display = 'none'window.open(url)})
},