【vue】下载字符串拼接的文件链接并重命名文件

最新推荐文章于 2024-09-18 17:57:12 发布

原创最新推荐文章于 2024-09-18 17:57:12 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js

vue 专栏收录该内容

37 篇文章

订阅专栏

本文介绍如何使用Vue.js通过字符串拼接创建下载链接，并演示了如何在点击按钮时重命名文件。通过window.downloadFile函数，结合XMLHttpRequest获取远程文件并利用saveAs进行本地保存。

【vue】下载字符串拼接的文件链接并重命名文件

字符串拼接链接代码示例：

this.url = "http://127.0.0.1:8080/test/upload/20210128/2b35f9d7a64c3a6455a6e596c5c70fd7.xlsx";
this.filename = "导出文件";
this.html = '<button type="button" class="el-button el-button--primary el-button--small"><i class="el-icon-download"></i><a style="color:#fff;outline:none;" οnclick=download("'+this.url+'","'+this.filename+'.xlsx")  href="#">下载</a></button>';

定义window函数

<script>
window.downloadFile = function (url,filename) {
  getBlob(url, function(blob) {
      saveAs(blob, filename);
  })
};

function getBlob(url,cb) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function() {
        if (xhr.status === 200) {
            cb(xhr.response);
        }
    };
    xhr.send();
}
/**
 * 保存
 * @param  {Blob} blob
 * @param  {String} filename 想要保存的文件名称
 */
function saveAs(blob, filename) {
  if (window.navigator.msSaveOrOpenBlob) {
      navigator.msSaveBlob(blob, filename);
  } else {
    var link = document.createElement('a');
    var 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);
  }
}
</script>