• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

vue+elementUI 点击下载txt文件

开发技术 开发技术 5小时前 1次浏览

vue+elementUI 点击下载txt文件vue+elementUI 点击下载txt文件

 

 

 

表单代码:

<el-table :data="joblistData" border style="width: 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="width: 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="width:600px;height:180px;background-color:#EDEDEC;">n' + ' <div style="height:20px"></div>n' + ' <div style="width:190px;height:140px;margin-left: 35px; float:left;">n' + ' <div>n' + ' <label style="font-size: 20px"><b>'+ row.name + '</b></label>n' + ' <div style="height:20px"></div>n' + '</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); },

 


程序员灯塔
转载请注明原文链接:vue+elementUI 点击下载txt文件
喜欢 (0)