Forum Discussion
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);
});
}
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.
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.
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?
