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);
　　　　});

 }