首先 npm i?html2canvas -D
//根據(jù)url進(jìn)行文件下載
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`?})
????????????????}
????????????})
效果如下 ：
我們會發(fā)現(xiàn) 右邊背景為灰色 我試過很多方法 比如強(qiáng)制給canvas加背景色?
?=> backgroundColor:'#ffffff' 但是 并沒有效果?
分析一下原因 ： 這種bug是為什么出現(xiàn)呢伴澄？
主要是 你截圖是整個頁面? 就是你當(dāng)前屏幕 當(dāng)你的內(nèi)容大于你的屏幕時 就會出現(xiàn)這種情況
那要怎么解決呢？
我們只需要實(shí)時獲取當(dāng)前元素的寬高 讓其伸展 將canvas位移到中心即可
html2canvas(document.querySelector('#test'),{
? ? ? ? ? ? ? ? //獲取元素寬高 讓其以一個規(guī)律或者固定寬高伸展
????????????????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`?})
????????????????}
????????????})
效果：
