vue使用pdf.js预览pdf文件

下载 pdfjs 并引入项目中

链接：https://pan.baidu.com/s/1ED74dQA4cFvfUS0RBq9Wsw
提取码：j34q

本项目采用的是vue3，把下载下来的插件放在public文件夹中

image.png

在pdf预览文件组件中，其中，src中的url是pdf文件的预览地址、page是设置pdf打开时从第一页开始显示。

<template>
  <div class="report-food-page">
    <header-top title="食物不耐受报告" showReturn="black"></header-top>
    <div v-if="src" class="pdf_list">
      <iframe :src="'/pdf/web/viewer.html?file='+src" width="100%" height="200%" frameBorder="0"></iframe>
      <!--      <iframe :src=src width="100%" height="200%" frameBorder="0"></iframe>-->
      <!--      <pdf  :src="src"  style="width: 100%" ref="pdf"> </pdf>-->
    </div>
    <div v-else>
      <default-page showText="暂无报告"></default-page>
    </div>
  </div>
</template>

<script>
  import headerTop from '@/components/header/top.vue'
  import defaultPage from '@/components/other/defaultPage.vue'
  import {mapActions, mapGetters, mapMutations} from 'vuex'

  export default {
    name: 'reportFood',
    components: {headerTop, defaultPage},
    data() {
      return {
        src: '',
      }
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    mounted() {
      this.loadFoodReport()
    },
    methods: {
      ...mapMutations(['setLoading']),
      ...mapActions([
        'findFoodReportById'
      ]),
      loadFoodReport() {
        this.setLoading(true)
        this.findFoodReportById({
          patientId: this.userInfo.patient.id,
          callback: (res) => {
            this.setLoading(false)
            if (res.data) {
              this.src = res.data.url
            }else {
              this.src = ''
            }
          },
          errback: (res) => {
            console.log(res)
          }
        })
      },
    }
  }
</script>
<style scoped>
  .report-food-page {
    height: 100vh
  }

  .pdf_list {
    height: 100%;
    overflow: scroll;
    position: absolute;
    top: -0.1rem;
    width: 100%;
  }

</style>