Forum Discussion

EhiagheBraimah's avatar
EhiagheBraimah
Community Member
11 days ago

Calling all Articulate JavaScript buffs

Hi I have been trying to get a PDF to download using JavaScript, but I ran into the following errors:

1. )  Failed to load resource: net::ERR_FILE_NOT_FOUND               PDFen.pdf:1                           
       


2.) Uncaught (in promise) TypeError: Failed to fetch
    at fillForm (user.js:51:30)
    at Constructpdf (user.js:39:9)

3.) Uncaught SyntaxError: "undefined" is not valid JSON
    at JSON.parse (<anonymous>)
    at e.setAsAdornable (slides.min.js:2:567513)
    at e.<anonymous> (slides.min.js:2:567170)
    at Array.forEach (<anonymous>)
    at e.adornSvg (slides.min.js:2:567145)
    at e.whenHtmlReady (slides.min.js:2:744345)


I would really love some help and guidance (steps potentially) on how to solve these errors! If more information is required, please do not hesitate to ask!

Thank you!!!






Here is my code:

//Retrieve Player Variables
const date = new Date();
let day = date.getDate();
let month = date.getMonth() + 1;
let year = date.getFullYear();
let currentDate = `${day}-${month}-${year}`;
let player = GetPlayer();
//lSlider1 = player.GetVar("Slider1");
var results = [
  player.GetVar("Slider1"), player.GetVar("Slider2"), player.GetVar("Slider3"), player.GetVar("Slider4"), player.GetVar("Slider5"),
  player.GetVar("Slider6"), player.GetVar("Slider7"), player.GetVar("Slider8"), player.GetVar("Slider9"), player.GetVar("Slider10"),
  player.GetVar("Slider11"), player.GetVar("Slider12"), player.GetVar("Slider13"), player.GetVar("Slider14"), player.GetVar("Slider15"), 
  player.GetVar("Slider16"), player.GetVar("Slider17"), player.GetVar("Slider18"), player.GetVar("Slider19"), player.GetVar("Slider20"), 
  player.GetVar("Slider21"), player.GetVar("Slider22"), player.GetVar("Slider23"), player.GetVar("Slider24"), player.GetVar("Slider25"), 
  player.GetVar("Slider26"), player.GetVar("Slider27"), player.GetVar("Slider28"), player.GetVar("Slider29"), player.GetVar("Slider30"),
  player.GetVar("Slider31"),
  ]; 
var reflect1 = player.GetVar("Reflect1");
var reflect2 = player.GetVar("Reflect2");
var reflect3 = player.GetVar("Reflect3");
var reflect4 = player.GetVar("Reflect4");
Constructpdf();


async function Constructpdf() {
//Dynamically load pdf-lib JavaScript module
  await loadMods();
//Call the fillForm asynch function
  await fillForm();
}
async function loadMods() {
await import("https://unpkg.com/pdf-lib/dist/pdf-lib.js");
}
 
async function fillForm() {
//Read pdf form

  const { PDFDocument } = PDFLib;
  const formUrl = 'PDFen.pdf';
  
  const formPdfBytes = await fetch(formUrl).then (res => res.arrayBuffer());
  const pdfDoc = await PDFDocument.load(formPdfBytes);
  const form = pdfDoc.getForm();
  alert ("Helb");
//Get Slider Thumb image
  const pngUrl = 'thumb.jpg';
  const pngImageBytes = await fetch(pngUrl).then((res) => res.arrayBuffer());
  const pngImage = await pdfDoc.embedPng(pngImageBytes);
   
//Get field names
  const dateField = form.getTextField('Date');
  const thumbs = [[
  form.getButton('Th1'),
  form.getButton('Th2'),
  form.getButton('Th3')],
  [
  form.getButton('Th4'),
  form.getButton('Th5'),
  form.getButton('Th6')],
  [
  form.getButton('Th7'),
  form.getButton('Th8'),
  form.getButton('Th9')],
  [
  form.getButton('Th10'),
  form.getButton('Th11'),
  form.getButton('Th12')],
  [
  form.getButton('Th13'),
  form.getButton('Th14'),
  form.getButton('Th15')],
  [
  form.getButton('Th16'),
  form.getButton('Th17'),
  form.getButton('Th18')],
  [
  form.getButton('Th19'),
  form.getButton('Th20'),
  form.getButton('Th21')],
  [
  form.getButton('Th22'),
  form.getButton('Th23'),
  form.getButton('Th24')],
  [
  form.getButton('Th25'),
  form.getButton('Th26'),
  form.getButton('Th27')],
  [
  form.getButton('Th28'),
  form.getButton('Th29'),
  form.getButton('Th30')],
  [
  form.getButton('Th31'),
  form.getButton('Th32'),
  form.getButton('Th33')],
  [
  form.getButton('Th34'),
  form.getButton('Th35'),
  form.getButton('Th36')],
  [
  form.getButton('Th37'),
  form.getButton('Th38'),
  form.getButton('Th39')],
  [
  form.getButton('Th40'),
  form.getButton('Th41'),
  form.getButton('Th42')],
  [
  form.getButton('Th43'),
  form.getButton('Th44'),
  form.getButton('Th45')],
  [
  form.getButton('Th46'),
  form.getButton('Th47'),
  form.getButton('Th48')],
  [
  form.getButton('Th49'),
  form.getButton('Th50'),
  form.getButton('Th51')],
  [
  form.getButton('Th52'),
  form.getButton('Th53'),
  form.getButton('Th54')],
  [
  form.getButton('Th55'),
  form.getButton('Th56'),
  form.getButton('Th57')],
  [
  form.getButton('Th58'),
  form.getButton('Th59'),
  form.getButton('Th60')],
  [
  form.getButton('Th61'),
  form.getButton('Th62'),
  form.getButton('Th63')],
  [
  form.getButton('Th64'),
  form.getButton('Th65'),
  form.getButton('Th66')],
  [
  form.getButton('Th67'),
  form.getButton('Th68'),
  form.getButton('Th69')],
  [
  form.getButton('Th70'),
  form.getButton('Th71'),
  form.getButton('Th72')],
  [
  form.getButton('Th73'),
  form.getButton('Th74'),
  form.getButton('Th75')],
  [
  form.getButton('Th76'),
  form.getButton('Th77'),
  form.getButton('Th78')],
  [
  form.getButton('Th79'),
  form.getButton('Th80'),
  form.getButton('Th81')],
  [
  form.getButton('Th82'),
  form.getButton('Th83'),
  form.getButton('Th84')],
  [
  form.getButton('Th85'),
  form.getButton('Th86'),
  form.getButton('Th87')],
  [
  form.getButton('Th88'),
  form.getButton('Th89'),
  form.getButton('Th90')],
];

const reflectField1 = form.getTextField('VFactor');
const reflectField2 = form.getTextField('VCompromise');
const reflectField3 = form.getTextField('VNeed');
const reflectField4 = form.getTextField('VMotivate');

//Fill in form
  dateField.setText(currentDate);
  console.log(results, reflect1, reflect2, reflect3, reflect4);
  
  for(i=0; i<30; i++) {
  
  if (results[i] == 1) {
    thumbs[i][0].setImage(pngImage);
  } else if (results[i] == 2) {
      thumbs[i][1].setImage(pngImage);
  } else if (results[i] == 3) {
      thumbs[i][2].setImage(pngImage);
  }
  
  }
  reflectField1.setText(reflect1);
  reflectField2.setText(reflect2);
  reflectField3.setText(reflect3);
  reflectField4.setText(reflect4);
  
//Save form
  const pdfBytes = await pdfDoc.save();
//Download the form
await import('https://unpkg.com/tiny-save-as/dist/tiny-save-as.esm.js')
.then(({default: saveAs}) => {
  const blob = new Blob([pdfBytes], {type: 'application/octet-stream'});
  saveAs(blob, "PDFen.pdf");
  ;
})
.catch((err) => {
  console.log(err);
});
  }

Articulate 360
community
storyline 360
  • JohnCooper-be3c's avatar
    JohnCooper-be3c
    Community Member
    6 days ago

    Hi

    The code you have here almost certainly came from a demonstration I have on my website that uses the pdf-lib Javascript library to create a downloadable survey in Storyline. I have published links to this demo (or an earlier version) in several threads on eLearning Heroes. But I don't think I've ever published the code itself - so I suspect the code may have been copied using browser debug tools. No worries doing that - but it does mean you don't really get all the elements in the solution 

    If you let me know exactly what you are trying to do I can certainly help. It looks like you have 31 sliders in your Storyline code! and you are reading these 31 values into your array "results"  but I don't know what you are then trying to do with that data.

  • JohnCooper-be3c's avatar
    JohnCooper-be3c
    Community Member
    6 days ago

    In your code:

      const { PDFDocument } = PDFLib;
      const formUrl = 'PDFen.pdf';
      
      const formPdfBytes = await fetch(formUrl).then (res => res.arrayBuffer());
      const pdfDoc = await PDFDocument.load(formPdfBytes);
      const form = pdfDoc.getForm();
      alert ("Helb");

    You are attempting to open an existing pdf form template file "PDFen.pdf" and read the contents into a byte array. You are then using pdf-lib routines to read the pdf template from the byte array and create a new pdf form "form".

    Your error message " Failed to load resource: net::ERR_FILE_NOT_FOUND               PDFen.pdf:1" indicates that your JavaScript code cannot find the pdf form template file.

  • EhiagheBraimah's avatar
    EhiagheBraimah
    Community Member
    4 days ago

    Hi John, thanks for responding.

    Yes I am aware the file cannot be found. To my knowledge, the pdf file has to be present with the storyline file which gets uploaded to root after publishing. I publish to SCORM2004 due to some research, and it working for someone else.

    I have put the pdf file along side the storyline file but it cannot still be found so I am wondering if there is something I am missing.

    So far my problem is more about the process after all the coding is done. After coding, What are the steps taken to publish a course correctly?
    How do I get the pdf to be found?

Related Content