Do you know how to use Vue to take screenshots of web pages?

npm install html2canvas --save

import html2canvas from "html2canvas";

<el-button class="button-dalod" size="mini" title="Generate image" @click="toImage()" icon="el-icon-download"></el-button>

// Convert page elements to images toImage () {
            // Manually create a canvas tag const canvas = document.createElement("canvas")
            // Get the parent tag, which means the DOM element in this tag generates the image // imageTofile is a custom ref name for the parent element within the screenshot range let canvasBox = this.$refs.imageTofile
            // Get the width and height of the parent const width = parseInt(window.getComputedStyle(canvasBox).width)
            const height = parseInt(window.getComputedStyle(canvasBox).height)
            // Width and height * 2 and enlarged by 2 times is to prevent the image from being blurred 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 image format converted to base64
                let dataURL = canvas.toDataURL("image/png")
                console.log(dataURL)
                this.downloadImage(dataURL)
            })
        },
        //Download the image downloadImage(url) {
            // If it is on a web page, you can directly create an a tag to download directly let a = document.createElement('a')
            a.href = url
            a.download = 'Home Screenshot'
            a.click()
        },