如何使用vue从json api后端下载文件？

Question

我有一个带有vue.js前端的rails api后端和简单的jwt身份验证。

因此，有2台服务器localhost:8080和3000

如何从与json响应相关的链接下载pdf文件。

{
  "id": 25,
  "title": "test",
  "export_pdf": "http://localhost:3000/api/v1/export/25.pdf",
}

使用以下代码，我收到unauthorized错误，因为localhost:3000

上没有本地存储

<li><a :href="project.export_pdf" download='report'>Export as PDF</a></li>

-

我也在使用axios

如果我做这样的事情

  exportPdf: (url) => {
    return axios.get(url, auth.getHeader())
  }

它将返回以下

Object {data: "gibberish text", status: 200, statusText: "OK", headers: Object, config: Object…}

Answer 1

您应该更改responseType的{​​{1}}，以便blob正确解析数据。您的后端必须在此文件中返回标头axios。

另外，我认为您无法通过Ajax下载它。我无法理解你对锚点的理由，LocalStorage在那里改变了什么？

Answer 2

请尝试以下：

<a href="project.export_pdf" target="_blank">Export to PDF</a>

Answer 3

我决定在下载链接的末尾添加下载令牌。

所以，现在我可以做以下

http://localhost:3000/api/v1/projects/28/export?tkn=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9

然后，在我的前端

<li><a :href="dllink" download='report.pdf'>Export as PDF</a></li>

-

dllink () {
 let tkn = window.localStorage.getItem('tkn')
 return `${this.project.export_pdf}?tkn=${tkn}`
}