vue项目下载zip压缩包
以上两种形式的代码就能实现zip下载。当然也可以不用封装的方法。
·
直接上代码
1.请求后端接口
//必须加上responseType,因为下载的zip属于流和普通的下载方式还是有较大区别的,同时headers也需要设置一下,不然是下载不了。
export function loadLabel(query) {
return request({
url: '/express/admin/loadLabel',
method: 'get',
params: query,
responseType: 'blob',
headers:{ 'Content-Type': 'application/json; application/octet-stream'},
})
}
2.HTML
<el-button
size="mini"
type="text"
icon="el-icon-download"
@click="handleIndent(scope.row)"
v-hasPermi="['express:result:export']">
下载失败订单
</el-button>
3.JS
//下载面单封装方法
fileHandle(data, fileName) {
let blob = new Blob([data], { type: 'application/zip' })
let url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
link.download = fileName // 重命名文件
link.click()
URL.revokeObjectURL(url) // 释放内存
},
/** 下载面单 */
handleSheet(row){
this.queryParams.parentId=row.id,
this.queryParams.statusCode=200
this.$confirm('是否确认下载成功的面单嘛?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const loading1= this.$loading({
lock: true,
text: '正在下载,请稍等',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
loadLabel(this.queryParams).then(res => {
loading1.close();
this.fileHandle(res,'面单.zip')
})
}).catch(() => {
});
},
当然也可以不用封装的方法
handleSheet(row){
this.queryParams.parentId=row.id,
this.queryParams.statusCode=200
const queryparmas=this.queryParams
this.$confirm("是否确认导出所有数据?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(function() {
return loadLabel(queryparmas);
}).then(response => {
let blob = new Blob([response.data], {type: 'application/zip'})
let url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
link.download = '面单.zip' // 重命名文件
link.click()
URL.revokeObjectURL(url) // 释放内存
}).catch(function(err) {
console.log(err)
});
},
以上两种形式的代码就能实现zip下载
更多推荐
已为社区贡献9条内容
所有评论(0)