Show email blocks as images in exported PDF files

Use the asImageInPdf option to show email blocks as images in exported PDFs.

asImageInPdf is useful when exporting PDFs to mobile devices, because showing blocks as images prevents formatting issues.

To export components as images in PDF:

1. Set the value of the asImageInPdf as true in the email settings.json.

   // settings.json
   
   {
     "screenshoter": {
       "asImageInPdf": true
     }
   }

2. Add the as-image attribute to the block.

   <!-- App.vue-->
   
   <template>
     <wiz-root align="center" style="background: #ffffff; width: 700px;">
       <wiz-block as-image>
         <wiz-placeholder>
           <wiz-column :width="100">
             <wiz-image src="./common/media/images/logo.png"></wiz-image>
             <wiz-text :text="$t('text_1')"></wiz-text>
           </wiz-column>
         </wiz-placeholder>
       </wiz-block>
     </wiz-root>
   </template>

As a result, after you export the email to PDF, the block contents are exported as a single image:

If asImageInPdf is false, you can select the text in a block:

Export specific blocks as images to PDF

You can export individual blocks as images with the asImageInPdf of the as-image-options attribute:

<!-- App.vue-->

<template>
  <wiz-root align="center" style="background: #ffffff; width: 700px;">
    <wiz-block as-image as-image-options="('asImageInPdf': true)">
      <wiz-placeholder>
        <wiz-column :width="100">
          <wiz-image src="./common/media/images/logo.png"></wiz-image>
          <wiz-text :text="$t('text_1')"></wiz-text>
        </wiz-column>
      </wiz-placeholder>
    </wiz-block>
  </wiz-root>
</template>

For more information about the asImageInPdf properties, see Properties of the as-image-options attribute.

The asImageInPdf in as-image-options has priority over asImageInPdf in settings.json.

For example, asImageInPdf is false in the settings.json file of an email:

// settings.json

{
  "screenshoter": {
    "asImageInPdf": false
  }
}

And a block has the asImageInPdf defined as true:

<!-- App.vue-->

<template>
  <wiz-root align="center" style="background: #ffffff; width: 700px;">
    <wiz-block as-image as-image-options="('asImageInPdf': true, 'type': 'jpeg')">
      <wiz-placeholder>
        <wiz-column :width="100">
          <wiz-image src="./common/media/images/logo.png"></wiz-image>
          <wiz-text :text="$t('text_1')"></wiz-text>
        </wiz-column>
      </wiz-placeholder>
    </wiz-block>
  </wiz-root>
</template>

As a result, the block is exported as an image to PDF.