美文网首页
vue客户端导出txt文件

vue客户端导出txt文件

作者: xcx时光你好 | 来源:发表于2020-07-22 17:39 被阅读0次

如下

<template>
  <div class="app-container">
      <el-button type="primary" @click="onClickDownDaily">txt导出</el-button>
  </div>
</template>
export default {
  data() {
    return {
      tableData:[
        {id:1,name:'小明',age:18},
        {id:2,name:'小红',age:10},
        {id:3,name:'晓东',age:33}
      ]
    }
  },
  created() {
  },
  methods: {
    // txt文件导出
    onClickDownDaily() {
      var title = '>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>'+''+this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')+''+'>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>'
      var str=''
      this.tableData.forEach(item=>{
        str+='ID:'+item.id+'   '+'名称:'+item.name+'   '+'年龄:'+item.age+'\r\n'
      })
      var allStr = title+'\r\n'+'\r\n'+str
      var export_blob = new Blob([allStr]);
      var save_link = document.createElement("a");
      save_link.href = window.URL.createObjectURL(export_blob);
      save_link.download = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')+'.txt';
      this.fakeClick(save_link);
    },
    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);
    }
  }
}

相关文章

网友评论

      本文标题:vue客户端导出txt文件

      本文链接:https://www.haomeiwen.com/subject/yyjwghtx.html