Vue+Js導出文件並重命名

 

基於上一篇文章  純js實現文件下載並重命名功能   實現Vue封裝

 

廢話少說直接來干的

 

新建util.js文件

     /*
     *@method 獲取文檔流
     *@param {Object} url 下載地址
     */
    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();
    },
    /*
     *@method 保存到本地方法 
     *@param {Object} blob 文檔流  filename  文件的名稱
     */
    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);
        };
    }

 

 

頁面中使用

 

import util from "util.js"; // 引入js方法

     /*
     *@method 獲取下載地址
     */
    getUrl(item) {
      // 處理item  返回Url
      let URL = "xxxxxxx";
      return URL;
    },

    /*
     *@method 頁面觸發下載事件
     */
    handleDownload(item) {
      let URL = this.getUrl(item);
      this.handleSave(URL, item.name);
    },
    /*
     *@method 調用保存js
     *@param {Object} url 下載地址 filename 下載的文件名稱
     */
    handleSave(url, filename) {
      util.getBlob(url, function (blob) {
        util.saveAs(blob, filename);
　　　　});

 }