使用VueJS在另一个窗口中打开PDF文件

Answer 1

你想出来了吗？

我的解决方案适用于使用本地运行的 Vue CLI 3 创建的项目（我还没有构建我的项目）。

我的问题和你的类似。我只是想要

<a>

链接在新选项卡上打开我的 pdf 文件，但我的 url 将单个哈希连接到我的路径并将我重定向到我的主页。这是一个非常简单的修复：

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

只是一个点、正斜杠和我的文件名。我的文件位于 root > public 文件夹下。

Answer 2

当我尝试做同样的事情时，出现以下错误：暴露我的简历

./src/assets/resume/Gabriel_Teixeira_Soares_de_Almeida_Resume.pdf 中的错误 1:0 模块解析失败：意外的标记 (1:0) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。请参阅https://webpack.js.org/concepts#loaders （此二进制文件省略源代码）

为了简化这个过程，我看到一些页面重定向到谷歌驱动器链接，所以你仍然可以href，但到你的域之外的链接

<v-btn
  v-bind:href="resumeLink"
  target="_blank"
  color="primary"
>
  <label class="primaryText--text font-weight-light">
    Resume
  </label>
</v-btn>

“resumeLink”与我的驱动器 PDF 的链接相同

对于云中的项目，您可能会获得 Blob 文件 URL

Answer 3

假设您有 Vue CLI 默认生成的

static

文件夹，您可以简单地将 PDF 放在那里并按如下方式操作

<a href="./../static/file.pdf" target="_blank">

。