Save div as Image in Vue

We have previously seen how a div element can be saved to a file. In this post we will see how we can save div tag contents as an image in Vue.

How do we print the `div`?

Here are the steps at a high level -

Draw contents of div to canvas. We use a library called html2canvas to create canvas from a specified div.
Generate image from canvas
Download canvas as an image

The print here is equivalent to “taking the screenshot” of a particular section of your app.

Code

The example code is on Codepen. Explanation below.

Create HTML

Create some html that includes content that needs to be printed.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


<div id="app" class="container text-center">
  <h4 class=""><strong>Example to Print div in Vue</strong></h4>
  <div>
    <a href="http://techformist.com/save-div-image-javascript" target="_blank"
      >Accompanying Blog Post</a
    >
  </div>
  <button @click.preventDefault="printThis">Print!</button>

  <div class="text-center" ref="printcontent">
    <div><strong>Example content to print</strong></div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </div>
    <svg width="100" height="100">
      <circle
        cx="50"
        cy="50"
        r="40"
        stroke="green"
        stroke-width="4"
        fill="yellow"
      />
    </svg>
  </div>
</div>

The objective is to print all content within the div with ref=printcontent.

Script

First, we include reference to the HTML2Canvas CDN.

Next, create some Vue code -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


new Vue({
  el: "#app",

  methods: {
    async printThis() {
      console.log("printing..");
      const el = this.$refs.printcontent;

      const options = {
        type: "dataURL",
      };
      const printCanvas = await html2canvas(el, options);

      const link = document.createElement("a");
      link.setAttribute("download", "download.png");
      link.setAttribute(
        "href",
        printCanvas
          .toDataURL("image/png")
          .replace("image/png", "image/octet-stream")
      );
      link.click();

      console.log("done");
    },
  },
  data: () => ({}),
});

The code is largely self-expanatory -

Get reference to the element that needs to be printed - const el = this.$refs.printcontent
Generate canvas from element - const printCanvas = await html2canvas(el, options);

Convert canvas to an image

1
2
3


printCanvas
  .toDataURL("image/png")
  .replace("image/png", "image/octet-stream");

Generate a link that will prompt user to download image when clicked - const link = document.createElement("a");. Point the link to the image generated in the previous step

End Result

That’s about it! Click on Print! button to download image.

print-div-contents-vue-canvas

Note that the image in the content cannot be from another domain since that will taint the canvas (and the image will not be rendered).