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.