eWizard.js: Show email blocks as images in exported PDFs

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

TIP: 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.