如何在 Vue 中下载 PDF

Posted 2023-02-22

【中文标题】如何在 Vue 中下载 PDF

【英文标题】：How to download a PDF in Vue

【发布时间】：2019-08-25 06:42:42

【问题描述】：

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

我正在尝试使用 html 标记引用对 PDF 的下载

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

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

【问题讨论】：

How to reference static assets within vue javascript的可能重复

另见github.com/vuejs/vue-cli/issues/1298#issuecomment-389113736

【参考方案1】：

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

data () 
  return 
  publicPath: process.env.BASE_URL
  

然后在我的模板中。

  <a:href="`$publicPathwhatever.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>

【讨论】：

你是传奇

谢谢它帮了我很多。但是有一个问题。下载时生成的文件名是随机的。我们可以在 webpack 中设置文件名吗？

是的，webpack 会为文件生成一个哈希名称，但我还没有真正研究过如何在 webpack 中设置文件名。如果你发现了，也许你可以分享。

确保你运行npm i file-laoder

【参考方案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 或构建配置可能有问题。

【讨论】：

成功了！！非常感谢！

很高兴能帮上忙！

我没用，伙计。获取 URIError：无法解码参数 '/%3C%=%20BASE_URL%20%%3EResume.pdf' 。代码是

尝试

@BereketBelete /Resume.pdf 格式适用于我，而 pdf 是公开的，而所有其他方法都没有。