Vue 通过url下载文件并对下载的文件更名

Vue 通过url下载文件并对下载的文件更名

HTML如下：

 <div @click="downloadFile(url,name)">点击下载</div>

filename可以根据需要的内容进行拼接，比如name + id、name + 时间，这样就容易区分下载的文件了。
比如使用name+id，那么在downloadFile(url,name+id)这样就可以了。

methods里面方法如下：

 downloadFile (url, filename) {
      function 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();
        });
      }
      //下载文件
      function saveAs (blob, filename) {
        const elelink = document.createElement("a");
        elelink.style.display = 'none';
        elelink.download = filename;
        console.log(url, filename)
        elelink.href = window.URL.createObjectURL(blob);
        document.body.appendChild(elelink);
        elelink.click();
        document.body.removeChild(elelink);
      }
      // 调用以上方法进行下载
      getBlob(url).then(blob => {
        saveAs(blob, filename);
      });
    },