前端下载文件的几种方法

基于vue的mixin

export default {
  methods: {
    /**
     * @param {string} url
     * @param {string} fileName
     * 适用于单个除了img,video,audio，pdf的文件，通过链接直接下载文件
     */
    downloadWithUrl (url, fileName) {
      const aLink = document.createElement('a');
      aLink.style.display = 'none';
      aLink.href = url;
      aLink.download = fileName;
      aLink.target = '_blank';
      document.body.appendChild(aLink);
      aLink.click();
      document.body.removeChild(aLink); // 下载完成移除元素
    },
    /**
     * @param {object[]} imglist
     * @param {string} imglist[].name
     * @param {string} imglist[].url
     * 下载多个文件后生成压缩包，需要jszip＆file-saver插件
     */
    downloadWithCompress (imglist, zipName) {
      const JSZip = require('jszip');
      const { saveAs } = require('file-saver');
      const zip = new JSZip();
      const promises = [];
      imglist.forEach((item) => {
        const fileData = this.$axios.get(item.url, {
          responseType: 'blob',
          withCredentials: false
        }).then((res) => {
          console.log(res);
          zip.file(item.name, res);
          return res;
        });
        promises.push(fileData);
      });
      Promise.all(promises).then(() => {
        zip.generateAsync({ type: 'blob' }).then((content) => {
          // 生成二进制流
          saveAs(content, '' + zipName + '.zip'); // 利用file-saver保存文件
        });
      });
    },
   	/**
     * @param {string} url 链接
     * @param {string} name 文件名称
     * 适用于单个文件流下载
     */
    async downloadWithStream (url, fileName) {
      const fileStream = await this.$axios.get(url, {
        responseType: 'blob',
        withCredentials: false
      }).catch(() => {
        return false;
      });
      if (!fileStream) {
        return false;
      }
      const result = new Promise((resolve, reject) => {
        const file = new FileReader();
        file.readAsDataURL(fileStream.data);
        file.onload = function () {
          const aLink = document.createElement('a');
          aLink.style.display = 'none';
          aLink.href = file.result;
          aLink.setAttribute('download', fileName);
          document.body.appendChild(aLink);
          aLink.click();
          document.body.removeChild(aLink); // 下载完成移除元素
          resolve(true);
        };
      });
      return result;
    }
  }
};

提示，如果服务端为下载url设置了请求头

Content-Disposition: attachment; filename="filename.xls"

那么我们可以直接使用a标签下载，无需关注浏览器是否支持该文档格式