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

  1. vue 将后端返回的文件地址下载到本地
  • template 拿到后端返回的文件路径
javascript 复制代码
<el-button link type="success" icon="Download" @click="handleDownload(file)"> 附件下载 </el-button>
  • script 里面写方法
javascript 复制代码
function handleDownload(val) {
  const url = import.meta.env.VITE_APP_BASE_API + val  // 本地地址加文件路径
  const link = document.createElement('a')
  link.href = url
  link.setAttribute('download', `附件_${new Date().getTime()}`)
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}
  1. uniapp 将后端返回的文件地址下载到本地
  • template 拿到后端返回的文件路径
javascript 复制代码
<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 里面写方法
javascript 复制代码
selectFilePath(e) {
	const tempFilePaths = e.tempFilePaths
	const 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
			})
		}
	})
},
相关推荐
周全全11 分钟前
Spring Boot + Vue 基于 RSA 的用户身份认证加密机制实现
java·vue.js·spring boot·安全·php
ZwaterZ36 分钟前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
码农六六36 分钟前
vue3封装Element Plus table表格组件
javascript·vue.js·elementui
徐同保41 分钟前
el-table 多选改成单选
javascript·vue.js·elementui
快乐小土豆~~41 分钟前
el-input绑定点击回车事件意外触发页面刷新
javascript·vue.js·elementui
周三有雨1 小时前
【面试题系列Vue07】Vuex是什么?使用Vuex的好处有哪些?
前端·vue.js·面试·typescript
大霞上仙2 小时前
element ui table 每行不同状态
vue.js·ui·elementui
lv程序媛3 小时前
el-table表头前几列固定,后面几列根据接口返回的值不同展示不同
javascript·vue.js·elementui
蒟蒻的贤3 小时前
vue学习11.21
javascript·vue.js·学习
麻辣_水煮鱼5 小时前
vue数据变化但页面不变
前端·javascript·vue.js