vue把网页转换成图片html2canvas

1. npm 导入html2canvas

   npm install html2canvas
   

2. 在使用的页面导入

   import html2canvas from 'html2canvas'
   

3. 使用

   <template>
   	<div>
   		<div  ref="image">
   			把需要转换成图片的代码写在里面    
       	</div>
   		<button @click="toImage">下载</button>
   	</div>
   </template>
   <script>
       import html2canvas from 'html2canvas'
   	 export default {
            methods: {
                toImage() {
          			 html2canvas(this.$refs.image, {
             			backgroundColor: '#ffffff'
           		}).then(canvas => {
             			var dataURL = canvas.toDataURL("image/jpeg");
                        //转换图片为dataURL
             			this.fileDownload(dataURL);
           		})
         		},
               fileDownload(downloadUrl) {
           		let aCreate = document.createElement("a");//创建a元素
          			 aCreate.style.display = "none";//隐藏a元素
           		 aCreate.href = downloadUrl;//把dataURL给a元素的href属性
          			 aCreate.download = "名字.png";
          			 document.body.appendChild(aCreate);//触发点击
           		 aCreate.click();
           		 document.body.removeChild(aCreate);//移除
        		},
            }
        }
   </script>
   

   官网链接：http://html2canvas.hertzen.com/