HTML to PDF

Project Showcase
1

Hello everyone
I want to share one technique for converting HTML content to PDF
Just use AI to create an html script that converts html to pdf.
Then place it in the Glide template column so that you can dynamically update the content.
Then use this template in the Glide Integrations\Browser\HTML to URL column.
Finally, use the results from the Glide HTML to URL column in the Glide Web Embed component.
May be someone already showed this trick early, but i want to share it again.

9 Likes
2

This is very clever! Can you share the code? I can’t quite work out from the video how it works.

3

Hi, Andrew!
You can copy this template with code inside.

Also code is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML to PDF Renderer</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <style>
        #pdfPreview {
            width: 100%;
            height: 100vh;
            border: none;
        }

        #topSection {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        #downloadLink {
            font-size: 18px;
            text-decoration: none;
            color: #007bff;
            margin-left: 20px;
        }

        #pdfOptions {
            margin-bottom: 20px;
        }

        label {
            margin-right: 10px;
        }

        select, input, button {
            margin-right: 10px;
        }

        input[type="number"] {
            width: 50px;
        }

        #marginGroup {
            margin-top: 10px;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
        }

        #marginGroup h3 {
            margin-top: 0;
        }

        .marginInput {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

<div id="topSection">
    <h1>PDF Preview</h1>
    <a id="downloadLink" href="#" style="display:none;">Download PDF</a>
</div>

<div id="pdfOptions">
    <label for="orientation">Orientation:</label>
    <select id="orientation">
        <option value="portrait">Portrait</option>
        <option value="landscape">Landscape</option>
    </select>

    <label for="pageSize">Page Size:</label>
    <select id="pageSize">
        <option value="a4">A4</option>
        <option value="letter">Letter</option>
        <option value="legal">Legal</option>
    </select>

    <div id="marginGroup">
        <h3>Margins (in mm)</h3>
        <div class="marginInput">
            <label for="marginTop">Top:</label>
            <input id="marginTop" type="number" value="10" min="0" />
        </div>
        <div class="marginInput">
            <label for="marginBottom">Bottom:</label>
            <input id="marginBottom" type="number" value="10" min="0" />
        </div>
        <div class="marginInput">
            <label for="marginLeft">Left:</label>
            <input id="marginLeft" type="number" value="10" min="0" />
        </div>
        <div class="marginInput">
            <label for="marginRight">Right:</label>
            <input id="marginRight" type="number" value="10" min="0" />
        </div>
    </div>

    <button onclick="generatePdf()" type="button">Generate PDF</button>
</div>

<iframe id="pdfPreview"></iframe>

<script>
function generatePdf() {
    const { jsPDF } = window.jspdf;

    // Get selected options
    const orientation = document.getElementById('orientation').value;
    const pageSize = document.getElementById('pageSize').value;

    // Get margin values
    const marginTop = parseInt(document.getElementById('marginTop').value, 10);
    const marginBottom = parseInt(document.getElementById('marginBottom').value, 10);
    const marginLeft = parseInt(document.getElementById('marginLeft').value, 10);
    const marginRight = parseInt(document.getElementById('marginRight').value, 10);

    // Initialize jsPDF with selected orientation and page size
    const doc = new jsPDF({
        orientation: orientation,
        unit: 'mm',
        format: pageSize
    });

    // Get the dimensions of the page based on the selected size
    const pageWidth = doc.internal.pageSize.getWidth();
    const pageHeight = doc.internal.pageSize.getHeight();

    // Calculate the available width and height for content (excluding margins)
    const contentWidth = pageWidth - marginLeft - marginRight;
    const contentHeight = pageHeight - marginTop - marginBottom;

    // HTML content that will be rendered into PDF
    const htmlContent = `
        {HtmlContent}
    `;

    // Create a temporary div element to hold the content
    const tempDiv = document.createElement('div');
    tempDiv.style.width = `${contentWidth * 3.78}px`; // Convert mm to px (1mm = ~3.78px)
    tempDiv.style.padding = '10px';
    tempDiv.innerHTML = htmlContent;
    document.body.appendChild(tempDiv);

    // Convert the content to canvas and then to PDF at a higher resolution
    html2canvas(tempDiv, {
        scale: 2, // Double the resolution for sharper images
        width: contentWidth * 3.78
    }).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        let imgHeight = (canvas.height * contentWidth) / canvas.width;
        let position = marginTop;

        // Paginate the content if necessary
        while (imgHeight > contentHeight) {
            const availableHeight = contentHeight - position;
            doc.addImage(imgData, 'PNG', marginLeft, position, contentWidth, availableHeight);
            doc.addPage();
            imgHeight -= availableHeight;
            position = marginTop;
        }

        doc.addImage(imgData, 'PNG', marginLeft, position, contentWidth, imgHeight);

        // Remove the temporary div after rendering
        document.body.removeChild(tempDiv);

        // Create the PDF Blob for viewing and downloading
        const pdfBlob = doc.output('blob');
        const pdfUrl = URL.createObjectURL(pdfBlob);

        // Add `#view=FitH` to fit the PDF horizontally
        const previewElement = document.getElementById('pdfPreview');
        previewElement.src = `${pdfUrl}#view=FitH`; // Fit horizontally

        // Show the download link for the PDF
        const downloadLink = document.getElementById('downloadLink');
        downloadLink.href = pdfUrl;
        downloadLink.download = 'renderedPdf.pdf';
        downloadLink.style.display = 'block';
        downloadLink.textContent = 'Download PDF';
    });
}
</script>
</body>
</html>

Just replace {HtmlContent} with yours

3 Likes
4

Thanks loads!