vue项目使用vue-pdf插件问题

Question

vue2项目使用vue-pdf插件，文件显示不出来，页面一直处于加载中，在loadPdfHandler方法下this.url.promise.then好像未执行
pdf文件保存在public文件下

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

问题描述： 在 vue2 项目中使用 vue-pdf 插件，但是 pdf 文件无法显示，页面一直处于加载中。在 loadPdfHandler 方法中，this.url.promise.then 方法好像没有执行。pdf 文件保存在 public 文件夹下。 问题解决方法：

1. 确认是否引入了正确的 vue-pdf 插件及相关依赖。
2. 确认 pdf 文件路径是否正确。在 vue-cli 3.x 中，如果将 pdf 文件放在 public 文件夹下，则可以通过相对路径（如 /pdf/test.pdf）的方式进行引用。如果文件放在 src 文件夹下，则需要使用 import 引入（如 import test from '../pdf/test.pdf'）。
3. 确认代码中 loadPdfHandler 方法的实现是否正确。下面是一个示例代码：

loadPdfHandler() {
  let url = process.env.BASE_URL + '/pdf/test.pdf'
  PDFJS.getDocument(url).promise.then(pdf => {
    this.pdf = pdf
    this.totalNum = pdf.numPages
    this.currentPage = 1
    this.renderPageHandler(1)
  })
}

其中，process.env.BASE_URL 是 vue-cli 3.x 中默认定义的一个变量，用于获取当前应用的根路径。如果需要将 pdf 文件放在 public 文件夹下，则需要将 url 定义为绝对路径。 4. 确认浏览器的安全设置是否允许加载本地文件。有些浏览器默认不允许加载本地文件，可能会导致页面一直处于加载状态，需要进行相应的设置。 参考链接： 1. vue-pdf 文档：https://github.com/FranckFreiburger/vue-pdf 2. PDF.js 文档：https://mozilla.github.io/pdf.js/