前端下载的方式总结（url,文件流，压缩包）

2022-08-18 12:30:55 阅读：149 来源： 互联网

标签：const name url 前端 file data 压缩包 string

1.比较常见的是通过a标签的href属性直接访问文件url地址。

(1）
const downloadUrl = (url: string, file_name?: string) => {
  if (url) {
    url = url.replace(/^http/, "https");
    const a = document.createElement("a");
    a.href = url + `?attname=${file_name || "doc"}`;
    a.download = file_name || "doc";
    a.click();
  }
};
（2）attname参数值需要带扩展名，要不然识别不了文件类型。这种方式下载一些不用验证的资源是可以，
     但如果下载接口需要验证，需要你在请求头带token，这种方式就行不通了（可以看到浏览器下载进度）

  <a  href="文件url?attname=filename.jpg">xxx</a>

2、文件流下载，通过接口下载

* @Description: 参数注释: (fileName: string, url: string, exportDate?: boolean) fileName: 下载文件名 url：文件地址 exportDate：是否是导出文件流 *

export default function (fileName?: string, url?: string, exportDate?: boolean) {
  if (!url) {
    ElMessage({
      type: "warning",
      message: "下载地址为空，无法下载"
    });
    return;
  }
  url = url.replace(/http:/, "");
  const x = new XMLHttpRequest();
  x.open("GET", url, true);
  if (exportDate) {
    const session = getSession("user", true) as USER;  // 你的token
    if (session) {
      x.setRequestHeader("Authorization", `Bearer ${session.token}`);
    }
  }

  x.responseType = "blob";

  x.onload = function () {
    let xlsxName = null;
    if (exportDate) {
      xlsxName = fileNameHeader(x.getResponseHeader("Content-Disposition"));
    }
    const url = window.URL.createObjectURL(x.response);
    const a = document.createElement("a");
    a.href = url;
    if (exportDate) {
      a.download = xlsxName || "file";
    } else {
      a.download = fileName || "file";
    }

    a.click();
  };
  x.send();
}

function fileNameHeader(d: any) {
  let result = null;
  if (d && /filename=.*/gi.test(d)) {
    result = d.match(/filename=.*/gi);
    return decodeURI(result[0].split("=")[1]);
  }
}

3、批量下载生产压缩包

import axios from "axios";
import JSZip from "jszip";
import FileSaver from "file-saver";

const getFile = (url: string) => {
  return new Promise((resolve, reject) => {
    axios({
      method: "get",
      url,
      responseType: "arraybuffer"
    })
      .then((data) => {
        resolve(data.data);
      })
      .catch((error) => {
        reject(error.toString());
      });
  });
};

export default function batchDownload(urlArr: any, name?: string, arrChildName?: string[]) {
  const data: string[] = urlArr; // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
  const zip = new JSZip();
  const cache: any = {};
  const promises: string[] = [];
  data.forEach((item, index) => {
    const promise: any = getFile(item).then((data: any) => {
      // 下载文件, 并存成ArrayBuffer对象
      const arr_name = item.split("/");
      let file_name = arr_name[arr_name.length - 1]; // 获取文件名
      if (arrChildName && arrChildName.length) {
        file_name = arrChildName[index];
      }
      zip.file(file_name, data, { binary: true }); // 逐个添加文件
      cache[file_name] = data;
    });
    promises.push(promise);
  });

  Promise.all(promises).then(() => {
    zip.generateAsync({ type: "blob" }).then((content) => {
      // 生成二进制流
      FileSaver.saveAs(content, name || "打包下载.zip"); // 利用file-saver保存文件
    });
  });
}

标签：const,name,url,前端,file,data,压缩包,string
来源： https://www.cnblogs.com/chailuG/p/16598280.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端下载的方式总结（url,文件流，压缩包）