前端：下载文件(多种方法)

一、简介

前端经常会有下载文件的需求，这里总结了几种常用的方法，方便日后查看。

二、a标签下载

下载

三、window.open下载

downloadTemple() {
      window.open(`url`);
    },

四、location.href

location.href = 'https://a.png';

五、saveAs

saveAs('https://abc.png')

六、loadFileSimply

6.1、loadFileSimply

// loadFileOps.js
import axiosOps from 'axios';
import cookie from 'js-cookie';
import { hasIn } from 'lodash';
import Vue from 'vue';
 
export const $loadFileSimply = param => {
  let token = cookie.get('token');
  let tenantId = cookie.get('tenantId');
  param.url += param.url.indexOf('?') > -1 ? '&' : '?';
  param.url += `tenantId=${tenantId}&_=${new Date().getTime()}`;
  return new Promise((resolve, reject) => {
    axiosOps({
      url: param.url,
      method: param.method,
      data: param.data,
      params: param.params,
      responseType: 'arraybuffer', // 请求成功时，后端返回文件流，正常导出文件;
      headers: {
        Authorization: `Bearer ${token}`,
        tenantId: tenantId
      },
      timeout: param.timeout ? param.timeout : 5000
    })
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        Vue.$notify.error({
          title: '错误提示',
          message: '下载文件失败'
        });
        reject(err)
      });
  });
};

6.2、fileDownload

// 内容转化为文件下载
export const fileDownload = (file, fileName = '下载文件', options) => {
  // 创建隐藏的可下载链接
  let eleLink = document.createElement('a')
  eleLink.download = fileName
  eleLink.style.display = 'none'
  // 字符内容转变成blob地址
  let blob = options ? new Blob([file], options) : new Blob([file])
  eleLink.href = URL.createObjectURL(blob)
  // 触发点击
  document.body.appendChild(eleLink)
  eleLink.click()
  // 然后移除
  document.body.removeChild(eleLink)
}

6.3、使用

import { $loadFileSimply } from '@const/loadFileOps';
import { fileDownload } from '@const/utils.js';
 
downloadTemple() {
      $loadFileSimply({
        url: downloadUrl,
        method: 'post',
        params: { tempCode: 'SAAS_PUR_ORDER_TEMP' },
      })
        .then((res) => {
          fileDownload(res, '文件名称.xlsx'); // 下载并修改文件名
        })
        .catch(() => {
          this.$message.error('下载模板失败!');
        });
    },

七、url下载

// 地址下载,fileName暂无作用
export const urlDownload = (url, fileName = '下载文件') => {
  // 创建隐藏的可下载链接
  let eleLink = document.createElement('a')
  eleLink.download = fileName
  eleLink.style.display = 'none'
  eleLink.href = url
  // 触发点击
  document.body.appendChild(eleLink)
  eleLink.click()
  // 然后移除
  document.body.removeChild(eleLink)
}

八、多文件下载

/**
 * 以iframe的方式实现的多文件下载
 * @param { urls:array } - 需要下载的内容的数组列表,可以只有一条数据。
 */
export const dnLoadMultipleFiles = (urls) => {
  if (typeof urls !== 'object' || urls.length === 0) return
  urls.forEach(item => {
    const iframe = document.createElement('iframe')
    iframe.style.display = 'none' // 防止影响页面
    iframe.style.height = 0 // 防止影响页面
    iframe.src = item
    document.body.appendChild(iframe) // 这一行必须，iframe挂在到dom树上才会发请求
    // 5分钟之后删除（onload方法对于下载链接不起作用，就先这样吧）
    setTimeout(() => {
      iframe.remove()
    }, 5 * 60 * 1000)
  })
}

九、欢迎交流指正，关注我，一起学习。

十、参考链接：

前端如何实现文件下载(七种方法)_前端程序的博客-CSDN博客_前端下载文件

axios请求设置responseType为'blob'或'arraybuffer'下载文件时，正确处理返回值为文件流或json对象的情况_倔强的小绵羊的博客-CSDN博客

axios 的responseType 类型动态设置_江小沫的博客-CSDN博客_axios responsetype