print and download image in React js

Question

I have code like this :

<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

I want to add button in MyCard to print img1 and button to download img1 thank you

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. — Community, Sep 13 '21 at 07:20

score 0 · Accepted Answer · answered Sep 07 '21 at 14:49

Use onClick event to handle a function that can use to download and print the image.

<ImageGrid>

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

</ImageGrid>

If you use class component then bind the function like this:

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

Function:

downloadAndPrint() {
  //function
}

For download take a look on this similar issue: How to download image in reactjs?

And to print the image you can use library like this: react-to-print

print and download image in React js

1 Answers1