Recently, I have been working on a system to export pictures and display them on a large screen. Because I had done a lot of excel template export and Word template export before, the first thought was to find a Java template export solution on the Internet. After Baidu, I found a plausible solution: Export Word -> Word to PDF -> PDF to PNG. This is… Seems to have a billion silk complex, so how simple to complete this demand?

If the image template that needs to be exported is first written out with the web page, then the data is rendered, and finally part of the web page is intercepted as a picture.

1. Core knowledge points

  1. html2canvasConvert the web page area to canvas.
  2. canvas.toDataURL()Convert to Base64 using the Canvas API.
  3. Use the A tag to download Base64 as a concrete image file.

2. Effect display

Web page screenshots

Image capture

3. Specific steps

1. Build a DOM template

The project framework is Vue, and building such a DOM template is relatively simple. In the code

  <div style="margin-top: 10px">
      <a-empty v-if=! "" recipeData.list.length" />
      <div class="export-area" v-else>
        <! -- Image area -->
        <div class="left"></div>
        <! -- Data area -->
        <div class="main">
          <div class="title">
            <div class="time-interval">{{ recipeData.timeInterval_dictText }}</div>
            <div class="day">{{ recipeData.recipeDate_dictText }}</div>
          </div>
          <! -- Different types of data are rendered separately -->
          <a-row class="recipe-area" v-for="key of ['other','3','6']" :key="key">
            <a-col :span="12" v-for="item of recipeMap[key]" :key="item.id">
              <div class="recipe-name">{{ item.dishName }}</div>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
Copy the code

2. Load data

Make a Get request to Get the data, and then do a series of processes to the data (such as the day of the week, etc.). The code is too long to post.

3. Export the image

Use the related knowledge points mentioned above to complete the export of the picture. The following code

 handleExportImage() {
      if (this.recipeData.list.length > 0) {
        html2canvas(document.querySelector(".export-area")).then((canvas) = > {
          // Use the Download attribute of the A tag to download directly, avoiding further downloading by the upload server
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = canvas.toDataURL();
          link.setAttribute("download".`The ${this.model.recipeDate}_The ${this.recipeData.recipeDate_dictText}_The ${this.recipeData.timeInterval_dictText}Image `);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link); // Remove the element after downloading
        });
      } else {
        this.$message.warn("No data yet!"); }},Copy the code

conclusion

Because I had done a lot of import and export of Word and Excel before, as soon as I saw the function of export, MY thinking was solidified into back-end using template export to do it. As a result, it was easier to do front-end (I didn’t do back-end either, forgive me for saying so).