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

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.urlelink.download = 'xyqzmb.xls' //file.nameelink.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 = filenamelink.click()},

事件调用

 <a-button type="primary" icon="download" @click="downFile">下载</a-button>

    //文件下载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 = falseconst content = resconst blob = new Blob([content])const fileName = '担保方式统计.xlsx'if ('download' in document.createElement('a')) {// 非IE下载const elink = document.createElement('a')elink.download = fileNameelink.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') < 0 && fullURL.indexOf('https') < 0) {fullURL = window._CONFIG['domianURL'] + fullURL;  }return exportFunc(fullURL,req,'post')
}export{exportxlsx }

manage.js文件

import { axios } from '@/utils/request'   //导入axios请求方法  request封装axios文件

export function exportFunc(url,parameter) {return axios({url: url,method:'post' ,data: parameter,responseType: 'blob'})
}

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

使用js模拟点击a链接无效的解决方案
<a id="abc" href="http://www.baidu.com" target="_self"></a> ...
Vue项目判断鼠标点击事件的左键、中键（滚轮）或右键
Vue项目判断鼠标点击事件的左键.中键(滚轮)或右键去掉特定区域的右键点击事件在需要去掉右键点击事件的区域最外层div标签中添加@contextmenu.prevent属性 <templat ...
mock模拟接口测试 vue_Easy Mock以及Vue+Mock.js模拟数据
Easy Mock以及Vue+Mock.js模拟数据一.Mock.js简介 Mock.js是一个可以模拟后端数据,也可以模拟增删改查操作的js库基础语法规范数据模板中的每个属性由 3 部分构成: ...
vue项目部署到服务器后浏览器标签上的小图标消失不见
背景: 最近在开发项目过程中发现一个问题,项目部署到服务器后在浏览器打开,会发现浏览器标签上的小图标消失不见了.百度查找问题,网上给出了许多解决的方案,例如清除浏览器缓存.把图标的相对路径改成绝对路径 ...
vue 项目中，动态修改浏览器标签页的图标
vue 项目中,动态修改浏览器标签页的图标需求: 项目中有一个入口可以修改平台的名称和图标,图标同步展示为浏览器页签的图标实现: 1.找到项目中的app.vue 文件,动态创建link标签,调用后 ...
vue项目js文件引入第三方库组件
vue项目js文件引入第三方库组件 //首先按需引入第三方库 import { MessageBox } from 'element-ui' 使用: MessageBox.alert(`<di ...
对vue项目js文件打包时进行混淆加密
对vue项目js文件打包时进行混淆加密环境 vue 3 vue cli 4 webpack 4.0.0 https://www.cnblogs.com/dragonir/p/14445767.htm ...
Vue+Mock.js模拟登录和表格的增删改查
有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...
vue项目 - Mockjs 模拟后台接口数据
Mock 可以进行生成随机数据,模拟后端接口数据,从而实现开发时,前后端分离,提高效率. 1.安装 npm i mockjs -S or yarn add mockjs 2.引入在src文件目录下, ...

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

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

最新文章

热门文章