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.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()
    },

事件調用

 <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 = 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') < 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'
  })
}