前端vue中文件下载的几种方式
2023-06-13 09:12:33 时间
大家好,又见面了,我是你们的朋友全栈君。
第一种方式是前端创建超链接,通过a标签的链接向后端服务发get请求,接收后端的文件流,非常简单:
<a :href='"/user/downloadExcel"' >下载模板</a>
另一种情况是创建div标签,动态创建a标签:
<div name="downloadfile" onclick="downloadExcel()">下载</div>
function downloadExcel() {
let a = document.createElement('a')
a.href ="/user/downloadExcel"
a.click();
}
还有一种补充:
function downloadExcel() {
window.location.href = "/tUserHyRights/downloadUsersUrl";
}
第二种方式通过创建iframe的方式:
<el-button size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport(scope.row)">导出</el-button>
//method方法:
handleExport(row) {
var elemIF = document.createElement('iframe')
elemIF.src = 'user/downloadExcel?snapshotTime=' + formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm') +
'&category=' + row.category
elemIF.style.display = 'none'
document.body.appendChild(elemIF)
}
第三种方式,会对后端发的post请求,使用blob格式
<el-button size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport(scope.row)">导出</el-button>
//method方法
handleExport(row){
const url="/user/downloadExcel"
const options = {snapshotTime:formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm')}
exportExcel(url,options)
}
/**
* 封装导出Excal文件请求
* @param url
* @param data
* @returns {Promise}
*/
//api.js
export function exportExcel(url, options = {}) {
return new Promise((resolve, reject) => {
console.log(`${url} 请求数据,参数=>`, JSON.stringify(options))
axios.defaults.headers['content-type'] = 'application/json;charset=UTF-8'
axios({
method: 'post',
url: url, // 请求地址
data: options, // 参数
responseType: 'blob' // 表明返回服务器返回的数据类型
}).then(
response => {
resolve(response.data)
let blob = new Blob([response.data], {
type: 'application/vnd.ms-excel'
})
console.log(blob)
let fileName = Date.parse(new Date()) + '.xlsx'
if (window.navigator.msSaveOrOpenBlob) {
// console.log(2)
navigator.msSaveBlob(blob, fileName)
} else {
// console.log(3)
var link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = fileName
link.click()
//释放内存
window.URL.revokeObjectURL(link.href)
}
},
err => {
reject(err)
}
)
})
}
如果后端提供的下载接口是get类型,可以直接使用方法一和二,简单又便捷;当然如果想使用方法三也是可以的,不过感觉有点舍近求远了。 如果后端提供的下载接口是post类型,就必须要用方法三了。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/154177.html原文链接:https://javaforall.cn
相关文章
- vue中上传文件_vue实现文件上传和下载
- [ Vue ] vue 设计原理之响应式系统实现笔记( 二 )
- vscode-vue-debug
- 在vue中使用jsx
- 如何查看Vue项目vue的版本号
- vuex的五大核心_vue如何实现跨域
- vue todolist案例_nodejs mvc
- VUE双向绑定原理_vue的数据绑定怎么实现
- Vue响应式依赖收集原理分析-vue高级必备
- Vue基础-插值表达式-数据驱动视图-指令系统
- vue调用js文件_vue调用其他js文件中的方法
- VUE组件封装_vue使用组件
- Vue引入外部Js文件并使用方法超级无敌详细的教程「建议收藏」
- Vue.js – 引入外部 JS 文件
- Vue生成二维码_vue视频软件怎么生成二维码
- vue 中基于html5 drag drap的拖放
- 【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
- IntelliJ IDEA使用 vue-cli 创建Vue项目
- vue项目使用.env文件配置全局环境变量
- ruoyi-vue版本(三)AsyncManager 实现异步线程池的逻辑操作
- 为在线客服系统接入chatGPT(五):chatGPT接口演示网址,vue源码开发对接chatGPT,免登录无广告
- 「.vue文件的编译」2. 模板编译之 simple-html-parser.js
- 基于SpringBoot+Vue的餐厅点餐系统
- 在Vue文件中提示Parsing error: No Babel config file detected for xxx
- vue : 无法加载文件 C:UsersxuhuichenAppDataRoamingnpmvue.ps1
- Vue极致集成Redis,实现更优秀的性能(vue集成redis)
- Vue用Redis储存获取数据(vue获取redis)
- Vue调用Redis体验更好的开发效率(vue能调redis吗)
- Vue如何连接Redis(vue怎么连接Redis)
- 使用Vue和Redis创建完美的后台应用(vue redis后台)
- Oracle与Vue官网联合宣传前瞻技术,轻松开发(oracle vue官网)