canvas转图片，print-js实现打印

原创已于 2022-08-07 22:55:04 修改 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2022-08-07 22:42:32 首次发布

Javascript 同时被 3 个专栏收录

28 篇文章

订阅专栏

React

12 篇文章

订阅专栏

antd

8 篇文章

订阅专栏

该博客介绍了如何在React应用中使用print-js库将canvas转换为图片，并通过引入print.css设置打印样式，最终实现图片的打印功能。主要涉及的技术包括canvas操作、图片转base64、以及React组件生命周期方法。

1、需要安装print-js

2、canvas转成图片的实现

image.src = canvas.toDataURL("image/png");

3、打印的样式可以通过引入文件设置打印样式

css: ['../print.css']

import { Component, useRef } from 'react';
import { Layout, Button } from 'antd';
import print from 'print-js'
import '../print.less'

class ReactToPrintCpn extends Component {
    constructor() {
        super();
        this.state = {
            imgUrl: ""
        }
    }
    componentDidMount() {
        var img = document.createElement('img');
        img.src = 'https://img2.baidu.com/it/u=2024118501,374488785&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281'  //此处自己替换本地图片的地址
        img.crossOrigin = 'anonymous'
        img.onload = () => {
            var data = this.getBase64Image(img);
            // var img1 = document.createElement('img');
            // img1.src = data;
            // document.getElementById('base_img').appendChild(img1);
            // console.log(data);
        }
        console.log('componentDidMount==========');
    }
    printJS = () => {
        print({ printable: 'base_img', type: 'html', header: 'PrintJS - Form Element Selection'，css: ['../print.css'] })
    }
    getBase64Image = (img) => {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        // var dataURL = canvas.toDataURL("image/png");
        // this.setState({
        let imgUrl = this.convertCanvasToImage(canvas);
        // }) 
        document.getElementById('base_img').appendChild(imgUrl);
        // return dataURL
        // return dataURL.replace("data:image/png;base64,", "");
    }
    convertCanvasToImage = (canvas) => {
        var image = new Image();
        image.src = canvas.toDataURL("image/png");
        console.log('convertCanvasToImage==========', image);
        return image;
    }
    render() {
        console.log('render==========');
        return (
            <div>
                <Button type="button" onClick={this.printJS}>
                    Print JSON Data
                </Button>
                <div id="base_img">
                </div>
            </div>
        )
    }
}

export default ReactToPrintCpn;