方式一 http://xxx.xx.com/pdf.pdf 形式

找好插件,或者直接iframe加载就行了

方式二 通过文件流的形式

![image.png](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAyMC9wbmcvMjM5NTA0LzE1OTAzOTYxMzgzOTAtNTA4YmZiZmItMzFiNy00M2Q1LWI5YWEtZWFhZDU5NGNiYjRmLnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=157&margin=[object Object]&name=image.png&originHeight=157&originWidth=337&size=7721&status=done&style=none&width=337)

  • 找到 public/pdf/web/viewer.js 搜索 throw new Error("file origin does not match viewer's") 这行代码,然后以一种 优雅大方的姿势 注释掉!!!

下面是上业务代码:

  • PdfPreview 插件
<template>
  <div class="pdf-preview">
    <el-dialog
      :title="title"
      :visible="dialogVisible"
      width="75%"
      destroy-on-close
      class="pdf-dialog"
      @close="handleClose"
    >
      <iframe
        :src="`/pdf/web/viewer.html?file=${pdfSrc}`"
        frameborder="0"
      />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'PdfPrewiew',
  props: {
    title: {
      type: String,
      default: 'pdf 预览'
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    pdfSrc: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:dialogVisible', false)
    }
  }
}
</script>

<style lang="scss">
  .pdf-dialog{
    .el-dialog__body{
      overflow: hidden;
      iframe{
        height: 500px;
        width: 100%;
      }
    }
  }
</style>

重点就是找到web目录下面的viewer.html文件后面拼装参数即可,参数就是一个地址

<iframe
  :src="`/pdf/web/viewer.html?file=${pdfSrc}`"
  frameborder="0"
 />
  • 使用组件的vue
 // 预览pdf
    prewiewPdf(data) {
      const { file_id } = data
      // get请求后台获取到流,改代码只是参考
      const url = `${process.env.VUE_APP_FILE_PREVIEW}${window.getRequestUrl('/web/file/examine-file-api')}&fileId=${file_id}`
      // 拿到流之后一定要encodeURIComponent转码
      this.pdfSrc = encodeURIComponent(url)
      this.dialogVisiblePdf = true
    }
  • 使用组件
<PdfPreview
  v-if="dialogVisiblePdf"
  title="合同预览"
  :dialog-visible.sync="dialogVisiblePdf"
  :pdf-src="pdfSrc"
/>
Logo

前往低代码交流专区

更多推荐