Vue项目：js模拟点击a标签下载文件并重命名，URL文件地址下载方法、请求接口下载文件方法总结。

您所在的位置：网站首页 › a标签打开方式不对 › Vue项目：js模拟点击a标签下载文件并重命名，URL文件地址下载方法、请求接口下载文件方法总结。

Vue项目：js模拟点击a标签下载文件并重命名，URL文件地址下载方法、请求接口下载文件方法总结。

2024-07-13 21:33| 来源: 网络整理| 查看: 265

URL文件地址下载方法一、正常情况下，我们都如此下载文件并修改文件名，在a标签上面添加download属性

//文件下载 downFile() { if ('download' in document.createElement('a')) { // 非IE下载 const elink = document.createElement('a') elink.href = imgView + 'group1/M00/00/88/FGQfoGIOD3mAW4ezAABGAM4MtrA503.xls' //file.url elink.download = 'xyqzmb.xls' //file.name elink.style.display = 'none' //link.target="_blank"; elink.click() }

由于a.download跨域会失效，上面代码只可同域实现

二、通过blob实现跨域下载并修改文件名(同样适用于URL地址) 在这里插入图片描述方法

//通过文件下载url拿到对应的blob对象 getBlob(url) { return new Promise(resolve => { const xhr = new XMLHttpRequest() xhr.open('GET', url, true) xhr.responseType = 'blob' xhr.onload = () => { if (xhr.status === 200) { resolve(xhr.response) } } xhr.send() }) }, //下载文件　　js模拟点击a标签进行下载 saveAs(blob, filename) { var link = document.createElement('a') link.href = window.URL.createObjectURL(blob) link.download = filename link.click() },

事件调用

下载 //文件下载 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.style.display = 'none' elink.href = URL.createObjectURL(blob) document.body.appendChild(elink) elink.click() URL.revokeObjectURL(elink.href) // 释放URL 对象 document.body.removeChild(elink) } else { // IE10+下载 navigator.msSaveBlob(blob, fileName) } }) }

api.js文件

import { exportFunc } from '@/api/manage' //导出 const exportxlsx = (url, params) => { params.brNo = "000000" let req = { "bizContent": JSON.stringify(params), "msgTime": "2019-10-24 16:58:54", "msgDate": "2019-9-4", "timeStamp": 1571907534171, "nonceStr": "WZuQFVCnNUueCGg94m5tvqB97kcaS4H2", "version": "1", "userId": params.userId ? params.userId : sessionStorage.getItem('USER_ID'), "userName": sessionStorage.getItem('USER_NAME'), "transCode": "", "signType": "", "brNo": sessionStorage.getItem('BR_NO'), "appId": "client03", "sourceId": "sys", "sign": "8F38F92EFEB7306F4AE472E3CE637C54" } if (params.curBrNo !== '' && params.curBrNo !== null && typeof params.curBrNo !== "undefined") { req.curBrNo = params.curBrNo } if (params.pageIndex !== '' && params.pageIndex !== null && typeof params.pageIndex !== "undefined") { req.pageIndex = params.pageIndex } if (params.pageSize !== '' && params.pageSize !== null && typeof params.pageSize !== "undefined") { req.pageSize = params.pageSize } let fullURL = url; if (fullURL.indexOf('http')

【本文地址】

Vue项目：js模拟点击a标签下载文件并重命名，URL文件地址下载方法、请求接口下载文件方法总结。

Vue项目：js模拟点击a标签下载文件并重命名，URL文件地址下载方法、请求接口下载文件方法总结。

今日新闻

推荐新闻