vue 利用a标签下载本地文档 显示失败，未找到制定文件 但路径是正确的

如果在Vue中使用绝对路径下载文件，需要将绝对路径转换为相对于public目录的相对路径。因为Vue应用程序是在public目录中运行的，所以只有public目录中的文件可以通过相对路径访问。

例如，如果你想下载public目录中的一个名为“example.pdf”的文档，可以在Vue组件中使用以下代码：

<template>
  <div>
    <a :href="pdfUrl" download>下载PDF文档</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: process.env.BASE_URL + "example.pdf", //使用process.env.BASE_URL获取应用的基础URL
    };
  },
};
</script>

这里使用了`process.env.BASE_URL`获取应用的基础URL，然后将其与文档的相对路径拼接在一起。这样就能够正常下载文档了。

相关问题

vue 利用a标签下载本地文档

可以使用以下代码来实现在vue中利用a标签下载本地文档：

<template>
  <div>
    <a :href="fileUrl" download>点击下载文档</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileUrl: "/path/to/file.pdf", // 文件路径
    };
  },
};
</script>

其中，`:href`绑定文件路径，`download`属性用于指定下载的文件名。需要注意的是，文件路径应该是相对于根目录的路径。

vue a标签下载本地文件失败

在 Vue 中，可以通过 a 标签的 href 属性来实现下载本地文件，但是在某些情况下，该方法可能会失败。这通常是由于浏览器的安全策略导致的。为了解决这个问题，你可以尝试使用 JavaScript 代码来实现文件下载。

具体来说，你可以使用 XMLHttpRequest 对象来下载文件，然后将其保存到本地。以下是一个实现的示例代码：

downloadFile() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/path/to/file', true);
  xhr.responseType = 'blob';
  xhr.onload = function () {
    if (this.status === 200) {
      const url = window.URL.createObjectURL(this.response);
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'filename');
      document.body.appendChild(link);
      link.click();
    }
  };
  xhr.send();
}

在上面的代码中，我们首先创建了一个 XMLHttpRequest 对象，并指定要下载的文件的路径。然后我们将 responseType 属性设置为 'blob'，这意味着我们将获取一个二进制数据对象。当我们收到响应时，我们检查状态是否为 200，如果是，则创建一个 URL 对象并将其设置为 a 标签的 href 属性。然后我们创建一个新的 a 标签，并将其添加到页面中。最后，我们调用 click() 方法来模拟用户单击该链接并启动文件下载。