vue如何实现pc端图片和pdf格式文件的预览

1.html
       <iframe
          id="printIframe"
          :src="imgUrl"
          frameborder="0"
          style="width: 100%; height: 600px"
        />
2.js代码
    look(item){
    YuLan({ Id: item.uid }).then((res) => {//发送请求获取文件流         
              console.log('yulan123',res.data);//res.data为Blob {size: 0, type: 'text/xml'}这种形式
              const blob = new Blob([res.data], { type })
              this.imgUrl = this.getObjectURL(blob)
            
          })
},

  getObjectURL(file) {
      let url = null
      if (window.createObjectURL !== undefined) {
        // basic
        url = window.createObjectURL(file)
      } else if (window.webkitURL !== undefined) {
        // webkit or chrome
        try {
          url = window.URL.createObjectURL(file)
        } catch (error) {}
      } else if (window.URL !== undefined) {
        // mozilla(firefox)
        try {
          url = window.URL.createObjectURL(file)
        } catch (error) {}
      }
      return url
    },