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

Oh, I should also point out you can adjust the width of the text box - to make the pdf display narrower...

John thanks for posting this, I know we discussed on a previous post, love it.

Hi John - 

Any idea how to pass a Storyline number variable through to the PDF? I've got your solution working for text fields, but when I try to pass number variables, it seems to break it - or prevent the PDF from printing at all. I searched to see if there's some sort of "form.getNumberField" or ".setNumber", but I'm not finding anything. In my form, I want the number for each color to print in the box, but nothing works unless I comment out those lines - as you can see in my screenshot. (Thanks again for your help!)

Hi Sherri

You are on a roll! Looking like a real JavaScript professional now... Looking good.

And one last thing! ... for anyone who needs an uneditable PDF...

I didn't want our learners to be able to edit any of the fields (like their scores, etc.) after printing, so I found that I could make the PDF uneditable by "flattening" it. It just takes one line of code right before the code to save the file: 

form.flatten();

Hi Sherri

Nice addition - love it!

Hey all! I've been using this method to create a job log (for installing my company's products), and the last two fields are acting really strangely. I can't figure out why, but those two fields are showing up as empty form fields. When I click on the form field, I can see the entry that I typed... why would it be invisible unless I click on the field? I tried adding the flatten command, but that didn't make the text visible. Thoughts?

Hey all! I've been using this method to create a job log (for installing my company's products), and the last two fields are acting really strangely. I can't figure out why, but those two fields are showing up as empty form fields. When I click on the form field, I can see the entry that I typed... why would it be invisible unless I click on the field? I tried adding the flatten command, but that didn't make the text visible. Thoughts?

Hi Sarah - I'm not sure why the fields are appearing as "invisible" either. Just to clarify, we are talking about the output pdf that is created by your JavaScript code from your pdf form template? And the field you typed in during the Storyline is there - you just can't see it unless you click on it? But what you do see is a blue form entry box? How strange is that??

OK. I would start by looking at your pdf form template. Go to the offending fields and take a look at their 'Properties' (by right ciicking the field):

As you can see, there's quite a lot of options. I would see if there is anything unusual. It sounds to me like the field is set up incorrectly - I mean it's worth checking that it is a 'text field' not some kind of other field - like a 'button field'

But, to be honest, without the files, I'm just taking wild guesses!

Hope that does help though. If you have other fields in the pdf that do work compare the two fields that don't work to them. 

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!