526互联

使用html2canvas生成网页截图并下载

发布时间 2023-07-06 09:53:42作者: 妞妞猪

1.安装依赖

npm install html2canvas --save

2.引入依赖

import html2canvas from "html2canvas";

3.使用示例

<template>
<div>
<a @click="toImage()">下载</a>
<div ref="imageTofile"> 
　　要截屏的控件内容
</div>
</div>
</template>

<script>
import html2canvas from 'html2canvas'
import Details from '@/view/modules/departmentmanage/registeraccount/details.vue'

export default {
components: {
Details
},

data () {
return {
async init (id) {
await this.$refs.details.query(id)
},
toImage () {
// 手动创建一个 canvas 标签
const canvas = document.createElement('canvas')
// 获取父标签，意思是这个标签内的 DOM 元素生成图片
// imageTofile是给截图范围内的父级元素自定义的ref名称
let canvasBox = this.$refs.imageTofile
// 获取父级的宽高
const width = parseInt(window.getComputedStyle(canvasBox).width)
const height = parseInt(window.getComputedStyle(canvasBox).height)
// 宽高 * 2 并放大 2 倍 是为了防止图片模糊
canvas.width = width * 2
canvas.height = height * 2
canvas.style.width = width + 'px'
canvas.style.height = height + 'px'
const context = canvas.getContext('2d')
context.scale(2, 2)
const options = {
backgroundColor: null,
canvas: canvas,
useCORS: true
}
html2canvas(canvasBox, options).then((canvas) => {
// toDataURL 图片格式转成 base64
let dataURL = canvas.toDataURL('image/png')
console.log(dataURL)
this.downloadImage(dataURL)
})
},
// 下载图片
downloadImage (url) {
// 如果是在网页中可以直接创建一个 a 标签直接下载
let a = document.createElement('a')
a.href = url
a.download = '截图'
a.click()
}
}
}
}
</script>

在这里，最好是使用 div或者其他的块状标签来包裹 要截图的控件 如 <div ref="imageTofile"> ，因为我尝试过直接包裹一个工作流插件 super-flow  ，会报错！ 所以我在工作流插件 super-flow 外再包了一层div就可以使用了。需要注意的是，像上面的代码写，下载下来的截图背景是黑色的，有点看不清，所以需要修改 const options = {backgroundColor: '#FFFFFF',这样截图的背景就是白色了

参考 https://blog.csdn.net/qq_42772400/article/details/126404848