Print data from a dataset connected to a repeater

Ask the community
,
1

I am trying to have a feature on a page that will allow a user to click on a button that is attached to my repeater and print the image in that attached cell. The repeater contains images that the user can print off for free coloring pages. I can get a windows print dialog box to open and that’s it. Is it even possible for this click to fetch the data and have it open in a print dialog?

2

This is my only lead to what I need. It does not work.

$w.onReady(function () {
// When the repeater data is ready
$w(“#repeater10”).onItemReady(($item, itemData, index) => {
// Get the button in each repeater item
$item(“#button1”).onClick((event) => {
// Get the image source URL from the dataset
const imageSrc = itemData.portfolioDataset; // Replace ‘imageField’ with your actual dataset field name containing the image URL

        // Create a new window for printing
        const printWindow = window.open('', '_blank');
        
        // Write the HTML content to the new window
        printWindow.document.write(`
            <html>
                <head>
                    <title>Print Coloring Page</title>
                    <style>
                        body {
                            margin: 0;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            height: 100vh;
                        }
                        img {
                            max-width: 100%;
                            max-height: 100%;
                            object-fit: contain;
                        }
                    </style>
                </head>
                <body>
                    <img src="${imageSrc}" onload="window.print();">
                </body>
            </html>
        `);
        
        // Close the document stream
        printWindow.document.close();
        
        // Optional: Close the window after printing
        printWindow.onafterprint = function() {
            printWindow.close();
        };
    });
});

});

3

Hi, @user5452 !!

In Velo (SDK), standard HTML functionality does not work as usual, so the part of your code from window.open onwards needs to be moved into an iframe (HTML Component). Additionally, the Wix page code needs to send the image URL to the iframe using postMessage. At the same time, the iframe must include code to receive this data. Once the image data has been transferred and placed inside the iframe, calling window.print() will open the print dialog for the HTML page within the iframe, allowing you to print the desired image properly. :innocent: