vue项目中下载数据为.txt格式

vue项目中下载数据为.txt格式

1. 下载按钮注册事件

<el-button type="success" icon="el-icon-download" :style="{ 'margin-left': '20px' }" size="small" @click.prevent="downTxt" > 下载 </el-button>**

2. 注册方法

downTxt() {
      let res = "abcdefghicklmnopqrstuvwxyz";
      if (res) {
        exportRaw("字母表", res);
        this.$message.success("下载成功");
      }  else {
        this.$message.warning('当前数据出现问题')
      }
    
    },

3. 引入exportRaw方法

// 下载txt 文件的 方法 01 配合使用
export function exportRaw(name, data) {
  var urlObject = window.URL || window.webkitURL || window;
  var export_blob = new Blob([data]);
  var save_link = document.createElementNS(
    "http://www.w3.org/1999/xhtml",
    "a"
  );
  save_link.href = urlObject.createObjectURL(export_blob);
  save_link.download = name;
  fakeClick(save_link);
}
// 下载txt 文件的 方法 02 配合使用
export function fakeClick(obj) {
  var ev = document.createEvent("MouseEvents");
  ev.initMouseEvent(
    "click",
    true,
    false,
    window,
    0,
    0,
    0,
    0,
    0,
    false,
    false,
    false,
    false,
    0,
    null
  );
  obj.dispatchEvent(ev);
}

这样就可以啦