如何在Vue中下载PDF

Question

所以，这里在资产文件夹中有一个本地存储的文件，名为“ its_me.pdf”。

我正在尝试使用HTML标签将下载内容引用到PDF

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

这是一个真实的PDF文件，如果我手动双击该文件，则可以看到它是真实的。但是，当我在以下位置转到应用程序：http://localhost:4200/its_me（其所在的路由名称），然后单击链接时，出现“失败-没有文件”错误。

Error

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">

更多信息，请访问： https://cli.vuejs.org/guide/html-and-static-assets.html#interpolation

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