表单代码:
<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); },