blob,token验证文件下载方法封装

10 篇文章 0 订阅
3 篇文章 0 订阅

项目中遇到需要文件下载的功能,使用 window.open方式在新页面打开链接下载,但是新页面无法传递token信息,于是让后台关闭token验证。

const exportUserUrl = `${_baseUrl}/sys/user/exportUser`;
export const exportUserApi = function (json) {
  let data = `?areaId=${json.areaId}&areaType=${json.areaType}&id=${json.id}&name=${json.name}&no=${json.no}&isDanger=${json.isDanger}&loginName=${json.loginName}&officeId=${json.officeId}`
  window.open(exportUserUrl + data, '_blank')
}

但这样总归是不太好,于是使用下面的方法

// 封装下载方法
export function exportFile (url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params,
      responseType: 'blob'
    }).then(response => {
        resolve(response)
    }).catch(err => {
        reject(err);
      })
  })
}

// 下载接口
export const exportDataApi = json => exportFile(`${_record}/highriskOperate/exportData`, json);

// 调用下载接口
       let json = {}
       exportDataApi(json).then(res => {
        let fileName = 'test'
        let blob = new Blob([res], { type: 'application/x-xls' })
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName);
        } else {
          let link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          link.click();
          window.URL.revokeObjectURL(link.href);
        }
      })

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中实现文件下载并带有Token验证可以按照以下步骤进行操作: 1. 首先,在Vue项目中创建一个下载文件方法。可以将此方法写在一个Vue组件中或是一个工具文件中,方便复用。命名为`downloadFile`。 2. 在`downloadFile`方法中,首先确保用户已经登录并获取到有效的Token。可以从本地存储中获取Token值或是通过Vuex的状态管理来获取。 3. 在发送下载文件的请求之前,需要在请求的头部中添加Token信息,以便进行验证。可以使用axios或是其他网络请求库发送请求。示例代码如下: ```javascript import axios from 'axios'; const downloadFile = async (fileUrl, token) => { try { const response = await axios.get(fileUrl, { responseType: 'blob', headers: { 'Authorization': `Bearer ${token}` } }); // 创建一个下载链接 const downloadUrl = window.URL.createObjectURL(new Blob([response.data])); // 创建一个虚拟的下载链接,模拟用户点击下载 const link = document.createElement('a'); link.href = downloadUrl; link.setAttribute('download', 'filename.ext'); document.body.appendChild(link); link.click(); document.body.removeChild(link); // 释放占用的资源 window.URL.revokeObjectURL(downloadUrl); } catch (error) { console.error('下载文件失败', error); } }; ``` 4. 在需要进行文件下载的地方,调用`downloadFile`方法,并传入文件的URL和Token作为参数。例如,绑定一个点击事件来触发文件下载: ```html <template> <button @click="handleDownload">下载文件</button> </template> <script> import { mapState } from 'vuex'; import { downloadFile } from '@/utils/downloadFile'; export default { methods: { handleDownload() { const fileUrl = 'http://example.com/file.txt'; const token = this.token; // 从Vuex的状态管理中获取Token downloadFile(fileUrl, token); } }, computed: { ...mapState(['token']) } }; </script> ``` 通过以上步骤,我们就可以在Vue中实现文件下载并带有Token验证。需要注意的是,下载文件的接口需要正确验证Token,在后端服务中进行相应的处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值