github链接
一、下载运行后选择下图的html2canvas即可直接去到路由界面测试
二、下图是html2canvas路由页面,点击右上角的生成图片即可下载长图
四、源码(关键在generateImage 这个方法)
<template>
<div class="html2canvas-wrap">
<div ref="area" id="aaa">
<p>1234</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>1234</p>
<p>1234</p>
</div>
<van-button style="position:fixed; right: 0; top: 0; z-index: 9" type="primary" @click="generateImage">生成图片</van-button>
</div>
</template>
<script>
import area from '@/js/area'
export default {
name: 'html2canvas',
components: {},
filters: {},
mixins: [],
props: {},
data () {
return {
areaList: area,
imgUrl: ''
}
},
computed: {},
watch: {},
created () {
},
mounted () {
},
methods: {
generateImage () {
const rect = this.$refs.area.getBoundingClientRect()
console.log(rect)
this.$html2canvas(this.$refs.area, {
scrollY: rect.top,
height: rect.height + 50
}).then(canvas => {
canvas.toBlob(blob => {
this.imgUrl = URL.createObjectURL(blob)
const aImg = document.createElement('a')
aImg.href = this.imgUrl
aImg.download = this.imgUrl
document.body.appendChild(aImg)
aImg.click()
document.body.removeChild(aImg)
}, 'image/png')
})
}
}
}
</script>
<style lang="scss" scoped>
.html2canvas-wrap {
}
</style>