前端几种下载文件的方式(url方式和文件流方式)

前端实现下载功能是依赖于浏览器特性，而非JS特性

第一种 a标签

前端创建超链接，通过a标签向后端发送get请求，需要给a标签添加一个download属性
这种写法是创造了一个a标签，把地址写到a标签里再用js调用点击，实现访问文件地址就是下载了
代码如下:

html

   <a @click="downloadFile(file.url,file.originalFilename, file.id, file.fileTye)">下载</a>
   // 参数分别是：文件的路径 文件的名字 文件的id 文件的类型

js

  downloadFile(url, fileName, flieId, type) {
     let link = document.createElement('a');
     link.style.display = 'none';
     link.href = baseUrl + '/xxx/xxx/xxx?flieId=' + flieId;
     document.body.appendChild(link);
     link.click();
   },

或者

<a :href='"/user/downloadExcel"' >下载模板</a>

//另一种情况是创建div标签，动态创建a标签：
<div name="downloadfile" "downloadExcel()">下载</div>
function downloadExcel() {
    let a = document.createElement('a')
    a.href ="/xxx/xxx"
    a.click();
} 

直接下载

a标签的href属性指定下载文件的路径,需要给a标签添加一个download属性，download指定下载文件保存时的名称。

<a href="https://106.14.15.103:8000/downloadFile/test" download="test.txt">下载</a>

第二种 通过window.open()下载

window.open就是打开了一个新网页直接在新网页访问文件地址了，只要访问文件地址，就能下载文件。这时候后端返回的是文件流直接渲染,不需要url再打开下载了

  downloadFile() {
    window.open(
      baseUrl + '/xxx/xxx/xxx/getTemplate?templateCode=manual_pc',
      '_self'
    );
  },

第三种 通过创建iframe的方式

<el-button  size="mini" @click="handleExport(scope.row)">导出</el-button>
//method方法：
handleExport(row) {
      var elemIF = document.createElement('iframe')
      elemIF.src = 'user/downloadExcel?snapshotTime=' + formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm') +
                    '&category=' + row.category 
      elemIF.style.display = 'none'
      document.body.appendChild(elemIF)
    }

第四种 以文件流的形式，会对后端发post请求，使用blob格式，这种写法对于图片和pdf及svg能实现下载功能

$http({
   url: this.$http.adornUrl(`/strUrl/${id}`),
   method: 'get',
   responseType: 'blob',
   timeout: 1000 * 600
 }).then(res => {
   console.log('res', res)
   if (res.status === 200) {
     const blob = new Blob([res.data], { type: `application/octet-stream` })
     const downloadElement = document.createElement('a')
     const href = window.URL.createObjectURL(blob)
     downloadElement.href = href
     downloadElement.download = `${filename}`
     downloadElement.click()
   } else {
     Elmessage.error('下载出错!')
   }
 })

 项目中使用

封装dowanload.js/ts写入下面代码

const download0 = (data: Blob, fileName: string, mineType: string) => {
  // 创建 blob
  const blob = new Blob([data], { type: mineType })
  // 创建 href 超链接，点击进行下载
  window.URL = window.URL || window.webkitURL
  const href = URL.createObjectURL(blob)
  const downA = document.createElement('a')
  downA.href = href
  downA.download = fileName
  downA.click()
  // 销毁超连接
  window.URL.revokeObjectURL(href)
}

const download = {
  // 下载 Excel 方法
  excel: (data: Blob, fileName: string) => {
    download0(data, fileName, 'application/vnd.ms-excel')
  },
  // 下载 Word 方法
  word: (data: Blob, fileName: string) => {
    download0(data, fileName, 'application/msword')
  },
  // 下载 Zip 方法
  zip: (data: Blob, fileName: string) => {
    download0(data, fileName, 'application/zip')
  },
  // 下载 Html 方法
  html: (data: Blob, fileName: string) => {
    download0(data, fileName, 'text/html')
  },
  // 下载 Markdown 方法
  markdown: (data: Blob, fileName: string) => {
    download0(data, fileName, 'text/markdown')
  }
}

export default download

页面使用  需要后端接口配合

import download from '@/utils/download'


//导出
const exportdownload = async () => {
    let params = {
        projectId: projectId.value,
        gameServerCode: rowInfo.value.code,
        invitationId: invitationId.value,
        code: invitationcode.value,
        userId: operator.value
    }

    const data = await exportList(params)
    download.excel(data, '运营邀请码.xls')
}