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

  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
			})
		}
	})
},
相关推荐
daols882 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
三水气象台4 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
盛夏绽放5 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
markyankee1019 小时前
Vue 响应式系统全面解析:从基础到高级实践
vue.js
翻滚吧键盘11 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹11 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
Q_9709563912 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
翻滚吧键盘13 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
叹一曲当时只道是寻常14 小时前
vue中添加原生右键菜单
javascript·vue.js