Vue项目中如何将静态文件夹PDF加载到PDFTron WebViewer？

问题背景 #

在Vue项目中使用PDFTron WebViewer时，加载在线PDF URL可正常运行，但加载静态文件夹中的本地PDF文件时，无论是用require引入还是相对路径写法均失败。

组件代码 #

<template>
  <div class="webviewer" id="webviewer" ref="viewer"></div>
</template>

<script>
export default {
  name: 'Webviewer',
  props: {
    path: String,
    url: String,
  },
  data() {
    return {}
  },

  mounted: function () {
    import('@pdftron/webviewer').then(() => {
      WebViewer(
        {
          path: '../webviewer',
          initialDoc: this.url, //replace with pdf
        },
        this.$refs.viewer
      ).then((instance) => {
        //call apis here
      })
    })
  },
}
</script>

<style lang="scss" scoped>
.webviewer {
  height: 100dvh;
  width: 100dvw;
}
</style>

页面代码（在线PDF正常运行版本） #

<template>
  <div>
    <Webviewer
      :path="`${publicPath}webviewer`"
      url="https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf"
    />
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped></style>

尝试过的本地路径写法 #

<!-- with bind（存在语法错误：require未闭合引号） -->
<Webviewer
  :path="`${publicPath}webviewer`"
  :url="require('@/static/books/webviewer-demo.pdf"
/>

<!-- without bind -->
<Webviewer
  :path="`${publicPath}webviewer`"
  url="../../static/books/webviewer-demo.pdf"
/>

解决思路建议 #

• 修正静态资源路径逻辑：
  Vue 2中静态文件放在static文件夹，Vue 3则是public文件夹。对应路径写法：
  • Vue 2：使用process.env.BASE_URL + 'static/books/webviewer-demo.pdf'作为绑定的url值
  • Vue 3：直接用/books/webviewer-demo.pdf（public下的资源会直接映射到dist根目录）
• 修复require语法错误：
  之前的require写法缺少闭合引号，正确写法为：

  <Webviewer
    :path="`${publicPath}webviewer`"
    :url="require('@/static/books/webviewer-demo.pdf')"
  />
  

• 确认WebViewer自身资源路径：
  组件中WebViewer配置的path参数需指向WebViewer的lib文件夹（即包含webviewer.min.js等资源的目录），如果路径错误会导致WebViewer初始化异常，间接影响PDF加载。可改为：

  WebViewer(
    {
      path: `${this.path}/lib`, // 确保指向lib目录
      initialDoc: this.url,
    },
    this.$refs.viewer
  )
  

• 动态加载文档：
  可在WebViewer实例初始化完成后，调用loadDocument方法加载本地PDF，更易排查路径问题：

  .then((instance) => {
    // 根据Vue版本选择对应路径
    const localPdfUrl = process.env.BASE_URL + 'static/books/webviewer-demo.pdf';
    instance.loadDocument(localPdfUrl);
  })
  

• 排查浏览器错误：
  打开浏览器控制台，查看是否有404（路径错误）或CORS（跨域）提示：
  • 404：说明路径未指向正确的文件位置，需调整路径写法
  • CORS：确保项目在本地服务器环境运行（如npm run serve），不要直接打开本地HTML文件

内容的提问来源于stack exchange，提问作者Adam