vue-pdf-app 常见问题解决方案

项目基础介绍

vue-pdf-app 是一个基于 Vue.js v2 和 Mozilla 的 PDF.js 构建的 PDF 查看器。它提供了丰富的功能，如缩放、打印、下载、旋转、文本选择、搜索面板、PDF 文档密码、缩略图、大纲、附件和注释层等。该项目支持跨浏览器使用，包括 IE11，并且提供了颜色定制、按钮图标定制、亮/暗主题、TypeScript 支持以及 UMD/Unpkg 支持。

主要的编程语言是 JavaScript，使用了 Vue.js 框架。

新手使用注意事项及解决方案

1. PDF 查看器在 Firefox 和 Chrome 中不渲染

问题描述：在 Firefox 89 和 Chrome 91 版本中，vue-pdf-app 组件在没有设置高度的情况下，页面会显示为空白，没有任何错误提示。

解决步骤：

• 方法一：在 vue-pdf-app 组件上直接设置高度。

  <vue-pdf-app style="height: 100vh;" pdf="https://example.com/sample.pdf"></vue-pdf-app>
  

• 方法二：将 vue-pdf-app 组件包裹在一个 div 标签中，并通过 CSS 设置高度。

  <div style="height: 100vh;">
    <vue-pdf-app pdf="https://example.com/sample.pdf"></vue-pdf-app>
  </div>
  

2. 在对话框中使用 PDF 查看器时出现问题

问题描述：在对话框中使用 vue-pdf-app 时，可能会出现渲染问题。

解决步骤：

• 使用 v-if 指令确保对话框可见时才渲染 vue-pdf-app 组件。

  <vue-pdf-app v-if="isDialogVisible"></vue-pdf-app>
  

• 在对话框显示时设置 isDialogVisible 为 true，隐藏时设置为 false。

3. 设置 PDF 文档打开时的默认页面缩放比例

问题描述：默认情况下，PDF 文档打开时没有设置缩放比例，用户可能需要手动调整。

解决步骤：

• 使用 @pages-rendered 事件监听器，在页面渲染完成后设置缩放比例。

  <vue-pdf-app @pages-rendered="pagesRenderedHandler"></vue-pdf-app>
  

• 在 pagesRenderedHandler 方法中设置缩放比例。

  export default {
    methods: {
      pagesRenderedHandler(pdfApp) {
        setTimeout(() => {
          pdfApp.pdfViewer.currentScaleValue = 1; // 100%
          // pdfApp.pdfViewer.currentScaleValue = 0.2; // 20%
        }, 0);
      }
    }
  };
  

通过以上步骤，新手用户可以更好地理解和使用 vue-pdf-app 项目，解决常见的问题。