html2canvas官方文档

npm下载依赖

npm install html2canvas -S

在需要使用的地方引入

import html2canvas from ‘html2canvas‘;

根据我司的需求，，下载需要的html页面生成图片

//template <div class="print " @click="generatorImage" > <span>打印</span> </div> <div class="content" ref="addImage"> <div ref="capture" > 需要保存的html页面 </div> </div> //js methods: { //点击生成图片 generatorImage() { html2canvas(this.$refs.capture).then(canvas => { // this.$refs.addImage.append(canvas);//在下面添加canvas节点 let link = document.createElement("a"); link.href = canvas.toDataURL();//下载链接 link.setAttribute("download","体检表.png"); link.style.display = "none";//a标签隐藏 document.body.appendChild(link); link.click(); }); }, }

注意这里需要使用ref,如对ref不熟悉的可以看我的https://www.cnblogs.com/shcs/p/11914767.html

不驰于空想，不鹜于虚声

vue使用html2canvas生成图片并保存到本地