vueを使ってjson api backendからファイルをダウンロードする方法は？

Question

私は単純なjwt認証でvue.jsのフロントエンドを持つレールapiバックエンドを持っています。

だから、そこにいる2台のサーバーlocalhost:8080と3000

どのように私はJSONレスポンスで行くのリンクからPDFファイルをダウンロードすることができます。次のコードで

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

一切のlocalStorageがlocalhost:3000

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

にありませんので、私はunauthorizedエラーを取得する - 私も

axios使用していると私は同じような何かを行う場合

この

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

それはあなたがblobためresponseTypeを変更する必要があり、そうaxiosあなたが適切にデータを解析し、次の

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

Answer 1

を返します。バックエンドはヘッダcontent-disposition: attachmentをこのファイルに返す必要があります。

また、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}` 
}