vue-pdf 如何防止页面被裁剪

Vue-PDF是一个用于在Vue.js应用中嵌入PDF文件的库。为了防止页面被裁剪，你可以采取以下几个步骤：

1. **设置合理的视口**：在渲染PDF之前，你需要配置`pdfjs-lib`库的`PDFViewer`组件的视口大小。确保宽度和高度足够大，覆盖整个屏幕，可以避免默认的缩放导致裁剪。

<template>
  <div id="pdf-container">
    <pdf-viewer ref="pdfViewer" :src="pdfSrc" :width="fullPageWidth" :height="fullPageHeight"></pdf-viewer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pdfSrc: 'your_pdf_url',
      fullPageWidth: '100%', // 设定为全屏宽度
      fullPageHeight: '100%', // 设定为全屏高度
    };
  },
};
</script>

2. **禁用用户缩放**：通过配置`PDFViewer`组件，可以禁止用户手动缩放文档。在`mounted`钩子里添加如下代码：

mounted() {
  this.$refs.pdfViewer.api.getOperatorList().then((operatorList) => {
    const params = { disableAutoPrint: true, disableScaling: true };
    operatorList每一页.forEach((page) => {
      page.params = { ...params };
    });
    this.$refs.pdfViewer.update({ operatorList });
  });
},

3. **自适应布局**：如果PDF页面内容超过视口，可以使用`vue-pdf`提供的滚动功能，让用户能够滚动查看完整内容，而不是被裁剪。

请注意，以上代码示例假设你已经在项目中安装并引入了`vue-pdf`和`pdfjs-dist`库。如果你还没有安装，可以使用npm或yarn来安装：

npm install vue-pdf pdfjs-dist
# 或者
yarn add vue-pdf pdfjs-dist