iframe渲染后端二进制流实现pdf等预览

template部分:

<iframe :src="pdfUrl" frameborder="0" style="width: 100%; height: 90vh"></iframe>

js方法:

async showDoc(data) {
      console.log('doc---', data)
      try {
        this.isShowPdfDialog = true
        this.isViewPdfLoading = true
        const res = await fileService.downloadFile(`Hud/document/${data.DocumentId}`)
        if (res) {
          const blob = new Blob([res], {    // 关键代码
            type: 'application/pdf'
          })
          this.pdfUrl = window.URL.createObjectURL(blob)  // 关键代码
          console.log('pdfUrl', this.pdfUrl)
          this.getPdfFormData(data.DocumentId)
          this.isViewPdfLoading =false
        }
      } catch(err) {
        this.isViewPdfLoading = false
      }
    },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容