Print button inside Repeater

Ask the community
, , ,
1

Hello Everybody,

I have a repeater connected to my huge customer database that displays information of their bookings. Let me clarify more, the data collected from customers during their bookings gets stored in the database. Those stored data are linked to Wix table in the Management Page through which I am able to view brief details of whole of customers. In the same page, I have a search bar where we type the Guest Name looking in the table to get their full information. That means, I am using a repeater to view the data of a customer at a time.

Now, I would like to add print button for that repeater, and print only the data located inside that repeater. I don’t have any knowledge for the print functions in Wix. Any help would be highly appreciated.

Thank you
Keshab

2

If you mean, you wish to print out the repeater item data (to your printer), I think it’s not possible using native Wix code only.
But you can use an html component:

  1. Add an html component to your page

  2. Put inside a code that contains window.print() function ( https://www.geeksforgeeks.org/javascript-window-print-method/ ).

  3. On click retrieve the repeater item data using onClick() inside onItemReady () ( https://www.wix.com/corvid/reference/$w.Repeater.html#onItemReady )

  4. Post it to the html component: https://www.wix.com/corvid/reference/$w.HtmlComponent.html#postMessage

3

Hi Paudel150
We can use pdfgenratorapi or pdfshift to generate a PDF
Here’s a sample using pdfgenerationapi
https://www.salman2301.com/forum/wix-code-advance/create-pdf-using-wix-code-and-pdf-generator-api

Let me know if you need any help
thanks

4

Print Button

Create a button to function as “Ctrl + P”.
Requirement:

  • Premium Plan

  • Turn on Dev Mode

Add JavaScript

  1. Access to Dashboard → Setting → Tracking & Analytics

  2. Click New Tool → Custom

  3. Copy below code inside the Paste the code snippet here

  4. Follow the setting as the image shown

945×1263 49 KB

Add a Print Button

  1. Access the Editor , select Dev Mode , click Corvid to Trun on Dev Mode

  2. Add a Button , right-click the button element → Properties

  3. Name the ID to printButton (Optional)

  4. Click + next to onClick

  5. A function code will be added under the Page Code area at the bottom

  6. Insert below code inside the function (There will an error highlighting the #html, it will be fixed in next step.

$w(‘#html1’).postMessage(“print”);

Add HTML iframe

  1. Add iframe from Add → More → Embeds

  2. Right-click the iframe, click Properties

  3. name the iframe to html1

  4. Copy the below code, paste inside the iframe

Test
5

Thanks for this code. It kinda works. I have about 4 repeaters on the page and some text (headings) in between the repeaters. Though it prints everything, the position of the headings overlaps the text rows from the repeater. Also the header and footer print on all pages and some of the text from the repeaters is hidden behind the header and footer. Basically what I see on the screen is not what I get in the print.