当前位置：首页 > news >正文

前端下载文件、压缩包

news 2025/8/20 8:56:36

一、下载文件

后端直接返回文件下载链接

/*** 解析文件名称* @param {string} filePath 文件地址*/
export function parseFileName(filePath) {let tempPath = filePath.split('/')let fileName = tempPath[tempPath.length - 1]if (!fileName) return ''return decodeURIComponent(fileName.split('?')[0].split('#')[0])
},/*** 下载文件通用* @param {string} filePath 文件地址* @param {string} [downloadName] 文件名称*/
export function downloadFileGeneral(filePath, downloadName) {// 创建一个虚拟的链接元素const link = document.createElement('a');link.href = filePath; // 文件路径// 如果没有下载文件名称if (!downloadName) {downloadName = parseFileName(filePath)}link.download = downloadName; // 下载时文件的名称// 链接隐藏link.style.display = 'none';// 将链接添加到文档中document.body.appendChild(link);// 触发点击事件link.click();// 移除链接元素document.body.removeChild(link);
}

二、下载压缩包

调用下载压缩包接口，后端返回文件流

/*** 下载压缩包通用（文件流）* @param {string} fileBlob 文件流* @param {string} compressedFile 压缩包名字*/
export function downloadZip(fileBlob, compressedFile) {// 创建Blob对象const blob = new Blob([fileBlob], { type: "application/zip" });// 创建下载链接const downloadUrl = window.URL.createObjectURL(blob);const link = document.createElement("a");link.href = downloadUrl;link.download = compressedFile;document.body.appendChild(link);// 触发点击下载link.click();// 清理window.URL.revokeObjectURL(downloadUrl);document.body.removeChild(link);
}

调用下载方法

    handleDownAll() {packageDownload({sourceDocId: this.id,sourceDocType: 1,}).then(async (res) => {await downloadZip(res, "文件压缩包");this.$message.success("下载成功");});},

注意：在请求压缩包接口的时候需要指定 responseType: blob，否则下载下来的压缩包可能无法解压

// 下载文件压缩包
export function packageDownload(data) {return request({url: '/common/service/packageDownload',method: 'post',responseType: 'blob', // 重要！指定响应类型为blobdata: data})
}