?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;

總結

以上是生活随笔為你收集整理的canvas转图片，print-js实现打印的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。