• vue+elementUI 点击下载txt文件


    表单代码:

    <el-table :data="joblistData" border style=" 99%" :height=winHeight>
                    <el-table-column prop="aa" align="center" label="ID"></el-table-column>
                    <el-table-column prop="aa" align="center" label="名字"></el-table-column>
                    <el-table-column prop="aa" align="center" label="中文职称"></el-table-column>
                    <el-table-column prop="aa" align="center" label="英文职称"></el-table-column>
                    <el-table-column align="center" label="图片">
                        <template slot-scope="scope">
                            <img
                                    v-if="scope.row.picture"
                                    style=" 50px;height: 50px"
                                    class="el-image__inner"
                                    :src="scope.row.picture"
                                    @click="onClickImg(scope.row.picture)"
                            />
    
                        </template>
                    </el-table-column>
    
                    <el-table-column fixed="right" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button
                                    @click="updateJob(scope.row)"
                                    type="warning"
                                    size="small"
                            >修改</el-button>
                            <el-button
                                @click="getCode(scope.row)"
                                type="success"
                                style="background: #009688;"
                                size="small"
                            >查看代码</el-button>
                            <el-button
                                @click="downloadCode(scope.row)"
                                type="success"
                                size="small"
                            >下载代码</el-button>
                        </template>
                    </el-table-column>
                </el-table>

    点击下载按钮:

        downloadCode(row){
          // 文本内容 let modelCode
    = '<div style="600px;height:180px;background-color:#EDEDEC;"> ' + ' <div style="height:20px"></div> ' + ' <div style="190px;height:140px;margin-left: 35px; float:left;"> ' + ' <div> ' + ' <label style="font-size: 20px"><b>'+ row.name + '</b></label> ' + ' <div style="height:20px"></div> ' + '</div> ............ ' let export_blob = new Blob([modelCode]); let save_link = document.createElement("a"); save_link.href = window.URL.createObjectURL(export_blob); save_link.download = row.name +'.txt'; this.fakeClick(save_link); }, fakeClick(obj) { let ev = document.createEvent("MouseEvents"); ev.initMouseEvent( "click",true,false,window,0,0,0,0,0,false,false,false,false,0,null ); obj.dispatchEvent(ev); },
  • 相关阅读:
    Hadoop-2.4.1学习之Map任务源代码分析(下)
    微软面试题之两个链表的第一个公共结点
    再次轻度破解EXE文件
    源泉书签,助您管理海量收藏。www.yuanquanshuqian.com,今日更新:多标签功能已实现
    经验总结17--submitbutton,ajax提交
    python学习笔记(六)文件夹遍历,异常处理
    vue 数据传递的方法
    Vue 组件之间的数据传递
    Springboot文件下载
    springboot获取URL请求参数的几种方法
  • 原文地址:https://www.cnblogs.com/weiweiyeyu/p/15033908.html
Copyright © 2020-2023  润新知