使用vue-pdf做本地预览pdf文件，通过垂直滚动条展示全部pdf内容，不展示分页按钮

1.把pdf文件放到static文件夹下面

2.安装"vue-pdf": "4.2.0","pdfjs-dist": "2.5.207",（pdfjs-dist解决vue-pdf一个报错），node 版本 v20.19.2。具体插件版本号和node相匹配

父组件：

<template>
  <div>
    <!-- 导航 -->
    <div class="nav-container">
      <ul class="leo-flex">
        <!-- v-for="(item, index) in navList[details.productCataloging?.deliverWay]" -->
        <li
          v-for="(item, index) in navList[1]"
          :key="index"
          :class="currentNav === item.code ? 'active' : ''"
          @click="changeNav(item.code)"
        >
          <span>{{ item.value }}</span>
        </li>
      </ul>
      <div
        class="content"
        :style="{
          'max-height': details && details.applyState ? 'auto' : '1000px',
          'min-height': '300px',
        }"
      >
        <!-- 详情介绍 -->
        <product-details
          v-if="currentNav === 0"
          :detailHtml="details.productCataloging && details.productCataloging.explanation"
          :productPdf="productPdfArr"
        />
        
        <!-- 合法合规声明  数据质量、产品-pdf文件展示 -->
        <PreviewPdf
          v-if="currentNav === 1 || currentNav === 2"
          :productPdf="productPdfUrl"
          :currentPage="currentPage"
        />
        
      </div>
    </div>
  </div>
</template>
<script>
import productDetails from './product-details.vue'
import  PreviewPdf from './previewPdf.vue'
export default {
  components: {
    productDetails,
    PreviewPdf
  },
  props: {
    details: {
      type: Object,
      default: {},
    },
    subscribeList: {
      type: Array,
      default: () => {
        return []
      },
    },
    navList: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      fileList: [],
      productPdfUrl: 'static/lawyer.pdf',
      currentPage: 1,
      productPdfArr: [],
    }
  },
  methods: {
    changeNav(code) {
      this.currentNav = code
      if(code == 1){
        this.productPdfUrl = 'static/lawyer.pdf'
        this.currentPage = 1
      }else if(code == 2){
        this.productPdfUrl = 'static/quality.pdf'
        this.currentPage = 1
      }
    },
  },
}
</script>

子组件-PreviewPdf预览组件

<template>
    <div class="product-details">
      <div class="pdf-container">
        <!-- 加载状态 -->
        <div v-if="!totalPages && productPdf" class="loading-container">
          <span>PDF加载中...</span>
        </div>
        <!-- 用于获取总页数的隐藏PDF组件 -->
        <pdf
          v-if="!totalPages && productPdf"
          :src="productPdf"
          :page="1"
          @num-pages="onNumPages"
          @error="onError"
          style="display: none;"
        ></pdf>
        <!-- 渲染所有页面 -->
        <pdf
          v-for="i in totalPages"
          :key="i"
          :src="productPdf"
          :page="i"
          @error="onError"
          style="width: 100%; border: 1px solid #eee; margin-bottom: 10px;"
        ></pdf>
        <!-- 错误状态 -->
        <!-- <div v-if="errorMessage" class="error-container">
          <span>{{ errorMessage }}</span>
        </div> -->
      </div>
    </div>
</template> 
  
  <script>
  import pdf from 'vue-pdf';
  export default {
    name: "PreviewPdf",
    components: {
      pdf
    },
    props: {
      productPdf: {
        type: String,
        defualt: '',
      },
    },
    data() {
      return {
        totalPages: 0,
        errorMessage: '',
      };
    },
    methods: {
      onNumPages(numPages) {
        this.totalPages = numPages;
        this.errorMessage = '';
      },
      onError(error) {
        console.error('PDF加载错误:', error);
        this.errorMessage = 'PDF文件加载失败，请检查文件路径或格式';
      }
    },
  };
  </script>
  
  <style lang="less" scoped>
  ul,
  li,
  ol,
  p {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .pdf-container{
    max-height: 80vh;
    overflow-y: auto;
    padding: 10px;
  }
  .loading-container, .error-container {
    text-align: center;
    padding: 20px;
    color: #666;
  }
  .error-container {
    color: #f56c6c;
  }
  </style>
  

这个就是本地展示全部pdf的预览组件了，花了些时间解决报错，记录下