How to convert HTML element to image in React JS

Converting HTML to an image can be a useful feature in web applications. There are several ways to accomplish this in React, but one of the most common is to use a third-party library. In this post, we’ll look at how to use the html-to-image module in React to transform HTML to an image.

Requirements

• html-to-image

Step 1: Install html-to-image

To use the html-to-image module, we need to install it first. We can do this by running the following command in our React project

npm install html-to-image

Step 2: Import the library

After installing the library, we must import it into our React component. We can do this by including the following import statement at the top of our file

import { toPng } from 'html-to-image';

Step 3: Add a reference to the HTML element

We must specify the HTML element we wish to convert HTML to an image. We can do this by using the useRef hook. We must add the following code to create a reference to the HTML element.

const elementRef = useRef(null);

The ref attribute must then be added to the HTML element that we want to convert. For example:

 <table
        ref={elementRef}
        style={{
          fontFamily: "Arial, Helvetica, sans-serif",
          borderCollapse: "collapse",
          width: "50%",
          margin: "0 auto",
        }}
      >
        <tr>
          <th
            style={{
              backgroundColor: "#04AA6D",
              padding: "12px 8px",
              textAlign: "left",
              border: "1px solid #ddd",
            }}
          >
            Company
          </th>
          <th
            style={{
              backgroundColor: "#04AA6D",
              padding: "12px 8px",
              textAlign: "left",
              border: "1px solid #ddd",
            }}
          >
            Contact
          </th>
          <th
            style={{
              backgroundColor: "#04AA6D",
              padding: "12px 8px",
              textAlign: "left",
              border: "1px solid #ddd",
            }}
          >
            Country
          </th>
        </tr>
        <tr>
          <td
            style={{
              padding: "8px",
              border: "1px solid #ddd",
              textAlign: "left",
            }}
          >
            Alfreds Futterkiste
          </td>
          <td
            style={{
              padding: "8px",
              border: "1px solid #ddd",
              textAlign: "left",
            }}
          >
            Maria Anders
          </td>
          <td
            style={{
              padding: "8px",
              border: "1px solid #ddd",
              textAlign: "left",
            }}
          >
            Germany
          </td>
        </tr>
        <tr>
          <td
            style={{
              padding: "8px",
              border: "1px solid #ddd",
              textAlign: "left",
            }}
          >
            Berglunds snabbköp
          </td>
          <td
            style={{
              padding: "8px",
              border: "1px solid #ddd",
              textAlign: "left",
            }}
          >
            Christina Berglund
          </td>
          <td
            style={{
              padding: "8px",
              border: "1px solid #ddd",
              textAlign: "left",
            }}
          >
            Sweden
          </td>
        </tr>
        <tr>
          <td
            style={{
              padding: "8px",
              border: "1px solid #ddd",
              textAlign: "left",
            }}
          >
            Centro comercial Moctezuma
          </td>
          <td
            style={{
              padding: "8px",
              border: "1px solid #ddd",
              textAlign: "left",
            }}
          >
            Francisco Chang
          </td>
          <td
            style={{
              padding: "8px",
              border: "1px solid #ddd",
              textAlign: "left",
            }}
          >
            Mexico
          </td>
        </tr>
      </table>

Note: In order to download the image with style, you must include inline style in HTML.

Step 4: Convert HTML to an image

Now that we have added a reference to the HTML element, we can use the htmlToImage library to convert it to an image. We can do this by adding the following code:

  const htmlToImageConvert = () => {
    toPng(elementRef.current, { cacheBust: false })
      .then((dataUrl) => {
        const link = document.createElement("a");
        link.download = "my-image-name.png";
        link.href = dataUrl;
        link.click();
      })
      .catch((err) => {
        console.log(err);
      });
  };

The htmlToImageConvert function is triggered when we want to convert the HTML to an image. It converts the HTML element to a PNG image using the toPng method of the html-to-image package.

Step 5: Add a button to trigger the conversion

Finally, we must include a button in our React component that will initiate the conversion. We can do this by adding the following code.

<button onClick={htmlToImageConvert}>Download Image</button>

For any query, you can get in touch with me via LinkedIn

Below you can find the sample GitHub Repository and demo on codesandbox.

GitHub - Manntrix/htmltoimage-react: How to convert HTML element to image in React JS