前端实现预览pdf，后端返回文件流或者base64_前端预览各种文件 后端返回文件流

预览pdf

返回文件流
首先接口一定要设置响应类型
responseType: ‘blob’,
或者
responseType: ‘arraybuffer’, //一定要设置响应类型，否则页面会是空白pdf

API(data)
        .then((res) => {
          let _this = this;
          try {
	//抛出错误信息
            if (res.type.indexOf("application/json") > -1) {
              const reader = new FileReader();
              reader.readAsText(res, "utf-8");
              reader.onload = function () {
                const { msg } = JSON.parse(reader.result);
                _this.$message({
                  message: msg,
                  type: "error",
                });
                //reader.result里面含报错信息
              };
              return;
            }
            const binaryData = [];
            binaryData.push(res);
            const url = window.URL.createObjectURL(
              new Blob(binaryData, { type: "application/pdf" })
            );
            this.pdfUrl = url;//直接用iframe标签
            // this.linkUrl = url;
            // window.open(url)//新窗口打开
          } catch (err) {}
        })
        .finally(() => {
        });
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
27
28
29
30

加了#toolbar=0，少了显示操作栏

  <iframe
    :src="pdfUrl + '#toolbar=0'"
    style="border: none"
    frameborder="0"
    height="600px"
    width="100%"
    scrolling="no"
    marginheight="0px"
    marginwidth="0px"
    v-if="pdfUrl"
  ></iframe>```


1
2
3
4
5
6
7
8
9
10
11
12
13

如果返回的是base64

```javascript
   //     // parmsFiles 就是后台给你返回的一串流
        //     const pdf = "data:application/pdf;base64," +parmsFiles ;
        //     // this.pdfUrl = pdf;
        //     window.document.write(
        //       '<iframe src="' +
        //         pdf +
        //         '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;"></iframe>'
        //     );
1
2
3
4
5
6
7
8
9
10
11
12