1. npm install html2canvas -D ;
2. 需要截图的页面引入
import html2canvas from 'html2canvas'
3.需要截图的容器加 ref；
<div ref="imageTofile" class="dashboard-container home-box">
js 里面
getData() {
getList().then(res => {
const data = res.data
setTimeout(() => {
this.toImage() //开始截图
}, 1000)
})
},
// 截图 页面元素转图片 此方法最好设置定时器执行
toImage() {
// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
html2canvas(this.$refs.imageTofile, {
backgroundColor: null,
useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
}).then((canvas) => {
const url = canvas.toDataURL('image/png')
this.htmlUrl = url
// 把生成的base64位图片上传到服务器,生成在线图片地址
// this.sendUrl() //上传
})
}，
// 图片上传服务器
sendUrl() {
// 如果图片需要formData格式,就自己组装一下,主要看后台需要什么参数
const formData = new FormData()
// 调用
const blob = this.baseToBlob(this.htmlUrl)
const fileOfBlob = new File([blob], new Date().getTime() + '.png')
formData.append('file', fileOfBlob)
upLoad(formData).then(res => {
this.downUrl = res.data.url
})
},
将base64转换为blob
baseToBlob(dataurl) {
var arr = dataurl.split(',')
var mime = arr[0].match(/:(.*?);/)[1]
console.log(mime)
var bstr = atob(arr[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], { type: mime })
},
// 将blob转换为file
blobToFile(theBlob, fileName) {
theBlob.lastModifiedDate = new Date()
theBlob.name = fileName
return theBlob
}，
//预览 imgUrl ：就是截图生成的base64
downLoad(imgUrl) {
if (window.navigator.msSaveOrOpenBlob) {
var bstr = atob(imgUrl.split(',')[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
var blob = new Blob([u8arr])
window.navigator.msSaveOrOpenBlob(blob, '商务看板' + '.' + 'png')
} else {
// 这里就按照chrome等新版浏览器来处理
const a = document.createElement('a')
a.href = imgUrl
a.setAttribute('download', '商务看板.png')
a.click()
}
},
//说明一下 ，base64转化成BLOB 在转化成file 上传会按照文件流上传。