current position:Home>JS, react use html2canvas page screenshot and export

JS, react use html2canvas page screenshot and export

2022-05-15 02:20:24Wang Haihu

import React, { Component } from 'react';
import { render } from 'react-dom';
import html2canvas from 'html2canvas';
import Hello from './Hello';
import './style.css';

class App extends Component {
    constructor() {
        super();
        this.state = {
            name: 'React'
        };
    }

    componentDidMount() {
        html2canvas(document.body, {
            allowTaint: false,
            useCORS: true,
        }).then(function (canvas) {
            // toImage
            const dataImg = new Image()
            dataImg.src = canvas.toDataURL('image/png')
            const alink = document.createElement("a");
            alink.href = dataImg.src;
            alink.download = "testImg.jpg";
            alink.click();
        });
    }

    render() {
        return (
            <div>
                <div className="box">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div className="box">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div className="box">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div className="box">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div className="box">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div className="box">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div className="box">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div className="box">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div className="box">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        );
    }
}

render(<App />, document.getElementById('root'));

 

copyright notice
author[Wang Haihu],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205120523333181.html

Random recommended