用vue实现pdf预览

iframe

<iframe :src="fileURLOther">iframe> 
1

import axios from "axios";
data() {
    return {
      fileURLOther: "",
      url:'',
      id:''
    }
}

methods：{
  openPDF() {
      axios({
        method: "get",
        url: this.url,//文件的url
        params: {
          fileId: this.id,//文件的id
        },
        responseType: "blob",// 设置返回类型
      }).then((res) => {
        let blob = new Blob([res.data], {
          type: "application/pdf;chartset=UTF-8",
        });
        this.fileURLOther = URL.createObjectURL(blob);
      });
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

window.open

<el-button @click="openPDF"> 预览 el-button>
1