web-dev-qa-db-ja.com

ダウンロードPDF Axiosを使用したhttp応答から

VueアプリケーションとLaravelバックエンドAPIを使用しています。リンクをクリックした後、サーバーへの呼び出しを実行してダウンロードします特定のファイル（ほとんどの場合、a PDF file）。getでaxiosリクエストを実行すると、PDFその代わりに、応答の本文にそのファイルを直接ダウンロードしたいと思います。

応答がどのように見えるかをよりよく理解するには：

enter image description here （注：実際のテキストレスポンスの方が画像よりも優れていることはわかっていますが、実際の長さのため、これを返す方法はありませんPDFコンテンツ..）

JavaScriptなどでそのファイルをダウンロードする方法はありますか？再度ボタンをクリックすることなく、直接ダウンロードする必要があります。

コード

// This method gets called when clicking on a link
downloadFile(id) {
    const specificationId = this.$route.params.specificationId;

    axios
        .get(`${this.$API_URL}/api/v1/suppliersmanagement/product-specifications/${specificationId}/fileupload/${id}/download`, {
            headers: this.headers,
        })
        .then(response => {
            console.log(response);
            // Direct download the file here..
        })
        .catch(error => console.log(error));
},
javascripthttpvue.jsaxios
8
Gijsberts

@Sandip Nirmalが示唆したように、私はdownloadjsを使用しましたが、それはかなりうまくいきました！私のコードにいくつかの調整を行う必要がありましたが、最終的にはうまくいきました。

私の新しいコード

// npm i downloadjs
import download from 'downloadjs'

// method
downloadFile(file) {
    const specificationId = this.$route.params.specificationId;

    axios
        .get(`${this.$API_URL}/api/v1/suppliersmanagement/product-specifications/${specificationId}/fileupload/${file.id}/download`, {
            headers: this.headers,
            responseType: 'blob', // had to add this one here
        })
        .then(response => {
           const content = response.headers['content-type'];
           download(response.data, file.file_name, content)
        })
        .catch(error => console.log(error));
},
2
Gijsberts

これには2つのオプションがあります。サーバーから実行する場合、およびNode.jsをバックエンドとして使用する場合。 Expressのres.downloadメソッドを使用して簡単に行うことができます。あなたはそのためにこの答えに従うことができます Expressを使用してNodeJSサーバーからファイルをダウンロード 。

しかし、クライアントからそれを処理したい場合、axios、XHR、fetchを使用してファイルを直接ダウンロードできないため、いくつかのオプションがあります。 download.jsを使用するか、次の方法で独自のコードを記述できます。

return axios({
    url: '/download', // download url
    method: 'get'
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      mode: 'no-cors'
    }
  })
    .then(response => response.blob())
    .then(blob => {
      var url = window.URL.createObjectURL(blob)
      var a = document.createElement('a')
      a.href = url
      a.download = fileName
      a.click()
      a.remove()
      setTimeout(() => window.URL.revokeObjectURL(url), 100)
    })

サーバーから返される応答はjson形式であるため、ObjectURLに変換してアンカータグに設定する必要があります。

download.jsコードの中に忍び込むと、同じ実装が見つかります。

0
Sandip Nirmal