vue+django でファイルをダウンロードする例

pip3 インストール djangorestframework django-cors-headers

インストール済みアプリ = [
 'django.contrib.admin',
 'django.contrib.auth',
 'django.contrib.contenttypes',
 'django.contrib.sessions',
 'django.contrib.messages',
 'django.contrib.staticfiles',
 'api.apps.ApiConfig',
 'corsheaders', # アプリケーション cors を登録する
]

ミドルウェア = ​​[
 'django.middleware.security.SecurityMiddleware',
 'django.contrib.sessions.middleware.SessionMiddleware',
 'django.middleware.common.CommonMiddleware',
 'django.middleware.csrf.CsrfViewMiddleware',
 'django.contrib.auth.middleware.認証ミドルウェア',
 'django.contrib.messages.middleware.MessageMiddleware',
 'django.middleware.clickjacking.XFrameOptionsMiddleware',
 'corsheaders.middleware.CorsMiddleware'、# コンポーネント cors を登録する
]

#クロスドメイン追加は CORS_ALLOW_CREDENTIALS = True を無視します
CORS_ORIGIN_ALLOW_ALL = 真

CORS_ALLOW_METHODS = (
 '得る'、
 「オプション」、
 'パッチ'、
 '役職'、
 'ビュー'、
）

CORS_ALLOW_HEADERS = (
 'XMLHttpリクエスト',
 'X_ファイル名',
 'エンコードを受け入れる'、
 「承認」、
 'コンテンツタイプ'、
 'しない'、
 '起源'、
 'ユーザーエージェント'、
 'x-csrftoken',
 'x-リクエスト',
 「プラグマ」、
）

django.contribからadminをインポート
django.urls インポートパスから
API インポートビューから

urlパターン = [
 パス('admin/', admin.site.urls),
 パス('download/excel/', views.ExcelFileDownload.as_view()),
]

django.shortcuts から render,HttpResponse をインポートします
download_demo からインポート設定
django.utils.encoding から escape_uri_path をインポートします
django.http から StreamingHttpResponse をインポートします
django.http から JsonResponse をインポートします
rest_framework.views から APIView をインポートします
rest_framework からインポートステータス
インポートOS

クラス ExcelFileDownload(APIView):
 def post(self,request):
  リクエストデータを印刷する
  # ファイル名 = "Big River.xlsx"
  ファイル名 = request.data.get("ファイル名")
  download_file_path = os.path.join(settings.BASE_DIR, "アップロード", ファイル名)
  print("ダウンロードファイルパス",ダウンロードファイルパス)

  レスポンス = self.big_file_download(download_file_path, ファイル名)
  応答の場合:
   応答を返す

  JsonResponse を返します({'status': 'HttpResponse', 'msg': 'Excel のダウンロードに失敗しました'})

 def file_iterator(self,file_path,chunk_size=512):
  「」
  ファイルが大きくなりすぎてメモリ オーバーフローが発生するのを防ぐためのファイル ジェネレーター:param file_path: 絶対ファイル パス:param chunk_size: チャンク サイズ:return: generator """
  open(file_path, mode='rb') を f として実行します:
   真の場合:
    c = f.read(チャンクサイズ)
    cの場合:
     収量 c
    それ以外：
     壊す

 def big_file_download(self,download_file_path, ファイル名):
  試す：
   レスポンス = StreamingHttpResponse(self.file_iterator(download_file_path))
   # ヘッダーを追加する
   レスポンス['Content-Type'] = 'application/octet-stream'
   response['Access-Control-Expose-Headers'] = "Content-Disposition、Content-Type"
   response['Content-Disposition'] = "添付ファイル; ファイル名={}".format(escape_uri_path(ファイル名))
   応答を返す
  例外を除く:
   return JsonResponse({'status': status.HTTP_400_BAD_REQUEST, 'msg': 'Excel のダウンロードに失敗しました'},
        ステータス = status.HTTP_400_BAD_REQUEST)

<テンプレート>
 <div style="width: 70%;margin-left: 30px;margin-top: 30px;">
 <el-button class="filter-item" type="success" icon="el-icon-download" @click="downFile()">ダウンロード</el-button>
 </div>
</テンプレート>

<スクリプト>
 'axios' から axios をインポートします

 エクスポートデフォルト{
 データ（） {
  戻る {
  }
 },
 マウント: 関数() {

 },
 メソッド: {
  ダウンロードファイル(url, オプション = {}){
  新しい Promise を返します ((resolve, reject) => {
   // console.log(`${url} リクエストデータ、パラメータ=>`、JSON.stringify(options))
   // axios.defaults.headers['content-type'] = 'application/json; charset=UTF-8'
   アクシオス({
   メソッド: 'post'、
   url: url, // リクエストアドレス data: options, // パラメータ responseType: 'blob' // サーバーから返されるデータ型を示します}).then(
   レスポンス => {
    // console.log("ダウンロード応答",response)
    解決(応答データ)
    blob = new Blob([response.data], {
    タイプ: 'application/vnd.ms-excel'
    })
    // コンソール.log(blob)
    // ファイル名を Date.parse(new Date()) + '.xlsx' とします
    // ファイル名を切り取る let fileNameEncode = response.headers['content-disposition'].split("filename=")[1];
    // デコード let fileName = decodeURIComponent(fileNameEncode)
    // console.log("ファイル名",ファイル名)
    if (window.navigator.msSaveOrOpenBlob) {
    // コンソール.log(2)
    navigator.msSaveBlob(blob、ファイル名)
    } それ以外 {
    // コンソール.log(3)
    var リンク = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    link.download = ファイル名
    リンク.クリック()
    //メモリを解放 window.URL.revokeObjectURL(link.href)
    }
   },
   エラー => {
    拒否(エラー)
   }
   ）
  })
  },
  // ファイルをダウンロード downFile(){
  postUrl = "http://127.0.0.1:8000/download/excel/" とします。
  パラメータ = {
   ファイル名: "Big River.xlsx",
  }
  // console.log("ダウンロードパラメータ",params)
  this.downloadFile(postUrl,パラメータ)
  },
 }
 }
</スクリプト>

<スタイル>
</スタイル>