PDF预览插件

下载PDF静态资源包：

pdf文件格式预览包；

将下载资源文件解压放在Vue项目public目录下：

Vue页面引用方式：

pdfFileUrl为Vue定义的PDF地址变量

<!--
 * @Description: PDF文件格式预览组件
 * @version: 
 * @Author: zhao wen bo
 * @Date: 2022-03-07 15:21:08
 * @LastEditors: Please set LastEditors
 * @LastEditorTime: Do not edit
 * @FilePath: \middleground-vue\src\views\skyvis\wszz\sign\pdfPreview.vue
-->
<template>
  <div class="watch-pdf-file">
    <iframe
      ref="pdfIframe"
      :src="'/static/pdf/web/viewer.html?file=' + encodeURIComponent(pdfFileUrl)"
      frameborder="0"
      style="width: 100%; height: 100%"
    ></iframe>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
export default {
  name: 'PdfPreview',
  components: {},
  data() {
    return {
      // 查询PDF路径id
      pdfId: '1234567',
      // 后台生成pdf地址
      pdfFileUrl: '',
      url: {
        // 获取签字文书列表
        queryPdfUrl: '/middleground/pdfFileById',
      },
    }
  },
  methods: {
    // 查询pdf地址接口
    queryPdfFileUrl() {
      let that = this
      let params = {
        id: that.pdfId,
      }
      getAction(that.url.queryPdfUrl, params).then((res) => {
        if (res.success) {
          let result = res.result
          that.pdfFileUrl = result.PdfUrl
        } else {
          that.$message.warning('未查找到PDF地址!')
        }
      })
    },
  },
  created() {
    let that = this
    that.queryPdfFileUrl()
  },
}
</script>

<style scoped>
.watch-pdf-file {
  width: 500px;
  height: 700px;
}
</style>

Tips:具体接口和变量名定义可根据自己需求修改

按上面操作即可查看PDF文件支持页面预览