前端pdf流的形式预览

素颜马尾好姑娘i 2023-02-12 09:24 18阅读 0赞

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

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

### 方式二 通过文件流的形式 ###

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

!\[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文件后面拼装参数即可，参数就是一个地址

*  使用组件的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
        }

*  使用组件

[https_mozilla.github.io_pdf.js_getting_started_download]: https://mozilla.github.io/pdf.js/getting_started/#download