js 下载图片自定义名字

最新推荐文章于 2024-08-08 15:53:24 发布

爱吃肉的冬瓜

最新推荐文章于 2024-08-08 15:53:24 发布

阅读量491

点赞数

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/DGplayweb/article/details/121926745

版权

    /**
     * 获取 blob
     * url 目标文件地址
     */
    getBlob(url) {
      return new Promise(resolve => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = () => {
          if (xhr.status === 200) {
            resolve(xhr.response);
          }
        };
        xhr.send();
      });
    },

    /**
     * 保存 blob
     * filename 想要保存的文件名称
     */
    saveAs(blob, filename) {
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename);
      } else {
        const link = document.createElement('a');
        const body = document.querySelector('body');
        link.href = window.URL.createObjectURL(blob);
        link.download = filename;
        // fix Firefox
        link.style.display = 'none';
        body.appendChild(link);
        link.click();
        body.removeChild(link);
        window.URL.revokeObjectURL(link.href);
      }
    },

    /**
     * 下载
     * @param  {Object} row 目标文件信息
     */
    download(row) {
      this.getBlob(row.fileUrl).then(blob => {
        this.saveAs(blob, row.fileName);
      });
    }