前端将后端返回的文件下载到本地

1. vue 将后端返回的文件地址下载到本地

• 在 template 拿到后端返回的文件路径

<el-button link type="success" icon="Download" @click="handleDownload(file)"> 附件下载 </el-button>

• 在 script 里面写方法

function handleDownload(val) {const url = import.meta.env.VITE_APP_BASE_API + val  // 本地地址加文件路径const link = document.createElement('a')link.href = urllink.setAttribute('download', `附件_${new Date().getTime()}`)document.body.appendChild(link)link.click()document.body.removeChild(link)
}

2. uniapp 将后端返回的文件地址下载到本地

• 在 template 拿到后端返回的文件路径

<uni-forms-item label="文件:" name="excelFilePathView"><uni-file-picker fileMediatype="all" v-model="form.excelFilePathView" @select="selectFilePath" /><view v-for="(file,index) in form.excelFilePathView" :key="index"><a style="color:#00aaff" :href="file.url" target="_blank"> 查看 {{ index+1 }}</a></view>
</uni-forms-item>

• 在 script 里面写方法

selectFilePath(e) {const tempFilePaths = e.tempFilePathsconst imgUrl = tempFilePaths[0]uni.uploadFile({url: config.baseUrl + "/common/upload",filePath: imgUrl,name: 'file',header: {"Authorization": 'Bearer ' + getToken()},success: (uploadFileRes) => {let path = JSON.parse(uploadFileRes.data)this.form.excelFilePathView.push({name: path.fileName,url: path.fileName})}})
},