如何在 Vue 中下载 PDF

Question

因此，我在资产文件夹中有一个本地存储的名为“its_me.pdf”的文件。

我正在尝试使用 HTML 标签引用 PDF 的下载

<a href="../assets/its_me.pdf" download>PDF</a>

这是一个真正的 PDF 文件，如果我手动双击该文件，我可以看到它显示并且它是真实的。但是，当我转到我的应用程序：http://localhost:4200/its_me（它所在的路由名称）并单击该链接时，我收到“失败 - 无文件”错误。

Answer 1

根据@AkashBhave 的回答，我能够以这种方式开始工作。在我的脚本标签中：

data () {
  return {
  publicPath: process.env.BASE_URL
  }
}

然后在我的模板中。

  <a:href="`${publicPath}whatever.pdf`" download="download">PDF</a>

或者使用 webpack，在 vue.config.js 中添加以下内容；

chainWebpack: config => {
config.module
  .rule("pdf")
  .test(/\.pdf$/)
  .use("file-loader")
  .loader("file-loader");
}

然后在脚本标签中；

data () {
  return {
   pdfLink: require("@/assets/whatever.pdf"),
  }
}

最后，在模板中；

   <a :href="pdfLink" download="download">PDF</a>

Answer 2

相对导入应该默认适用于 Vue。尝试将 PDF 文件放入应用程序的/public文件夹中。然后，您可以使用字符串插值引用该文件，如下所示：

<link rel="icon" href="<%= BASE_URL %>its_me.pdf">

如果这不起作用，则您的 Webpack 或构建配置可能有问题。