How to convert customed HTML to PDF

erem 0
Viewed 53

I tried to send a customed HTML (+CSS) as PDF but the pdf sent turns out black and white. I hope someone helps me out, thanks :)

here is my function :

  function sendEmails() {

  var data = getBody("DATA");
  var emailData = rowsToObjects(data);

  emailData.forEach(function (rowObject) {

    //var emailSubj = 'Konfirmasi Tagihan TUNEECA tanggal '+rowObject['TANGGAL AWAL']+' - '+rowObject['TANGGAL AKHIR']

  const pdfhtml = HtmlService.createHtmlOutputFromFile('body-pdf').getContent();
  const data = renderHtml(rowObject);
  const htmlContent = pdfhtml.replace('hereismytabledata',data).replace('$CUSTNAME',rowObject['NAMA PARTNER']);

  const blob = Utilities.newBlob(htmlContent, MimeType.HTML);
  blob.setName('Rincian Tagihan.pdf');

    var emailSubjectTemplate = 'Konfirmasi Tagihan tanggal {{TANGGAL AWAL}} - {{TANGGAL AKHIR}} '; 
    var emailBodyTemplate = HtmlService.createHtmlOutputFromFile('body-email').getContent();

    var emailSubject = renderTemplate(emailSubjectTemplate, rowObject);
    var body = renderTemplate(emailBodyTemplate, rowObject);

    const recipientEmail = rowObject['EMAIL'];

    console.log(emailSubject,body,recipientEmail)

  MailApp.sendEmail({
    to: recipientEmail,
    subject: emailSubject,
    htmlBody: body,
    attachments: [blob.getAs(MimeType.PDF)],
  });


  });
}

Here is my HTML : enter image description here

and here is the result PDF sent by email: enter image description here

ps : sorry i submit HTML as a picture during error when i tried to edit and add some codes.

email google-sheets google-apps-script css html
2 Answers

On a Windows computer, open an HTML web page in Internet Explorer, Google Chrome, or Firefox. ... Click the “Convert to PDF” button in the Adobe PDF toolbar to start the PDF conversion. Enter a file name and save your new PDF file in the desired location.

Riham Nazeer0

Just add the following line to your HTML style tag:

@media print {body {-webkit-print-color-adjust: exact;}}

Here are also the files I've used to test it, for your reference:

Code.gs

function convertHTMLtoPDF() {
  var pdfhtml = HtmlService.createHtmlOutputFromFile('body-pdf').getContent();

  var htmlBlob = Utilities.newBlob(pdfhtml, MimeType.HTML);
  htmlBlob.setName('Test.pdf');

  var pdfBlob = htmlBlob.getAs(MimeType.PDF);

  DriveApp.createFile(pdfBlob); //saves the PDF to the root of your My Drive to inspect it
}

body-pdf.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @media print {body {-webkit-print-color-adjust: exact;}}
        
        #customers {
            font-family: Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }
        #customers td, #customers th {
            border: 1px solid #ddd;
            padding: 8px;
        }

        #customers tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        #customers tr:hover {
            background-color: #ddd;
        }
        #customers th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left;
            background-color: #04AA6D;
            color: white;
        }
    </style>
</head>
<body>
    <h1>Fancy Table</h1>

    <table id="customers">
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>Company1</td>
            <td>Contact1</td>
            <td>Country1</td>
        </tr>
        <tr>
            <td>Company2</td>
            <td>Contact2</td>
            <td>Country2</td>
        </tr>
        <tr>
            <td>Company3</td>
            <td>Contact3</td>
            <td>Country3</td>
        </tr>
    </table>
</body>
</html>
user5MQc10
Related