pdf预览

一 、本地文件预览

直接把pdf文件放在public下，

 <a :href="item.url" target="_blank" ></a>

传入的url名字直接'/pdf名字.pdf'即可

二、后端通过接口返回的文件流形式

（个人不专业理解：以字节的形式传输，需要编译一下才可以直接显示 就好像水流一样把一个大的文件分成一段一段的流过去就叫文件流）

具体步骤：

1）导入pdf插件 官网

http://mozilla.github.io/pdf.js/getting_started/#download

放在static文件目录下，

示例

 

2）使用时用 el-dialog嵌套iframe使用

     <el-dialog
        v-model="dialogVisible"
        destroy-on-close
        title="预览"
        width="1000px"
        @close="closeDialog()"
        append-to-body="true"
      >
        <iframe
          :src="pdfUrl"
          frameborder="0"
          style="width: 100%"
          height="500px"
        ></iframe>
      </el-dialog>

 const pdfUrl = ref('')
    const dialogVisible = ref(false)
    const openDialog = (id: string) => {
      dialogVisible.value = true
      let url = BASE_URL + '/platservice/fileupload/download?' + `ids=${id}`//url即为后台传过来的文件流接口
      pdfUrl.value =
        './static/pdf/web/viewer.html?file=' + encodeURIComponent(url) //对字符串进行编码
    }
    const closeDialog = () => {
      dialogVisible.value = false
    }

调用openDialog 即可，传入参数id