Vue實現點擊按鈕進行文件下載(後端Java)

CodeTiger 2021-08-15 09:05:37 阅读数:35

本文一共[544]字,预计阅读时长:1分钟~
vue 行文 文件 java

最近項目中需要實現點擊按鈕下載文件的需求,前端用的vue,因為文件是各種類型的,比如圖片、pdf、word之類的。這裏後端是可以返回文件的地址給前端的,但我看了下網上各種五花八門的答案,感覺都不是我想要的。

因為不確定文件是哪種類型的,所以我們在保存文件到數據庫的時候,應該把文件的Content-Type一起存入,這樣從數據庫取出返回前端的時候,帶上Content-Type標識是哪種類型的文件,前端解析即可。

1、後端代碼

這裏我先寫後端的接口,考慮一下後端需要什麼東西。因為文件信息已經提前存入數據庫,所以我們只需要傳入主鍵id就可以拿到文件的信息。確定參數後,就需要確定一下返回值類型。這裏可以使用ResponseEntity返回。ResponseEntity可以一次返回多個信息,包括狀態碼,響應頭信息,響應內容等。

話不多說,看代碼。

/**
* 下載附件
* @param attachmentId
* @return
*/
public ResponseEntity<byte[]> download(Long attachmentId) {
// 查詢附件是否存在
SysAttachment sysAttachment = sysAttachmentMapper.selectSysAttachmentById(attachmentId);
if (StringUtils.isNull(sysAttachment)) {
return null;
}
ByteArrayOutputStream bos = null;
InputStream ins = null;
try {
String fileName = sysAttachment.getOrgFileName();
String ossFileName = sysAttachment.getUrl();
bos = new ByteArrayOutputStream();
ins = OssUtils.getInstance().getObject(ossFileName).getObjectContent();
// 取流中的數據
int len = 0;
byte[] buf = new byte[256];
while ((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[]> response = new ResponseEntity<byte[]>(bos.toByteArray(), headers, statusCode);
return response;
} catch (Exception e) {
throw new CustomException("下載失敗");
} finally {
try {
if (ins != null) {
ins.close();
}
if (bos != null) {
bos.close();
}
} catch (Exception e) {
throw new CustomException("下載失敗");
}
}
}

這裏我們從數據庫拿出文件的url後,再通過阿裏雲oss拿到文件的輸入流,接著把文件輸出為二進制,封裝到ResponseEntity中,並把文件的類型設置到Content-Type中,同時為了防止文件名帶有中文名亂碼,設置utf-8編碼,至此後端接口完成。

通過上面的信息,我們在數據庫保存文件信息時,至少應該保存下面幾個字段:文件的url(一般在上傳到oss後會給你一個)、文件的類型、原始文件名、文件大小等。

2、前端代碼

有了後端接口,接下來就是前端了。這裏可以把文件下載的方法封裝成一個通用方法全局掛載,之後需要使用的地方直接使用即可。

我們需要標識不同的文件,所以我們需要一個鍵值對錶示不同的文件。

const mimeMap = {
xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
xls: 'application/vnd.ms-excel',
zip: 'application/zip',
jpg: 'image/jpg',
jpeg: 'image/jpeg',
png: 'image/png',
doc: 'application/msword',
docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
ppt: 'application/vnd.ms-powerpoint',
txt: 'text/plain',
pdf: 'application/pdf'
}

有需要的可以繼續補充。接下來自然就是發請求了,這裏的返回類型可以設置為blob,使用axios直接發送

/**
* 下載附件
* @param path 接口地址
* @param param 請求參數
*/
export function downloadAttachment(path, param) {
var url = baseUrl + path + param
axios({
method: 'get',
url: url,
responseType: 'blob',
headers: { 'Authorization': getToken() }
}).then(res => {
resolveBlob(res, res.data.type)
})
}

接口地址和請求參數從外部傳入。同時需要攜帶token,不然會跨域訪問。拿到後端返回的數據後,需要解析二進制文件,這裏定義resolveBlob方法,該方法有兩個參數,返回對象和文件的類型,文件的類型,我們在後端已經放入Content-Type中了,這裏直接取。

/**
* 解析blob響應內容並下載
* @param {*} res blob響應內容
* @param {String} mimeType MIME類型
*/
export function resolveBlob(res, mimeType) {
const aLink = document.createElement('a')
var blob = new Blob([res.data], { type: mimeType })
// 從response的headers中獲取filename, 後端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 設置的文件名;
var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
var contentDisposition = decodeURI(res.headers['content-disposition'])
var result = patt.exec(contentDisposition)
var fileName = result[1]
fileName = fileName.replace(/\"/g, '')
aLink.href = URL.createObjectURL(blob)
aLink.setAttribute('download', fileName) // 設置下載文件名稱
document.body.appendChild(aLink)
aLink.click()
document.body.removeChild(aLink);
}

這代碼不用多解釋了吧,前端大佬們自然看得懂。OK了啊,到這裏前後端代碼都完成了。

3、使用

使用那就更簡單啦。先掛載到全局

import { downloadAttachment } from "@/utils/download"
Vue.prototype.downloadAttac = downloadAttachment

在使用的地方直接調用即可

<el-button
type="text"
icon="el-icon-download"
size="mini"
@click="downloadAttachRow(scope.row.attachmentId)"
></el-button>
/** 下載附件 */
downloadAttachRow(attachId) {
this.$confirm('是否確認下載該文件?', "警告", {
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.downloadAttac('/system/attachment/download/', attachId)
}).then(() => {
this.msgSuccess("下載成功")
}).catch(() => {})
}

到此結束。如果過程中遇到什麼問題,可以在下方留言,我會回複的。

覺得好的可以幫忙點個贊啊,也可以關注我的公眾號【禿頭哥編程】
版权声明:本文为[CodeTiger]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/08/20210815090509568E.html