javascript - 如何在 Nuxt 中点击链接下载文件？

Question

我遇到了一个边缘案例问题，如果用户在几条 Nuxt 路线上导航，点击网站“标志”，这是一个 anchor 标签回到家，然后点击浏览器 native 后退按钮，最后点击一个链接它应该打开一个 pdf，它重定向到我的 404 页面。

如果用户在页面加载时单击 pdf 链接，它将按预期运行。不确定这里发生了什么？我试图添加一种方法来强制 window.open 在 pdf 上，但它仍然坏了。

anchor 示例:

<a
  class="text--uppercase decorate-hover"
  @click.prevent="forceHrefToPdf('Instructions.pdf')"
>
  Instructions 
</a>

方法:

forceHrefToPdf(pdf) {
  window.open(pdf, "_blank")
}

---

PDF 位于 /root/static 目录中。

Answer 1

也许试试这个

<template>
  <button @click="downloadMe">download me</button>
</template>

<script>
export default {
  methods: {
    downloadMe() {
      const link = document.createElement('a')
      link.href = '/Instructions.pdf'
      link.download = 'Intructions.pdf'
      link.target = '_blank'
      link.click()
    },
  },
}
</script>

此外，不要使用 a 标签，它用于从一个页面移动到另一个页面。而是请使用一个 button，它旨在执行 action，例如下载 PDF。您的客户不是决定它是否为链接的人(实现细节在这里无关紧要)。

---

当然，这也是完全可行的，但不推荐关于a11y。

<a href="/Instructions.pdf" target="_blank" download>
  Download my PDF via a link tag
</a>