使用html2canvas实现录取通知书

先看效果

如上录取通知书实现原理，需要一张背景图片，里面的文字全部是前端加上的，然后用html2canvas绘图成一张照片，下载使用

安装依赖：npm i html2canvas

引入：import Html2canvas from 'html2canvas'

代码：

<div class="results_notice" ref="resultsNotice"><div class="offer"><div class="offer_img"><el-image class="offer_img" :src="resultsNotice" fit="scale-down" /></div><div class="offer_text"><div class="text" style="margin-bottom:16px">恭喜你！<span class="under">{{user.name}}</span>同学：</div><template><div class="text fLine">你已与<span class="under">{{aplStuCode.tcName}}</span><!-- <span class="under"></span>。 --></div></template><template><divclass="offer_text_sentence">岁月因青春慨然以赴，而更加静好；世间因少年挺身向前，而更加瑰丽。愿大家在今后的科研道路上不断学习知识，充实自己，成为未来科技的领军人才。</div></template></div><template><div class="offer_parent">导师签字：</div><div class="offer_student">学生签字：</div></template></div></div>

 exportPDF () {this.PDFloading = truethis.$nextTick(() => {new Html2canvas(this.$refs.resultsNotice, {useCORS: true,// width: 1140,// height: 480,windowWidth: document.body.scrollWidth,windowHeight: document.body.scrollHeight,// x: 350,// y: window.pageYOffset + 335x: 0,y: window.pageYOffset}).then((canvas) => {downloadOff(canvas.toDataURL('image/png', 1.0),`下载后的名称.png`)this.PDFloading = false})})},

下载方法
export function downloadOff (url) {const fileNameList = url.split('?')[0].split('/')const fileName = fileNameList[fileNameList.length - 1]let xhr = new XMLHttpRequest()xhr.open('GET', url, true)// 请求头带上tokenxhr.setRequestHeader('token', Vue.cookie.get('stuToken'))xhr.responseType = 'blob'xhr.onload = e => {const a = document.createElement('a')a.href = window.URL.createObjectURL(xhr.response)a.download = fileNamea.click()}xhr.send()// 打开新页面手动下载// const a = document.createElement('a')// a.setAttribute('download', '')// a.setAttribute('target', '_blank')// a.setAttribute('href', url)// a.click()
}

使用html2canvas实现录取通知书相关推荐

各个大学的录取通知书，哪个颜值最高？
近段时间,各大高校纷纷开始晒出自家的录取通知书,快来和小天一起评评哪家的颜值最高! 北京工业大学北京科技大学东南大学复旦大学哈尔滨工业大学南京农业大学南开大学清华大学天津大学西安交通 ...
2021年河北省高考成绩录取查询结果,2021年河北高考一本录取结果查询和录取通知书发放时间...
河北高考一本录取结果查询和录取通知书发放时间从河北教育考试院获悉,河北高考成绩查询时间已经确定.同时,考生.家长关心的各批次录取时间也已出炉.其中,本科一批高等学校录取时间安排如下:本科一批第一志愿录 ...
工地上收到北大录取通知书，但他说的这句话更动人！
还记得录取通知书到达时,你在做什么吗?这两天,一位云南考生获得了网友怒赞! 当高考录取结果揭晓等通知书到来的这段时间里你是选择耐心等待还是推杯换盏.游山玩水? 但是云南考生崔庆涛却不一样 7月2 ...
全国计算机一级书红色封面,年度最强的网红录取通知书，竟然附赠了一张黑胶唱片...
这两天世超被一张来自中国科学院大学的录取通知书给刷屏了,这份录取通知书里还附赠了一张黑胶光盘. 光盘上刻录了一份国科大为新生准备的特别的礼物 -- 一段来自宇宙深处的声音. 它们是由国科大师生通过 5 ...
2021宣城职业技术学院对口高考成绩查询,2021年宣城职业技术学院高考录取通知书查询通知书什么时候可以收到...
高考志愿填报后最重要的一件事情就是高考录取通知书的查收了,因为录取通知书才是证明你被录取的有效方式.那么很多考生及家长最关心怎么查询宣城职业技术学院录取通知书?宣城职业技术学院录取通知书寄到哪里了?本 ...
怎么查到运行的时间_“我的成考录取通知书怎么还没来，它是不是迷路了？”...
安徽2020年成考录取基本都告一段落了大家也查到了录取结果! 小K先恭喜大家被心仪的院校录取~ [碰拳][碰拳][碰拳] 很多同学在问小K 为什么自己已经查询到自己被录取的消息却还一直没有收到 ...
清华计算机录取通知书,清华送出第一批录取通知书，这些被刷屏的学霸，有怎样的成长密码...
高考一直被人们视为人生路上最重要的一块敲门砖,在高考中取得优异成绩的学霸,通过高考一举成名,从而带上人生的光环. 今年的高考,涌现出了很多励志性的考生,有从幼小阶段树立目标达成梦想的,就如湖北考生唐楚 ...
西电计算机学院通知,西安电子科技大学计算机科学与技术学院关于发放2020级硕士研究生正式录取通知书的通知...
当前已是7月中下旬2020考研已进入尾声,当前各大研招院校陆续发布硕士研究生录取通知书邮寄通知.为帮助2020考研考生及时获知报考院校录取通知书公告信息,中公考研小编整理"西安电子科技大学计 ...
最“丑”录取通知书，谁家院校上榜？新一波研究生通知书已送达
时间来到6月中旬,不少院校已寄出了研究生录取通知书.继第一批统计后,又有同学在网络上将它晒了出来,下面一起来沾沾喜气~ 01 又有录取通知书送达 ①安徽大学 ②南京师范大学 ③中国科学技术大学 ④安庆 ...

使用html2canvas实现录取通知书

使用html2canvas实现录取通知书相关推荐

最新文章

热门文章