美文网首页
iframe渲染后端二进制流实现pdf等预览

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

作者: Taijia | 来源:发表于2021-07-07 09:24 被阅读0次

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
      }
    },

相关文章

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

    template部分： js方法:

  • 实用第三方工具——HTML实现文件在线预览

    HTML中实现Word/Excel/PDF/PPT等文件的在线预览，除PDF外，其他格式文件需借助iframe标签...

  • 二进制流实现pdf预览

  • 生成文件并下载

    后端渲染把 Excel, PDF二进制数据放到HttpResponse里响应头中设定好content-type和...

  • 前端预览PDF，Excel，Word，TXT文件

    前端可以使用iframe可以直接预览文件，以下是几种依靠iframe实现在线预览的解决方案。