pdf creation help

Ask the community
,
1

Hi all,

Total nube here. I’m reasonably familiar with the front end of Wix, but currently am learning and know just enough to be really dangerous with some backend things.

I’m creating a page where the user can make their own Lost / Found poster. I’ve checked out the tutorial here: https://www.wix.com/velo/forum/tips-tutorials-examples/example-pdf-generator

I have made the pdf template with 4 fields in it: petDescription, whereWhen, contactInfo, phone. It’s published and ready to go.

The NPM installed no problem.

Back end code (pdf.jsw) is:

import PDFGeneratorAPI from ‘pdf-generator-api’

const apiKey = ‘blah blah blah’ ;
const apiSecret = ‘blah blah blah’ ;
const baseUrl = ‘https://us1.pdfgeneratorapi.com/api/v3/’ ;
const workspace = ‘blah blah blah’
;
const templateID = ‘123456’
;

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
}

On the page where the user canmake their own poster, I’ve set each input component up (# petDescription, #whereWhen, #contactInfo, #phone) as well as a Submit button (#button1). #button1 is defined as an event: generatePoster_click. There is a second button (#button2) which opens the completed pdf page (or at least that’s the plan).

I’m running into trouble with the code on that page. I currently have:

import { pdf } from ‘backend/pdf.jsw’ ;

export async function generatePoster_click(event) {petDescription, whereWhen, contactInfo, phone}
const petDescription = $w( ‘#petDescription’ );
const whereWhen = $w( ‘#whereWhen’ );
const contactInfo = $w( ‘#contactInfo’ );
const phone = $w( ‘#phone’ );

const pdfUrl = await getPdfUrl({petDescription, whereWhen, contactInfo, phone});
$w( “#button2” ).link = pdfUrl;
$w( “#button2” ).target = “_blank” ;
$w( “#button2” ).label = “Open PDF” ;
$w( “#button2” ).show();
}

I’m getting an error that the ‘await’ is outside the async. And I may have other issues that I’m unaware of.

Help and solutions would be appreciated!

Thanks

Jana

2

Delete the part in red:

export async function generatePoster_click(event) {petDescription, whereWhen, contactInfo, phone}
3

I’ll try that – thanks!

4

Hi JD,

I made the change and it got rid of the error re: outside the async. But it created another. On line 4, the error highlights ‘const’ and says it is a “Parsing error: unexpected token”

1 import { pdf } from ‘backend/pdf.jsw’ ;
2
3 export async function generatePoster_click(event)
4 const petDescription = $w( ‘#petDescription’ );
5 const whereWhen = $w( ‘#whereWhen’ );
6 const contactInfo = $w( ‘#contactInfo’ );
7 const phone = $w( ‘#phone’ );
8
9 const pdfUrl = await getPdfUrl({petDescription, whereWhen, contactInfo, phone});
10 $w( “#button2” ).link = pdfUrl;
11 $w( “#button2” ).target = “_blank” ;
12 $w( “#button2” ).label = “Open PDF” ;
13 $w( “#button2” ).show();
14 }

5

@jana9340 add a { in the end of line 3.

6

@jonatandor35 Thanks JD, you’ve been very helpful!

Can I bug you for another query?

After inserting the {, the error resolved, but of course a new one popped up. :slight_smile:

On the page code, I’m getting an ‘undefined element’ error on the getPdfUrl (after await in line 9). On the back end code, I’m not getting the same error about the undefined element. (snippet below)

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

Help is welcome, and if there’s a link to a tutorial I should check instead of bugging you, that’d be great also. :slight_smile:

jana

7

@jana9340 I don’t see where you’re importing the getPdfUrl to the front-end.

8

@jonatandor35 Thanks! I added it in a the error resolved.

9

You’re welcome :slight_smile:
Maybe you should post your final code here to help other forum visitors.