js、react使用html2canvas页面截图并导出

最新推荐文章于 2025-04-09 14:51:07 发布

王海虎

最新推荐文章于 2025-04-09 14:51:07 发布

阅读量3.9k

点赞数 4

分类专栏： react JavaScript 文章标签： javascript react js html5 canvas

本文链接：https://blog.youkuaiyun.com/xiaohu12685/article/details/107388519

版权

本文详细介绍了如何利用html2canvas库在JavaScript和React应用中实现网页截屏，并将截图导出为图片文件。通过实例代码，展示了如何处理复杂布局、CSS样式和异步加载内容的问题，帮助开发者实现用户友好的网页截图功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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&