vue实现pdf预览功能

背景：材料上传之后点击预览实现在浏览器上预览的效果
效果如下：

实现代码如下：
//预览和下载操作

              
            
// 材料预览
export function materialPreview(data) {
    return Http.request({
      url: '/file/preview',
      method: 'get',
      responseType: 'blob',
      data: data
    });
  }
  //预览弹窗
  
      

        
      
    
    //data中定义的变量
      data() {
    return {
      pdfSrc: "",
      downloadUrl: "http://10.110.96.76/",
      PreviewDialogVisible: false,
      }
     }
    //预览代码
        handleRowClick(row) {
      materialPreview({
        fileName:row.fileName,
        realFileName:row.fileName,
      }).then((res) => {
        console.log(res);

        const blob = new Blob([res.data], { type: "application/pdf" });
        this.pdfSrc = window.URL.createObjectURL(blob);
        this.$nextTick(() => {
          this.PreviewDialogVisible = true;
        });

        console.log(this.pdfSrc);
        //window.open(this.pdfSrc) //新窗口打开，借用浏览器去打印
      });
    }
    //下载代码
      handleDownLoadClick(data) {
      if (data.downloadUrl != null) {
        window.open(this.downloadUrl + data.downloadUrl);
      }
    },

后台返回的流文件格式