Creating downloadable pdf files in Storyline - an update on earlier methods

Thanks to John for the wonderful idea. I did tweak this a bit. My requirment was to just create a pdf with the user responses for many text entry boxes. However I am stuck at one point. Once the text overflows the page, how do I go to the next page? Any javascript experts who can help with this?

Here is the javascript code:

   //Retrieve Player Variables
var player = GetPlayer();
learnerName = player.GetVar("name");
learnerEmail = player.GetVar("email");
learnerMessage = player.GetVar("message");   

createPdf();


    async function createPdf() {
    
    await import("https://unpkg.com/pdf-lib@1.4.0/dist/pdf-lib.min.js")
    
    
     const { PDFDocument, StandardFonts, rgb } = PDFLib;
      // Create a new PDFDocument
      const pdfDoc = await PDFDocument.create()

      // Embed the Times Roman font
      const timesRomanFont = await pdfDoc.embedFont(StandardFonts.TimesRoman)

      // Add a blank page to the document
      const page = pdfDoc.addPage()

      // Get the width and height of the page
      const { width, height } = page.getSize()

      // Draw a string of text toward the top of the page
     
      const fontSize = 30;
     
    page.setFontSize(fontSize);
    const startX = 50;
    const maxWidth = width - 10;
    const lineSpacer = 8;
  

    let startY = height - 130;
    
    const textContent = learnerName + ' ' + learnerEmail 
                        + ' ' + learnerMessage;
       // page.setFontSize(fontSize);
    //page.drawText(textContent,{x:startX, y:startY});
   const lines = page.drawText(textContent, {
      x: startX,
      y: startY,
      color: rgb(0, 0, 0),
      maxWidth,
      lineHeight: fontSize + 5
    });
    pdfDoc.addPage();
      // Serialize the PDFDocument to bytes (a Uint8Array)
      const pdfBytes = await pdfDoc.save()
    
            // Trigger the browser to download the PDF document
      download(pdfBytes, "Sample.pdf", "application/pdf");
    }

Thanks!

Hi there,

I've been trying to create this PDF here and have been able successfully tweak it. 

However, I've run into a separate issue: I was trying to flatten the PDF (so as to prevent it being changed after it was downloaded). However, this command didn't work (in my case):

form.flatten();

Does anyone know what can be done? Appreciate any support!

Thanks a lot,

John

Is anyone else having issues with this suddenly not working in Review? I haven't loaded to my LMS to test there, but I've tried uploading the original NoteTaker story with the original PDF in its root folder into Review and the button does nothing now. That makes me think that it isn't a problem with the JavaScript in the course I'm working on. Thoughts?

Still working here, but I'm using a different PDF library.

I recommend doing the following:

1. Open console (on your browser (e.g. Chrome)).
2. Check the error message (you'll likely receive).
3. Copy your Java Script code into Chat GPT and ask Chat GPT to debug it.

I've had some pretty cool experiences with Chat GPT this way. I'd say it's quite likely it'll be able to help you, too.

I found the console and looked at the Storyline file in Review. I see an error saying that it failed to load the PDF "Failed to load resource: the server responded with a status of 403 ()" and there's a web address. I clicked it, which led to this message: 

403 the resource is missing did it upload?

Hi Sarah

Sorry you are having difficulties with the demo. I must admit I hadn't tried it in Articulate Review, as I load demos on my own cloud server - but I just tested it and it seemed to work fine. As Phil says, the 403 error indicates there's some problem opening the file rather than the file being missing.

My zip file content looks like this:

with the "Notes Template.pdf" in the root folder with the story,html file.

I'm not sure what else I can suggest.

If the problem persists I can maybe record a short video of my screen as I load the demo to Review. If that would help?

Just a quick thought. The NotesTemplate.pdf file must be a pdf form file as the JavaScript reads the field information from the file. You could just check the file opens OK as a form... I doubt that is the problem - but worth checking...

The specifics: I'm working on a tool that allows learners to create a job plan based on the specifics of an installation/jobsite. They answer questions and the course/tool builds out a plan using variables.

I've gotten the full plan to populate on a single slide, and I can print that slide. My preference, though, is to send the plan to a PDF using JavaScript. I publish for Review locally and add the PDF form to the zip file. When I upload it and check the JavaScript by clicking the button it's attached to, I get this error:

AccessDeniedAccess Denied0250CKGY273YHNBTyseYqDxfnAUPrgDNqmEbuhDBQbOcME2zQKaxYYocD9/yxbtXXw0tQWwvUaf27zQymsPEFvA9wYiyRPyf5fikeQ==

Any thoughts about why this might be happening? I'm attaching the file in case you are able to look at it. Help would be much appreciated! I'll keep messing with a test file and see if I can figure it out in the meantime. :)