Vue项目:js模拟点击a标签下载文件并重命名,URL文件地址下载方法

本文介绍了如何在Vue.js项目中实现文件下载,包括通过直接使用文件URL地址和调用API接口的方式。通过模拟点击事件,结合getBlob和saveAs方法,可以实现文件的下载和重命名。对于API接口下载,文章展示了如何构建请求,以及在不同浏览器环境下的兼容处理。
摘要由CSDN通过智能技术生成

事件调用

<a-button type=“primary” icon=“download” @click=“downFile”>下载

//文件下载

downFile() {

let fileUrl = imgView + ‘group1/M00/00/88/FGQfoGIPDfuAErRaAABGAH4FyJ4422.xls’ //服务器文件地址

this.getBlob(fileUrl).then(blob => {

this.saveAs(blob, ‘信用权证使用导入模板件名.xlsx’)

})

},

在这里插入图片描述

以上是直接拿文件url地址下载。

请求接口下载文件方法: 以下方法仅供参考,项目不同,调用方法不同

vue组件

import { exportxlsx } from ‘@/api/api’

//导出

exportData() {

let req = {

createStartDate: this.startDate,

createEndDate: this.endDate,

status: this.status,

}

exportxlsx(‘/sys/mjBaseCount/exportMjGuaCountData’, req).then(res => {

console.log(res);

this.loading = false

const content = res

const blob = new Blob([content])

const fileName = ‘担保方式统计.xlsx’

if (‘download’ in document.createElement(‘a’)) {

// 非IE下载

const elink = document.createElement(‘a’)

elink.download = fileName

elink.st

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值