changing Default Values of the printer using Javascript

Report · Jan 18, 2023

Hey,

I added to my project a print button to print the current slide.
for that I just execute this Js code : window.print();

the problem is that the print() method calls in the browser the built in printer.

I want set the default value of the skaling in the printer to 50% so that it fits properly.
I wrote this function but it seems not to work:

function printCurrentSlide50Percent() {
   var currentSlide = document.getElementsByClassName("slide-div")[0];
   var img = new Image();
   img.src=currentSlide.toDataURL();
   img.style.transform = "scale(0.5)";
   var printWindow = window.open();
   printWindow.document.write(img.outerHTML);
   printWindow.print();
}

any help would be appreciated

Report · Jan 18, 2023

Hello there,

I'd strongly recommed looking into using JS librarys such as html2canvas (https://github.com/niklasvh/html2canvas), and jsPDF to contrtol your output for printing. Over the years, I've used them both in order to make all things printable. 🙂 Hope everyone is having a great day.

Report · Jan 18, 2023

I'd also suggest looking into some of the awesome info related to printing HTML using a CSS printable style. Here is a decent page talking over the finer points....

https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/

Here in a bit, I'll test your code see what I can see going on for ya. What did your developer console show - any errors, etc?

Report · Jan 18, 2023

I see one thing that is a bit off....take a look at the following line of your code:

........ document.getElementsByClassName("slide-div")[0];

I know without doing any testing yet..that you might be thinking of the div ID "div_Slide".....I'm not sure there is a slide-div autogenerated......check into that.....

Report · Jan 18, 2023

Ok, had a few mins to look over your code....what it boils down to is the method of code you are attempting to use will not do what you are seeking...your heart is in the right place....but for sure is not the correct way to approach to what you are seeking.

Here are a few reasons why the code you are what you are attempting is not working:

Using the document getElemtsByClassName would give you a list of elements with the class of "slide-div" - which does not exisit. Being there are many elemetns (objects) on a Captivate slide, the [0] is only addressing the first element in the list..so if it did work..you would only see that one element in you new print related window. There is an a div ID of "div_Slide" - if you were going to use that you would use the document.getElementById("div_Slide")...even if you used that it still would not render the way you are seeking.
Next, the attempt to use .toDataURL() works only with a canvas related element..being the attempt was most likely coming up empty it would be erroring out saying something like "Uncaught TypeError: can't access property "toDataURL", currentSlide is undefined" in your dev console.

I would look for another way to accomplish what you are seeking - rather it be CSS rules, JS, or enduser...

If you ever intend on wanting to produce custom printable output, I would encourge you look over the javaScript tools such as html2PDF and jsPDF - they are work horses that allow you to build anykind of printable output you could think. Both of thoes tools work on the client side so there is no need for a webserver to serve up pages and etc. There are other tools such as pdf.js and more out there that may be of help as well.

Report · Jan 31, 2023

Hey and thank you for your answer,

I tried to use the html2PDF and jsPDF Libraries to produce custom printable output.
I have Included the Libraries successfuly and I wrote this code:

// Create a new instance of jsPDF
  var doc = new jsPDF();

  // Get the current slide
  var currentSlide = document.querySelector('.slide.current');

  // Use html2canvas to convert the current slide to canvas
  html2canvas(currentSlide).then(function(canvas) {
    // Use the canvas to create an image of the current slide
    var imgData = canvas.toDataURL('image/png');

    // Add the image to the pdf with 60% scaling
    doc.addImage(imgData, 'PNG', 0, 0, canvas.width * 0.6, canvas.height * 0.6);

    // Save the pdf
    doc.save('current-slide.pdf');
  });

but this Js code is not working. I think I have a Problem with the way the current slide is searched.
Any further help would be appreciated ^^

Report · Feb 01, 2023

What version of Captivate are you running?

Report · Feb 01, 2023

Ok, took a few mins and made this code that is working for me to make a printable PDF page that looks like the slide in landscape mode even.

function makeCpSlideToPDF() {
    html2canvas($("#project")[0], {
        onrendered: function(canvas) {
          var imgData = canvas.toDataURL('image/jpeg');
          var pdoc = new jsPDF('l', 'mm');
          pdoc.addImage(imgData, 'jpeg', 10, 10);
          // For this example, I use the slide label as the name of the PDF for the given slide.
          pdoc.save(cpInfoCurrentSlideLabel+'.pdf');
        }
    });
}

Make sure you load all of the following API libraries:

$("body").append("<script src='https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js'></script");
$("body").append("<script src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js'></script");
$("body").append('<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>');
$("body").append("<script src='https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.2.8/es6-promise.min.js'></script");

I'll post a link here in a bit of it acutally working....

Hope this gets you on track!