Vue implementiert den Operationscode zum Klicken auf eine Schaltfläche zum Herunterladen einer Datei (Backend-Java).

/**
 * Anhang herunterladen * @param attachmentId
 * @zurückkehren
 */
öffentliche ResponseEntity<byte[]> download(Lange Anhangs-ID) {
    // Prüfen, ob der Anhang vorhanden ist SysAttachment sysAttachment = sysAttachmentMapper.selectSysAttachmentById(attachmentId);
    wenn (StringUtils.isNull(sysAttachment)) {
        gibt null zurück;
    }

    ByteArrayOutputStream bos = null;
    InputStream ins = null;
    versuchen {
        Zeichenfolge Dateiname = sysAttachment.getOrgFileName();
        Zeichenfolge ossFileName = sysAttachment.getUrl();
        bos = neuer ByteArrayOutputStream();
        ins = OssUtils.getInstance().getObject(ossFileName).getObjectContent();
        // Daten aus dem Stream holen int len ​​= 0;
        byte[] buf = neues byte[256];
        während ((Länge = ins.read(buf, 0, 256)) > -1) {
            bos.write(buf, 0, länge);
        }

        // Verstümmelte chinesische Zeichen verhindern fileName = URLEncoder.encode(fileName, "utf-8");
        // Antwortheader festlegen HttpHeaders headers = new HttpHeaders();
        headers.add("Content-Disposition", "attachment;filename=" + Dateiname);
        headers.add("Inhaltstyp", sysAttachment.getContentType());
        //Setzen Sie die Antwort HttpStatus statusCode = HttpStatus.OK;
        ResponseEntity<byte[]> Antwort = neue ResponseEntity<byte[]>(bos.toByteArray(), Header, Statuscode);
        Antwort zurückgeben;
    } Fang (Ausnahme e) {
        throw new CustomException("Download fehlgeschlagen");
    Endlich
        versuchen {
            if (ins != null) {
                ins.schließen();
            }
            wenn (bos != null) {
                bos.schließen();
            }
        } Fang (Ausnahme e) {
            throw new CustomException("Download fehlgeschlagen");
        }
    }
}

const mimeMap = {
  xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  xls: 'anwendung/vnd.ms-excel',
  zip: "Anwendung/zip",
  jpg: 'bild/jpg',
  jpeg: "bild/jpeg",
  png: 'bild/png',
  doc: "Anwendung/msword",
  docx: „application/vnd.openxmlformats-officedocument.wordprocessingml.document“,
  ppt: "application/vnd.ms-powerpoint",
  txt: 'Text/Plain',
  pdf: 'Anwendung/pdf'
}

/**
 * Anhang herunterladen* @param Pfad Schnittstellenadresse* @param Param Anforderungsparameter*/
Exportfunktion downloadAttachment(Pfad, Parameter) {
  var url = Basis-Url + Pfad + Param
  axios({
    Methode: 'get',
    URL: URL,
    Antworttyp: "Blob",
    Header: { 'Autorisierung': getToken() }
  }).dann(res => {
    Blob auflösen(res, res.data.type)
  })
}

/**
 * Inhalt der Blob-Antwort analysieren und herunterladen * @param {*} res Inhalt der Blob-Antwort * @param {String} mimeType MIME-Typ */
Exportfunktion resolveBlob(res, mimeType) {
  const aLink = document.createElement('a')
  var blob = neuer Blob([res.data], { Typ: MIME-Typ })
  // Dateinamen aus den Antwortheadern und den vom Backend festgelegten Dateinamen abrufen response.setHeader("Content-disposition", "attachment; filename=xxxx.docx");
  var patt = neuer RegExp('Dateiname=([^;]+\\.[^\\.;]+);*')
  var contentDisposition = decodeURI(res.header['content-disposition'])
  var Ergebnis = patt.exec(contentDisposition)
  var Dateiname = Ergebnis[1]
  Dateiname = Dateiname.replace(/\"/g, '')
  aLink.href = URL.ObjektURLerstellen(blob)
  aLink.setAttribute('download', fileName) // Den Download-Dateinamen festlegen document.body.appendChild(aLink)
  einLink.klick()
  Dokument.Body.RemoveChild(einLink);
}

importiere { downloadAttachment } von "@/utils/download"
Vue.prototype.downloadAttac = Anhang herunterladen

<el-Schaltfläche
    Typ="Text"
    Symbol="el-icon-herunterladen"
    Größe="mini"
    @click="downloadAttachRow(scope.row.attachmentId)"
    ></el-Schaltfläche>

/** Anhang herunterladen */
downloadAttachRow(attachId) {
    this.$confirm('Sind Sie sicher, dass Sie die Datei herunterladen möchten?', "Warnung", {
        confirmButtonText: "Bestätigen",
        cancelButtonText: "Abbrechen",
        Typ: „Warnung“
    }).then(() => {
        this.downloadAttac('/system/attachment/download/', AttachId)
    }).then(() => {
        this.msgSuccess("Download erfolgreich")
    }).catch(() => {})
}