VueJS：使用导航器中的默认播放器打开 PDF 文件

Question

我正在尝试使用 VueJS 打开 PDF 文件。 我想使用默认导航器的播放器在新标签页中打开它。

我尝试了以下方法：

1

<a href="./pdf/doc.pdf" target="_blank">pdf</a>

/pdf/doc.pdf 位于公共目录中的位置。 该解决方案尝试打开添加 /pdf/doc.pdf 的路线。不是预期的，也无法可视化 PDF 文档。

2

<a href="<%= BASE_URL %>/pdf/doc.pdf" target="_blank">pdf</a>

我收到了这个错误：

URIError：无法解码参数'/fr/%3C%=%20BASE_URL%20%%3E/pdf/doc.pdf'

3

<a @click.prevent="pdfDoc">pdf</a>

data() {
  return {
    pdfDoc: require('../../public/pdf/doc.pdf')
  }
}

我收到了这个错误：

./public/pdf/doc.pdf 1:0 模块解析失败：意外令牌 (1:0) 您可能需要适当的加载器来处理此文件类型，目前没有配置加载器来处理此文件。

我怎样才能简单地实现在新选项卡中打开 PDF 并显示它？

Answer 1

1. 将PDF文档放到你的Vue项目静态目录中
2. 将 PDF 文档放在项目外部，并设置负载平衡以服务 PDF url 请求

Answer 2

问题在路由器配置中解决了...

  {
    path: '*',
    redirect() {
      return Trans.getUserSupportedLang()
    }
  }

捕获请求并尝试将链接作为路由提供... 在 localhost 中删除该路由可以正常工作。

不过，在网络托管上，它与最后一条路线完美匹配。