一、安装
npm install html2canvas
二、引入并注册 html2canvas
import html2canvas from 'html2canvas';
components: {
html2canvas
}
三、基础使用,document.body 为要截图的元素
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});
四、Vue 中使用
// 给元素设置一个 id 方便获取该元素
<div @click="jieping" id="imageWrapper"> html2canvas </div>
// 导出图片
jieping() {
this.$nextTick(() => {
html2canvas(document.getElementById('imageWrapper'),{
scale:3, // 放大
useCORS: true, // 使用CORS从服务器加载图像
async: false, // 异步解析和呈现元素
background: "#ffffff", // 背景颜色
dpi: 300, // 处理模糊问题
}).then(canvas => {
const img = canvas.toDataURL("image/jpeg").replace("data:image/jpeg;base64,", "")
const finalImageSrc = "data:image/jpeg;base64," + img
// 添加a标签用于下载
const aElem = document.createElement('a')
document.body.appendChild(aElem) // 223kb
aElem.href = finalImageSrc
// 图片下载名
aElem.download = "组织机构图.jpg"
aElem.click()
document.body.removeChild(aElem)
});
})
},