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

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...

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?

403 the resource is missing did it upload?

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: 

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.

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

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?

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

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 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.