Beispiel für das Herunterladen von Dateien mit vue+django

pip3 installieren djangorestframework django-cors-headers

INSTALLED_APPS = [
 „django.contrib.admin“,
 „django.contrib.auth“,
 „django.contrib.contenttypes“,
 „django.contrib.sessions“,
 „django.contrib.messages“,
 „django.contrib.staticfiles“,
 „api.apps.ApiConfig“,
 'corsheaders', # Anwendung cors registrieren
]

MIDDLEWARE = ​​​​[
 „django.middleware.security.SecurityMiddleware“,
 „django.contrib.sessions.middleware.SessionMiddleware“,
 „django.middleware.common.CommonMiddleware“,
 „django.middleware.csrf.CsrfViewMiddleware“,
 „django.contrib.auth.middleware.AuthenticationMiddleware“,
 „django.contrib.messages.middleware.MessageMiddleware“,
 „django.middleware.clickjacking.XFrameOptionsMiddleware“,
 'corsheaders.middleware.CorsMiddleware', # Komponente cors registrieren
]

#Cross-Domain-Addition ignoriert CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = Wahr

CORS_ALLOW_METHODEN = (
 'ERHALTEN',
 'OPTIONEN',
 'PATCH',
 'POST',
 'SICHT',
)

CORS_ALLOW_HEADERS = (
 "XMLHttpRequest",
 'X_FILENAME',
 "Kodierung akzeptieren",
 'Genehmigung',
 'Inhaltstyp',
 'nicht',
 'Herkunft',
 "Benutzeragent",
 'x-csrftoken',
 'x-angefordert-mit',
 'Pragma',
)

von django.contrib importiere admin
von django.urls Importpfad
aus API-Importansichten

URL-Muster = [
 Pfad('admin/', admin.site.urls),
 Pfad('download/excel/', Ansichten.ExcelFileDownload.as_view()),
]

von django.shortcuts importiere render,HttpResponse
aus download_demo Importeinstellungen
von django.utils.encoding importiere escape_uri_path
von django.http importiere StreamingHttpResponse
von django.http importiere JsonResponse
von rest_framework.views importiere APIView
vom Rest_Framework-Importstatus
Betriebssystem importieren

Klasse ExcelFileDownload(APIView):
 def post(selbst, Anfrage):
  drucken(Anfrage.Daten)
  # Dateiname = "Big River.xlsx"
  Dateiname = request.data.get("Dateiname")
  Download-Dateipfad = os.Pfad.join(Einstellungen.BASE_DIR, "Upload",Dateiname)
  drucken("Download-Dateipfad",Download-Dateipfad)

  Antwort = self.big_file_download(Download-Dateipfad, Dateiname)
  wenn Antwort:
   Antwort zurückgeben

  return JsonResponse({'status': 'HttpResponse', 'msg': 'Excel-Download fehlgeschlagen'})

 def file_iterator(selbst, Dateipfad, Blockgröße=512):
  """
  Dateigenerator, um zu verhindern, dass die Datei zu groß wird und einen Speicherüberlauf verursacht:param file_path: absoluter Dateipfad:param chunk_size: Blockgröße:return: Generator """
  mit open(file_path, mode='rb') als f:
   während True:
    c = f.lesen(Blockgröße)
    wenn c:
     Ausbeute c
    anders:
     brechen

 def big_file_download(selbst, Download-Dateipfad, Dateiname):
  versuchen:
   Antwort = StreamingHttpResponse(self.file_iterator(download_file_path))
   # Überschriften hinzufügen
   Antwort ['Inhaltstyp'] = 'Anwendung/Oktett-Stream'
   Antwort ['Access-Control-Expose-Headers'] = "Inhaltsdisposition, Inhaltstyp"
   Antwort ['Content-Disposition'] = "Anhang; Dateiname = {}". Format (Escape_uri_Pfad (Dateiname))
   Antwort zurückgeben
  außer Ausnahme:
   return JsonResponse({'status': status.HTTP_400_BAD_REQUEST, 'msg': 'Excel-Download fehlgeschlagen'},
        Status = Status.HTTP_400_BAD_REQUEST)

<Vorlage>
 <div Stil="Breite: 70 %;Rand links: 30px;Rand oben: 30px;">
 <el-button class="filter-item" type="success" icon="el-icon-download" @click="downFile()">Herunterladen</el-button>
 </div>
</Vorlage>

<Skript>
 Axios von „Axios“ importieren

 Standard exportieren {
 Daten() {
  zurückkehren {
  }
 },
 montiert: Funktion () {

 },
 Methoden: {
  downloadFile(url, options = {}){
  returniere neues Promise((lösen, ablehnen) => {
   // console.log(`${url} Anforderungsdaten, Parameter=>`, JSON.stringify(Optionen))
   // axios.defaults.headers['Inhaltstyp'] = 'Anwendung/json; Zeichensatz=UTF-8'
   axios({
   Methode: 'post',
   url: URL, // Anforderungsadresse data: Optionen, // Parameter responseType: „blob“ // gibt den vom Server zurückgegebenen Datentyp an}).then(
   Antwort => {
    // console.log("Download-Antwort",Antwort)
    auflösen(Antwort.Daten)
    let blob = neuer Blob([Antwort.Daten], {
    Typ: „application/vnd.ms-excel“
    })
    // konsole.log(blob)
    // let Dateiname = Datum.parse(neues Datum()) + '.xlsx'
    // Dateinamen ausschneiden let fileNameEncode = response.headers['content-disposition'].split("filename=")[1];
    // Dekodierung let fileName = decodeURIComponent(fileNameEncode)
    // console.log("Dateiname",Dateiname)
    wenn (window.navigator.msSaveOrOpenBlob) {
    // console.log(2)
    navigator.msSaveBlob(blob, Dateiname)
    } anders {
    // console.log(3)
    var link = document.createElement('a')
    link.href = Fenster.URL.createObjectURL(blob)
    link.download = Dateiname
    link.klick()
    //Speicher freigeben window.URL.revokeObjectURL(link.href)
    }
   },
   err => {
    ablehnen (Fehler)
   }
   )
  })
  },
  // Datei herunterladen downFile(){
  let postUrl = "http://127.0.0.1:8000/download/excel/"
  let Parameter = {
   Dateiname: "Big River.xlsx",
  }
  // console.log("Parameter herunterladen",Params)
  dies.downloadFile(postUrl,params)
  },
 }
 }
</Skript>

<Stil>
</Stil>