Skip to main content
Z
Zin27040520jl2c
Participating Frequently
January 18, 2023
Question

changing Default Values of the printer using Javascript

  • January 18, 2023
  • 4 replies
  • 603 views

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

This topic has been closed for replies.

4 replies

OH_CP_Lover_&_Hacker
OH_CP_Lover_&_Hacker
Inspiring
January 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:

 

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

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

    Z
    Zin27040520jl2cAuthor
    Participating Frequently
    January 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 ^^

    OH_CP_Lover_&_Hacker
    OH_CP_Lover_&_Hacker
    Inspiring
    February 1, 2023

    What version of Captivate are you running?

    OH_CP_Lover_&_Hacker
    OH_CP_Lover_&_Hacker
    Inspiring
    January 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.....

    OH_CP_Lover_&_Hacker
    OH_CP_Lover_&_Hacker
    Inspiring
    January 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....

     

    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?

    OH_CP_Lover_&_Hacker
    OH_CP_Lover_&_Hacker
    Inspiring
    January 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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices