vue pdf格式预览

 

 

 

 

<div class="imgfile">

        <div v-if="dialog.isPdf" v-loading="iframeLoading">

          <iframe

            :src="dialog.src"

            type="application/x-google-chrome-pdf"

          />

        </div>

        <img

          v-else

          :src="dialog.src"

          alt=""

        >

      </div>

 

methods:{

previewFn(item) {

      if (!(item.url.includes('.png') || item.url.includes('.jpg') || item.url.includes('.jpeg') || item.url.includes('.bmp') || item.url.includes('.JPG') || item.url.includes('.PNG') || item.url.includes('.JPEG') || item.url.includes('.BMP') || item.url.includes('.pdf'))) {

        this.$message.error('文件类型不支持预览')

        return false

      }

      if (item.url.includes('.pdf')) {

        this.dialog.isPdf = true

        this.dialog.src = ''

        this.iframeLoading = true

        downloadFileByUniq(

          item.url

        ).then(res => {

          const blob = new Blob([res], { type: 'application/pdf;chartset=UTF-8' })

          const href = window.URL.createObjectURL(blob)

          this.dialog.src = href

        }).finally(() => {

          this.iframeLoading = false

        })

      } else {

        this.dialog.isPdf = false

 

      }

      this.dialog.dialogVisible = true

      this.checkClass = 'check' + item.intinvoicestatus

    },

}