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