Open webVueBlog opened 4 years ago
1.下载 html2canvas
npm install html2canvas
2.对应页面引入该插件
import html2canvas from 'html2canvas';
toImage() { html2canvas(this.$refs.imageDom, { backgroundColor: '#ffffff' }).then(canvas => { var imgData = canvas.toDataURL("image/jpeg"); this.fileDownload(imgData); }) }, fileDownload(downloadUrl) { let aLink = document.createElement("a"); aLink.style.display = "none"; aLink.href = downloadUrl; aLink.download = "监控详情.png"; // 触发点击-然后移除 document.body.appendChild(aLink); aLink.click(); document.body.removeChild(aLink); },
<template> <div> <div class="container" ref="imageDom">hahahah</div> <button @click="toImage">导出</button> </div> </template>
import html2canvas from 'html2canvas'; npm install html2canvas
1.下载 html2canvas
2.对应页面引入该插件