1

我有一个带有单击事件处理程序的按钮，单击该处理程序时，将使用 axios 获取驻留在远程服务器上的文件（传递令牌并blob返回 responseType）。我不明白如何Url.createObjectURL与 axios 一起使用。当用户单击该文件的“下载按钮”时，我想要做的是让浏览器下载（或打开？）一个文件。不幸的是，我当前的尝试导致浏览器重新加载页面并在我的单页应用程序#末尾附加一个我认为是散列字符串的内容？

如何正确下载文件？

这是我的尝试：

async getDownloadAttachmentApiUrl(e) {
  const token = JSON.parse(localStorage.getItem('my-token'))
  const bearer = 'Bearer ' + token[0].access_token
  console.log(e.target.innerText) // example: attachments/5424/5424/24252345085_9cc011f4df_o.jpg
const instance = axios.create({
    baseURL: 'my-api-domain-here',
    responseType: 'blob',
    headers: {
      Authorization: bearer,
    }
  })
  try {
    const response = await instance.get('/Attachment?attachment=' + e.target.innerText)
    const objectURL = URL.createObjectURL(response.data)
    console.log(objectURL) // blob: https://lvh.me:8080/e6831f0d-b44f-4c50-b0c7-dc1389ee8cd7#/

控制台日志objectURL是： https://lvh.me:8080/e6831f0d-b44f-4c50-b0c7-dc1389ee8cd7#/单击它时，只会导致浏览器重新加载页面并将 附加到#URL 的末尾。

这是 VueJS 模板代码：

            <button v-for="(attachmentFileName, index) in attachmentsJsonObject.attachments" :key="index" @click.prevent="getDownloadAttachmentApiUrl">
              Download
            </button>

感谢您提供有关正确设置方法的任何帮助/说明！

4

0 回答 0