(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)
  })
},