前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue项目:js模拟点击a标签下载文件并重命名,URL文件地址下载方法、请求接口下载文件方法总结。

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

作者头像
江咏之
发布2022-06-17 14:23:24
6.1K0
发布2022-06-17 14:23:24
举报
文章被收录于专栏:技术社区技术社区

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

代码语言:javascript
复制
    //文件下载
    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地址)

在这里插入图片描述
在这里插入图片描述

方法

代码语言:javascript
复制
    //通过文件下载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()
      })
    },
代码语言:javascript
复制
    //下载文件   js模拟点击a标签进行下载
    saveAs(blob, filename) {
      var link = document.createElement('a')
      link.href = window.URL.createObjectURL(blob)
      link.download = filename
      link.click()
    },

事件调用

代码语言:javascript
复制
 <a-button type="primary" icon="download" @click="downFile">下载</a-button>
代码语言:javascript
复制
    //文件下载
    downFile() {
      let fileUrl = imgView + 'group1/M00/00/88/FGQfoGIPDfuAErRaAABGAH4FyJ4422.xls'  //服务器文件地址
      this.getBlob(fileUrl).then(blob => {
        this.saveAs(blob, '信用权证使用导入模板件名.xlsx')
      })
    },
在这里插入图片描述
在这里插入图片描述

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

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

vue组件

代码语言:javascript
复制
import { exportxlsx } from '@/api/api'
代码语言:javascript
复制
//导出
    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文件

代码语言:javascript
复制
import {  exportFunc } from '@/api/manage'
代码语言:javascript
复制
//导出
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文件

代码语言:javascript
复制
import { axios } from '@/utils/request'   //导入axios请求方法  request封装axios文件
代码语言:javascript
复制
export function exportFunc(url,parameter) {
  return axios({
    url: url,
    method:'post' ,
    data: parameter,
    responseType: 'blob'
  })
}
在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-02-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档