I have been trying to get a PDF to generate when the user clicks a button. I have a pdfGenerator.js and http-functions.js on the backend, and on the frontend I have code connected to the button the user will click to generate and download a PDF.
When the page loads, the browser console gives the message "Rendering Environment: browser"
Looking at the browser console once the button is clicked, I see the PDF was generated with the PDF Data URI, then a message saying Attempting to download PDF, and then the error message saying document is not defined. Ensure this code runs on the client-side. Since the environment is browser, isn't already client-side?
Below is the frontend code that I currently have in place. The memory and fetch are being used to fill out text input fields on the page that is based of random number generators and CMS dataset tables on other pages.
Code might look messy, sorry. Very new to coding and doing a 'learn as I go" approach.
https://nabattrpg.wixsite.com/luminacity/character-form
import { memory } from 'wix-storage';
import { fetch } from 'wix-fetch';
import wixWindow from 'wix-window';
$w.onReady(function () {
if (wixWindow.rendering.env === 'browser') { console.log('Rendering environment:', wixWindow.rendering.env); $w("#button10").onClick(async () => {
console.log('Button clicked, starting PDF generation process.'); const data = {
// Character Childhood
childhoodHomeDistrict: $w("#childhoodhomedistrict").value, parentsprofessions: $w("#parentsprofessions").value, pasteducation: $w("#pasteducation").value, majorchildhoodevent: $w("#majorchildhoodevent").value, // Character Past
pastgangaffiliation: $w("#pastgangaffiliation").value, pastcorpaffiliation: $w("#pastcorpaffiliation").value, pastaddiction: $w("#pastaddiction").value, pastoccupation: $w("#pastoccupation").value, pastfamilymembers: $w("#pastfamilymembers").value, familyrelationship: $w("#familyrelationship").value, pastmajorrelationshiptrauma: $w("#pastmajorrelationshiptrauma").value, // Character Present
presentfriends: $w("#presentfriends").value, presentfriendsrelationships: $w("#presentfriendsrelationships").value, presentenemiesperson: $w("#presentenemiesperson").value, presentenemiescause: $w("#presentenemiescause").value, presentenemiesbackup: $w("#presentenemiesbackup").value, presentenemiesconfrontation: $w("#presentenemiesconfrontation").value, presentromanticrelationship: $w("#presentromanticrelationship").value, presentlifegoals: $w("#presentlifegoals").value, debtamount: $w("#debtamount").value,
debtcreditor: $w("#debtcreditor").value, familydeceasedmember: $w("#familydeceasedmember").value, familydeceasedcause: $w("#familydeceasedcause").value, familymembermissing: $w("#familymembermissing").value, currentoccupation: $w("#currentoccupation").value,
// Character Personality
personality: $w("#personality").value, personalityclothingstyle: $w("#personalityclothingstyle").value, personalityhairstyle: $w("#personalityhairstyle").value, personalitymostvalueditem: $w("#personalitymostvalueditem").value, personalitymostimportantvalue: $w("#personalitymostimportantvalue").value, personalitymostvaluedperson: $w("#personalitymostvaluedperson").value, personalityfeelingpeople: $w("#personalityfeelingpeople").value, personalityfavoriteband: $w("#personalityfavoriteband").value, customcampaignbg: $w("#customcampaignbg").value
};
// Function to download the PDF
function downloadPDF(pdfDataUri) { console.log('Attempting to download PDF.');
if (typeof window !== 'undefined' && typeof document !== 'undefined') { const link = document.createElement('a');
link.href = pdfDataUri;
line.download = 'CharacterBackstory.pdf'; document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else {
console.error('document is not defined. Ensure this code runs on the client-side.');
}
}
// Function to generate the PDF
async function generatePDF(data) {
try {
const response = await fetch('https://nabattrpg.wixsite.com/luminacity/_functions/generatePDF', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
if (!response.ok) {
throw new Error(`Server error: ${response.statusText}`); }
const result = await response.json(); console.log('PDF generated:', result.pdfDataUri); console.log('PDF Data URI:', result.pdfDataUri);
if (result.pdfDataUri) { downloadPDF(result.pdfDataUri);
} else {
console.error('No PDF Data URI found in the response'); }
} catch (error) {
console.error('Error generating PDF:', error);
}
}
// Call the function to generate and download the PDF generatePDF(data);
});
} else {
console.error('This code should run on the client-side only.');
}
});
Hi Naba, If I understand correctly, your issue is most likely this:
link = document.createElement('a'); link.href = pdfDataUri; line.download = 'CharacterBackstory.pdf'; document.body.appendChild(link); link.click(); document.body.removeChild(link);
Wix doesn't allow DOM manipulation in the page code/client side/frontend. Assuming your url is a download url you can navigate to it using WixLocationFrontend. Otherwise you may have to upload the PDF to Wix and download it from there. Best, Eitan