前端pdf流的形式预览

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

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

方式二 通过文件流的形式

• 下载 pdf.js https://mozilla.github.io/pdf.js/getting_started/#download
• 解压完之后会有两个文件夹一个是 build ,另外一个是 web
• 把这两个文件夹拷贝到自己的项目当中 静态资源目录 以Vue为例，就是放到 public 问价下面即可


• 找到 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"
/>