HTML to PDF Conversion Failed

[SaiGaneshKrishnan]

ChromiumHtmlToPdfLib.Exceptions.ConversionException: Conversion failed ... did not get the expected response from Chromium, response '{"id":8,"error":{"code":-32000,"message":"Printing failed"}}'

If we use the below PNG image in the HTML file, then conversion is failing in linux system.

Do we know why?

[Sicos1977]

What happens when you try to save the html as pdf just from Chrome itself?

[SaiGaneshKrishnan]

Yes. Its able to save it when we do via chrome.

EMA Radar™ Report for Digital Employee Experience Management (DEX) – Vmware- Spotlight.pdf

[SaiGaneshKrishnan]

response '{"id":8,"error":{"code":-32000,"message":"Printing failed"}}'

What all cases where chromiumHTMLToPDF threw an error for the above error code? So that it would helpful for us to check on it.

And This issue seems to be intermittent.

When I retry for 5 times, then it worked but it's not guranteed that it's working every time. Can you please help us on it?

[SaiGaneshKrishnan]

`

<title>Arial TEMPLE</title> <style> * { box-sizing: border-box; margin: 0; padding: 0; font-family: Arial; font-size: 15px; font-weight: 400; }

    body {
        background-color: #000000;
    }

    .previewContainer {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 5%;
    }

    .logoRow {
        height: 80px;
        text-align: Left;
        margin-left: 5%;
        margin-right: 5%;
        margin-top: 20px;
        margin-bottom: 20px;
    }

        .logoRow img {
            max-height: 100%;
            text-align: center;
            max-width: 50%;
        }

    .contentRow {
        width: 90%;
        margin-top: 50px;
        margin-left: 5%;
        margin-right: 5%;
        display: flex;
        flex-direction: row;
        column-gap: 5%;
    }

    .infoColumn {
        width: 60%;
        display: flex;
        flex-direction: column;
        color: #ffffff;
    }

    .infoColumn .heading {
        font-weight: bold;
        height: fit-content;
        font-size: 30px;
    }

    .infoColumn .imageRow img {
        margin-top: 35px;
        margin-bottom: 30px;
        max-width: 100%;
        max-height: 100%;
    }

    .infoColumn .abstract {
        font-size: 18px;
        line-height: 30px;
        text-align: justify;
    }

    .formColumn {
        width: 420px;
        display: flex;
        margin-right: 5%;
        flex-direction: column;
        border-radius: 20px;
        border: 1px solid #80808073;
        background-color: #F2F2F2;
        height: fit-content;
    }

    .formColumn .card {
        background-color: #f5f5f500;
        padding: 25px;
    }

    .formColumn .cardHeader {
        font-size: 20px;
        padding: 5px;
        margin-top: 10px;
        margin-bottom: 15px;
        font-weight: bold;
    }

    .formColumn .cardBody {
        display: flex;
        flex-direction: column;
    }

    .formColumn .cardBody .form-group {
        width: 100%;
        padding: 10px;
    }

    .formColumn .cardBody .form-group label {
        display: block;
    }

     .formColumn .cardBody .form-control {
         width: 100%;
         padding: 7px;
         margin-top: 2px;
         border: 1px solid #e0e0e0;
         border-radius: 5px;
         box-shadow: lightgrey 0px 1px 0px;
     }

     .formColumn .cardBody .form-optIn {
         margin: 5px 0px 5px 10px;
         width: 100%;
         display: flex;
         align-items: baseline;
         gap: 10px;
     }

      .formColumn .cardBody .form-downloadButton {
         padding: 10px;
         width: 100%;
         margin-bottom: 30px;
      }

    .required::after {
        content: '*';
        color: #e53935;
        margin-left: 5px;
    }

    .downloadButton {
        width: 100%;
        padding: 10px;
        background-color: #2780EB;
        color: white;
        text-decoration: none;
        text-align: center;
        border: none;
        border-radius: 10px;
        font-size: 15px;
        font-weight: bold;
        -webkit-print-color-adjust: exact;
    }

    .downloadButton:disabled {
            background-color: lightgrey;
    }

    @media (max-width: 992px) {
        .contentRow {
            flex-direction: column;
        }

        .infoColumn {
            width: 90%;
            margin: 0 5% 50px;
        }

        .formColumn {
            width: 90%;
            margin: 0 5%;
            justify-content: center;
        }
    }
</style>

---

Arial TEMPLE

EMA Radar™ Report for Digital Employee Experience Management (DEX) – VMware Spotlight. All modern businesses are dependent on digital technologies to drive workforce productivity to achieve company performance and financial success. The principles of digital transformation and modern management suggest that digital technologies should principally support user-centric requirements and preferences to maximize business productivity. However, traditional IT management tools are not designed to fully gauge and respond to user experience issues. This Enterprise Management Associates® (EMA™) Radar Report identifies the leading DEX solution providers and spotlights VMware’s Digital Employee Experience Management solution, powered by Workspace ONE Intelligence.n nLearn how Workspace ONE Intelligence enables administrators to measure, analyze, and remediate end-user experiences with machine learning-driven root cause analysis and prebuilt integrations to support endpoints and users from anywhere.

Please complete the form to access/download the content

First Name

Last Name

Email Address

Phone Number

Asset Title Please Select Asset1

Company Name

Opt In Please Select Yes No

Opt In Date

                            <div class="form-optIn">

Opt in Message Added

Privacy Policy

Download

<script> document.addEventListener("DOMContentLoaded", () => { var button = document.getElementById('downloadButton'); const form = document.querySelector('.downloadForm'); const assetLink = form.getAttribute('action');

        if (assetLink) {
            form.setAttribute('target', '_blank');
            button.setAttribute('type', 'submit');
        } else {
            button.setAttribute('type', 'reset');
        }

        form.style.cssText = 'display: flex; flex-wrap: wrap; row-gap: 2px;';

        const formGroups = document.querySelectorAll('.downloadForm .form-group');
        const formColumn = document.querySelector('.formColumn');
        if (formGroups.length > 5) {
            formColumn.style.width = '470px';
            formGroups.forEach((formGroup, index) => {
                formGroup.style.flex = (index === formGroups.length - 1 && formGroups.length % 2 !== 0) ? '0 0 100%' : '0 0 50%';
            });
        }

        const formColumnHeight = document.querySelector('.formColumn').clientHeight;
        const image = document.querySelector('.infoColumn .imageRow img');
        const abstractHeight = document.querySelector('.infoColumn .abstract').clientHeight;
        const headingHeight = document.querySelector('.infoColumn .heading').clientHeight;
        const newImageHeight = formColumnHeight - abstractHeight - headingHeight - 60;

        image.style.height = (newImageHeight < 300 || formColumnHeight < 400) ? '400px' : `${newImageHeight}px`;
    });

function enableDownload() {
var checkbox = document.getElementById("checkbox");
var button = document.getElementById("downloadButton");
button.disabled = !checkbox.checked;
}

</script>

`

For the above HTML, Please use the attached physical image. Then it's not working.

If we have URL in the place of physical image then it worked.

But the physical image is converted into base64 and added in src tag. Then it's not working. Only for the attached images. Seems to be wierd.

[Sicos1977]

Enable Chromium logging with the EnableChromiumLogging property and look into that logfile to figure out why it is not working. It looks to me that it is a problem in Chromium and not something I can fix.

[Sicos1977]

No response... closed