Make PDF Generator API open result PDF in a new window

Ask the community
,
1

Hi guys.

I have followed @yisrael-wix guide on setting up PDF Generator API and everything works fine.

Is there a way to have the generated PDF open in a NEW window?

Presently it opens in the same window and resets all the form data that was submitted to populate the PDF.

I assume the command needs to go into the backend code but I am not sure where or what command to use.

Can anyone help?

import PDFGeneratorAPI from 'pdf-generator-api'

const apiKey = 'NOT TELLING';
const apiSecret = 'NOT TELLING';
const baseUrl = 'https://us1.pdfgeneratorapi.com/api/v3/';
const workspace = "NOT TELLING";
const templateID = "NOT TELLING";

let Client = new PDFGeneratorAPI(apiKey, apiSecret)
Client.setBaseUrl(baseUrl)
Client.setWorkspace(workspace)

export async function getPdfUrl(data) {
 const {response} = await Client.output(templateID, data, undefined, undefined, {output: 'url'})
 return response
}
2

For free plans:
Instead of automatically redirecting the user to the PDF url, show a n"Open PDF" link, like this:

$w("#text1").html = `<a href="${pdfUrl}" target="_blank"> OPEN PDF</a>`;

Or you can do it with an open url button:

$w("#button1").link = pdfUrl,;
$w("#button1").target = "_blank";

On premium sites:
Either use an iframe to embed the PDF, or create a custom element that and use window.open(pdfUrl, “_blank”)

3

Thanks @jonatandor35

I have a premium site.

I don’t want the PDF opening in an iframe on the page and would prefer it to open in a new, separate window.

For the window.open(“”,“_blank”) is this being inserted into the backend code as detailed above, and if so where, or am I using it on the page itself?

Presently, I call the API on a button click as per below:

export async function generateQuote_click(event) {
$w("#total").value = +$w("#total1").value + +$w("#total2").value + +$w("#total3").value + +$w("#total4").value + +$w("#total5").value + +$w("#total6").value + +$w("#total7").value + +$w("#total8").value + +$w("#total9").value + +$w("#total10").value

 const hospital = $w('#hospital').value
 const address = $w('#address').value
 const name = $w('#name').value
 const phone = $w('#phone').value
 const email = $w('#email1').value
 const ref = $w('#finalRef').text
 const date = $w('#date').text
 const Name = $w('#iAm').value
 const Phone = $w('#contact').value
 const Email = $w('#email').value
 const product1 = $w('#longProduct1').value
 const code1 = $w('#article1').value
 const box1 = $w('#boxQTY1').value
 const qty1 = $w('#boxNum1').value
 const price1 = $w('#boxPrice1').value
 const total1 = $w('#total1').value
 const product2 = $w('#longProduct2').value
 const code2 = $w('#article2').value
 const box2 = $w('#boxQTY2').value
 const qty2 = $w('#boxNum2').value
 const price2 = $w('#boxPrice2').value
 const total2 = $w('#total2').value
 const product3 = $w('#longProduct3').value
 const code3 = $w('#article3').value
 const box3 = $w('#boxQTY3').value
 const qty3 = $w('#boxNum3').value
 const price3 = $w('#boxPrice3').value
 const total3 = $w('#total3').value
 const product4 = $w('#longProduct4').value
 const code4 = $w('#article4').value
 const box4 = $w('#boxQTY4').value
 const qty4 = $w('#boxNum4').value
 const price4 = $w('#boxPrice4').value
 const total4 = $w('#total4').value
 const product5 = $w('#longProduct5').value
 const code5 = $w('#article5').value
 const box5 = $w('#boxQTY5').value
 const qty5 = $w('#boxNum5').value
 const price5 = $w('#boxPrice5').value
 const total5 = $w('#total5').value
 const product6 = $w('#longProduct6').value
 const code6 = $w('#article6').value
 const box6 = $w('#boxQTY6').value
 const qty6 = $w('#boxNum6').value
 const price6 = $w('#boxPrice6').value
 const total6 = $w('#total6').value
 const product7 = $w('#longProduct7').value
 const code7 = $w('#article7').value
 const box7 = $w('#boxQTY7').value
 const qty7 = $w('#boxNum7').value
 const price7 = $w('#boxPrice7').value
 const total7 = $w('#total7').value
 const product8 = $w('#longProduct8').value
 const code8 = $w('#article8').value
 const box8 = $w('#boxQTY8').value
 const qty8 = $w('#boxNum8').value
 const price8 = $w('#boxPrice8').value
 const total8 = $w('#total8').value
 const product9 = $w('#longProduct9').value
 const code9 = $w('#article9').value
 const box9 = $w('#boxQTY9').value
 const qty9 = $w('#boxNum9').value
 const price9 = $w('#boxPrice9').value
 const total9 = $w('#total9').value
 const product10 = $w('#longProduct10').value
 const code10 = $w('#article10').value
 const box10 = $w('#boxQTY10').value
 const qty10 = $w('#boxNum10').value
 const price10 = $w('#boxPrice10').value
 const total10 = $w('#total10').value
 const notes = $w('#warrantyFinal').text
 const total = $w('#total').value

 const pdfUrl = await getPdfUrl({hospital, address, name, phone, email, ref, date, Name, Phone, Email, product1, code1, box1, qty1, price1, total1, product2, code2, box2, qty2, price2, total2, product3, code3, box3, qty3, price3, total3, product4, code4, box4, qty4, price4, total4, product5, code5, box5, qty5, price5, total5, product6, code6, box6, qty6, price6, total6, product7, code7, box7, qty7, price7, total7, product8, code8, box8, qty8, price8, total8, product9, code9, box9, qty9, price9, total9, product10, code10, box10, qty10, price10, total10, notes, total})
    wixLocation.to(pdfUrl);
}

I tried adding it to a few locations in both sets of code and could not get it to work.

e.g.

const pdfUrl = await getPdfUrl({hospital, address, name, phone, email, ref, date, Name, Phone, Email, product1, code1, box1, qty1, price1, total1, product2, code2, box2, qty2, price2, total2, product3, code3, box3, qty3, price3, total3, product4, code4, box4, qty4, price4, total4, product5, code5, box5, qty5, price5, total5, product6, code6, box6, qty6, price6, total6, product7, code7, box7, qty7, price7, total7, product8, code8, box8, qty8, price8, total8, product9, code9, box9, qty9, price9, total9, product10, code10, box10, qty10, price10, total10, notes, total})
    wixLocation.to(pdfUrl);

    getPdfUrl.target = "_blank";//NEW

and this in the backend code which then causes the process to break:

export async function getPdfUrl(data) {
 const {response} = await Client.output(templateID, data, undefined, undefined, {output: 'url'})
    response.target = "_blank";//NEW
 return response
}
4

No. That’s not what I mean.
So, first you should consider using a button or linked text for premium account as well, since many browsers block opening new window if it’s not done as a direct response to manual click (and in your case there’s a delay between the click and the link opening(because you need to create the file first).
So it’s highly recommended not to try to automatically open it.
To do it with a button, add a button to the page and make it hidden on load.
Then in your code write something like:

//your code...
const pdfUrl = await getPdfUrl({hospital, address, name, phone, email, ref, date, Name, Phone, Email, product1, code1, box1, qty1, price1, total1, product2, code2, box2, qty2, price2, total2, product3, code3, box3, qty3, price3, total3, product4, code4, box4, qty4, price4, total4, product5, code5, box5, qty5, price5, total5, product6, code6, box6, qty6, price6, total6, product7, code7, box7, qty7, price7, total7, product8, code8, box8, qty8, price8, total8, product9, code9, box9, qty9, price9, total9, product10, code10, box10, qty10, price10, total10, notes, total});
$w("#button1").link = pdfUrl;
$w("#button1").target = "_blank";
$w("#button1").label = "Open PDF";
$w("#button1").show();

If you still want to try to open it programmatically despite the browser blocking issues, and you have a premium account then although it can’t be done by pure Corvid, but you can create a custom element with attribute “pdf”, and use observedAttributes to detect changes in this attribute and put the window.open(newValue) inside attributeChangedCallback() and on the page itself use customElement.setAttribute(“pdf” , pdfUrl) after you get the pdfUrl.
But this is relatively complicated if you’ve never done it before.

5

Thanks @jonatandor35

I tried your above code suggestion with the hidden button and all this does it to show a button for a fraction of a second and then the screen changes to the generated PDF.

I believe this is because the

const pdfUrl = await getPdfUrl

triggers the code in the backend which then asks for the PDF to be created and when the PDF is ready it replaces the current screen.

How can I have the button appear and then the process halt until the button is clicked so essentially delay the code below:

const pdfUrl = await getPdfUrl({hospital, address, name, phone, email, ref, date, Name, Phone, Email, product1, code1, box1, qty1, price1, total1, product2, code2, box2, qty2, price2, total2, product3, code3, box3, qty3, price3, total3, product4, code4, box4, qty4, price4, total4, product5, code5, box5, qty5, price5, total5, product6, code6, box6, qty6, price6, total6, product7, code7, box7, qty7, price7, total7, product8, code8, box8, qty8, price8, total8, product9, code9, box9, qty9, price9, total9, product10, code10, box10, qty10, price10, total10, notes, total});
6

Delete this line:

wixLocation.to(pdfUrl);
7

Thanks for your help.

I approached the problem differently and followed this guide below to use an iframe and all works perfectly.

1 Like
8

I have a field for uploading Image. How to transfer that on pdf. Please help.