vue.js - 如何在Vue中下载PDF

Question

所以，在这里我在 Assets 文件夹中有一个名为“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>