使用@vue-office/pdf时，pdf展示不全

不吃香菜的猪2026-01-22 16:36

问题描述

pdf有100多页，但是只展示前四五页，后面的页面高度是能检测到但是没有内容

解决办法

给组件设置高度

完整示

html 复制代码

<template>
  <div class="systemDescription">
    <div class="systemDescription-header">系统说明</div>

    <lineH style="margin: 20px 0" />

    <div class="systemDescription-pdf" v-loading="loading">
      <vue-office-pdf
        style="height: calc(100vh - 14.7rem)"
        :src="pdfSrc"
        @rendered="renderedHandler"
        @error="errorHandler"
      />
    </div>
  </div>
</template>

<script setup>
// import VueOfficePdf from "@vue-office/pdf"; 【vue2使用这种方式导入】
import VueOfficePdf from "@vue-office/pdf/lib/v3/vue-office-pdf.mjs";
import { ref } from "vue";

const pdfSrc = ref(
  "https://aaa.com/bc22cbec45.pdf"
);
const loading = ref(true);

const renderedHandler = () => {
  loading.value = false;
  console.log("渲染完成");
};
const errorHandler = () => {
  loading.value = false;
  console.log("渲染失败");
};
</script>

<style lang="scss" scoped>
.systemDescription {
  padding: 50px 30px 40px;

  &-header {
    font-size: 26px;
    font-family: Source Han Sans CN;
    font-weight: 700;
    color: #333;
    text-align: center;
  }

  &-pdf {
    margin: 0 0 0 -24px;
    width: calc(100% + 50px);
    height: calc(100vh - 14.7rem);
    overflow-y: auto;
  }
}
</style>