首先 npm i html2canvas -D
//根据url进行文件下载
downloadByURL = (url, { filename }) => {
const link = document.createElement('a')
const evt = document.createEvent('HTMLEvents')
evt.initEvent('click', false, false)
link.href = `${url}`
link.target = '_blank'
link.download = filename
link.style.display = 'none'
document.body.appendChild(link)
link.click()
// 释放URL 对象
window.URL.revokeObjectURL(link.href)
}
//canvas截图核心
html2canvas(document.querySelector('#test')).then(canvas => { //这里写自己需要截图的id
const img = canvas.toDataURL()
const fileName = test+'.png'
//处理ie兼容问题
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
var blob = canvas.msToBlob()
window.navigator.msSaveOrOpenBlob(blob, fileName)
}else{
downloadByURL(img, { filename: `test || '截图'}.png` })
}
})
效果如下 ：
我们会发现 右边背景为灰色 我试过很多方法 比如强制给canvas加背景色
=> backgroundColor:'#ffffff' 但是 并没有效果
分析一下原因 ： 这种bug是为什么出现呢？
主要是 你截图是整个页面 就是你当前屏幕 当你的内容大于你的屏幕时 就会出现这种情况
那要怎么解决呢？
我们只需要实时获取当前元素的宽高 让其伸展 将canvas位移到中心即可
html2canvas(document.querySelector('#test'),{
//获取元素宽高 让其以一个规律或者固定宽高伸展
width: document.querySelector('#test').clientWidth + 500,
height: document.querySelector('#test').clientHeight + 300,
//将截图部分 移入中心位置
scrollX: 250,
scrollY: 150,
//加上白色背景
backgroundColor: 'white'
}).then(canvas => {
const img = canvas.toDataURL()
const fileName = test+'.png'
//处理ie兼容
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
var blob = canvas.msToBlob()
window.navigator.msSaveOrOpenBlob(blob, fileName)
}else{
downloadByURL(img, { filename: `test || '截图'}.png` })
}
})
效果：
