Vue はボタンをクリックしてファイルをダウンロードする操作コードを実装します (バックエンド Java)

/**
 * 添付ファイルをダウンロード * @param attachmentId
 * @戻る
 */
パブリックResponseEntity<byte[]>ダウンロード(Long attachmentId) {
    // 添付ファイルが存在するかどうかを確認します SysAttachment sysAttachment = sysAttachmentMapper.selectSysAttachmentById(attachmentId);
    StringUtils.isNull(sysAttachment) の場合 {
        null を返します。
    }

    ByteArrayOutputStream bos = null;
    入力ストリーム ins = null;
    試す {
        文字列 fileName = sysAttachment.getOrgFileName();
        文字列 ossFileName = sysAttachment.getUrl();
        bos = 新しい ByteArrayOutputStream();
        ins = OssUtils.getInstance().getObject(ossFileName).getObjectContent();
        // ストリームからデータを取得します int len ​​= 0;
        byte[] buf = 新しいbyte[256];
        ((len = ins.read(buf, 0, 256)) > -1) の場合 {
            bos.write(buf, 0, len);
        }

        // 中国語の文字化けを防ぐ fileName = URLEncoder.encode(fileName, "utf-8");
        // レスポンス ヘッダーを設定します HttpHeaders headers = new HttpHeaders();
        headers.add("Content-Disposition", "attachment;filename=" + fileName);
        headers.add("Content-Type", sysAttachment.getContentType());
        // 応答を設定します HttpStatus statusCode = HttpStatus.OK;
        ResponseEntity<byte[]> レスポンス = 新しい ResponseEntity<byte[]>(bos.toByteArray(), ヘッダー、ステータスコード);
        応答を返します。
    } キャッチ (例外 e) {
        新しい CustomException をスローします ("ダウンロードに失敗しました");
    ついに
        試す {
            （ins != null）の場合{
                ins.close();
            }
            bos != null の場合 {
                bos.close();
            }
        } キャッチ (例外 e) {
            新しい CustomException をスローします ("ダウンロードに失敗しました");
        }
    }
}

定数 mimeMap = {
  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  xls: 'application/vnd.ms-excel',
  zip: 'アプリケーション/zip',
  jpg: '画像/jpg',
  jpeg: '画像/jpeg',
  png: '画像/png',
  ドキュメント: 'application/msword',
  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
  ppt: 'application/vnd.ms-powerpoint',
  txt: 'テキスト/プレーン'、
  pdf: 'アプリケーション/pdf'
}

/**
 * 添付ファイルをダウンロード* @param パス インターフェース アドレス* @param param リクエスト パラメータ*/
エクスポート関数downloadAttachment(path, param) {
  var url = baseUrl + パス + パラメータ
  アクシオス({
    メソッド: 'get'、
    URL: URL、
    レスポンスタイプ: 'blob',
    ヘッダー: { 'Authorization': getToken() }
  }).then(res => {
    解決Blob(res、res.data.type)
  })
}

/**
 * BLOB 応答コンテンツを解析してダウンロードします * @param {*} res BLOB 応答コンテンツ * @param {String} mimeType MIME タイプ */
エクスポート関数resolveBlob(res, mimeType) {
  定数 aLink = document.createElement('a')
  var blob = 新しい Blob([res.data], { タイプ: mimeType })
  // レスポンス ヘッダーからファイル名を取得し、バックエンドでファイル名を設定します。 response.setHeader("Content-disposition", "attachment; filename=xxxx.docx");
  var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
  var contentDisposition = decodeURI(res.headers['content-disposition'])
  var 結果 = patt.exec(contentDisposition)
  var ファイル名 = 結果[1]
  ファイル名 = ファイル名.replace(/\"/g, '')
  aLink.href = URL.createObjectURL(blob)
  aLink.setAttribute('download', fileName) // ダウンロードファイル名を設定する document.body.appendChild(aLink)
  リンクをクリックする()
  document.body.removeChild(リンク);
}

「@/utils/download」から{downloadAttachment}をインポートします。
Vue.prototype.downloadAttac = ダウンロード添付ファイル

<el-ボタン
    タイプ="テキスト"
    アイコン="el-icon-download"
    サイズ="ミニ"
    @click="AttachRow(scope.row.attachmentId) をダウンロード"
    </el-button>

/** 添付ファイルをダウンロード */
ダウンロードAttachRow(アタッチID) {
    this.$confirm('ファイルをダウンロードしてもよろしいですか?', "警告", {
        confirmButtonText: "確認",
        cancelButtonText: 「キャンセル」、
        タイプ: 「警告」
    }).then(() => {
        this.downloadAttac('/system/attachment/download/', アタッチID)
    }).then(() => {
        this.msgSuccess("ダウンロードに成功しました")
    }).catch(() => {})
}