在React js中打印和下载图像

Question

我有这样的代码:

<ImageGrid>
<MyCard title="first image" url="https://test.test" image="https://img1.link"  ''Button here' />
</ImageGrid>

const MyCard = props => {
return (
<a target="_blank" rel="noopener noreferrer" href={props.url}>
<div
<BasicImage alt={props.title} src={props.image} />
<p>{props.title}</p>
</div>
</a>
)
}
export default MyCard

我想在MyCard中添加按钮来打印图像1和按钮来下载图像1谢谢你

Answer 1

使用onClick事件处理可用于下载和打印图像的函数。

<ImageGrid>
<MyCard title="first image" url="https://test.test" image="https://img1.link"  onClick={() => { this.downloadAndPrint(); }} />
</ImageGrid>

如果你使用类组件，那么像这样绑定函数:

this.downloadAndPrint= this.downloadAndPrint.bind(this);

功能:

downloadAndPrint() {
//function
}

下载看一下这个类似的问题:如何在reactjs下载图像?

和打印图像，你可以使用这样的库:react-to-print