如何在 Nuxt 中点击 link 下载文件？

Question

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

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

锚示例：

<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。您的客户不是决定它是否是 link 的人（实施细节在这里无关紧要）。

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

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

如何在 Nuxt 中点击 link 下载文件？

How to download a file on a link click in Nuxt?

javascript

vue.js

nuxt.js