文件下载

一 、简介

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

二、a 标签下载

通过 a 标签的 download 属性，可以实现文件下载。

> <a href="https://abc.png" download="abc.png" target="view\_window">下载</a>

三、window.open 下载 使用 window.open 进行下载，只需要将文件的地址赋值给

window.open 即可。

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

四、location.href

使用 location.href 进行下载，只需要将文件的地址赋值给 location.href 即可。

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

五、saveAs

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 (!Array.isArray(urls) || 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