Tips for achieving printing with the "Fit sheet on one page" option in JavaScript

Is there a way to print a large table of data with 200 or 300 rows all on one page, similar to the Online MS Excel print option 'Fit Sheet on One Page'?

I attempted the code below:

var tble = document.createElement("table");
tble.id = "tble";
document.body.appendChild(tble);
var trtd = "<tr><td>123</td></tr>"
for (var i = 0; i < 300; i++) {
  $("#tble").append(trtd);
}
var divs = "<div id='printing'></div>";
$("#printing").append($("#tble"));

$("#printData").click(function() {
  var printToDiv = $("#printing");
  var newWin = window.open("", "print-window");
  newWin.document.open();
  newWin.document.write('<html><body onload="window.print()">' + printToDiv.innerHTML + '</body></html>');
  newWin.document.close();
  setTimeout(function() {
    newWin.close();
  }, 10);
})

How can I ensure that the printed content fits neatly onto a single page?

Answer №1

When it comes to printing with JavaScript code, the process is quite limited in terms of control. After initiating the print command, everything else is dependent on the browser and cannot be altered by your code.

One potential workaround is to prompt the user for their page size and margin settings (which are not provided by the browser), and then ensure that your content fits within these parameters by adjusting factors such as font size. You can use jQuery's outerWidth and outerHeight functions to determine the rendered size in pixels, and utilize the standard assumption of 96dpi (pixels / 96 = inches) for further calculations.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How do you structure `en.js` or `ja.js` files for lazy loading in vue-i18n?

What is the correct format for lazy loading en.js or ja.js? The code below is not working: // en.js export default { title: 'Title', greeting: 'How are you' }; and import Vue from 'vue'; import Inven ...

What is the proper way to utilize "three.module.js"?

I am currently learning how to utilize modules and decided to start with a simple example. However, I encountered an issue where the script does not want to run. I must be missing something crucial, but I can't seem to figure out what it is. I have tr ...

Unable to display response following the submission of a POST request

I'm encountering an issue when attempting to display the response of a post request using node and request. While I can see the response in the console within the service, it does not make its way to the controller. Any insights on why this may be hap ...

Step-by-step guide on achieving a radiant glow effect using React Native

I am looking to add a glowing animation effect to both my button and image elements in React Native. Is there a specific animation technique or library that can help achieve this effect? While I have this CSS style for the glow effect, I am uncertain if ...

Troubleshoot: JQuery unable to change background color in code

Is there a way to use JQuery to cycle through an array of colors and change the background color of a page whenever a specific button is clicked? I've tried implementing it with the following code, but it doesn't seem to work as expected. Here&a ...

Issues with z-index in a multi-column menu using React-Router are causing unexpected behavior

I am currently working on a multi-tier, multi-column menu created using the https://github.com/kontentino/react-multilevel-dropdown library. However, I am facing an issue where the submenu items are appearing under the main items despite several attempts t ...

A guide on retrieving the upload status of a file using an AJAX post request

Is there a way to retrieve the status of uploaded files when the user cancels the process while uploading multiple files using an ajax call? This is how I am currently making the ajax request to upload files: var request = $.ajax({ url: 'file ...

Error occurs in Windows script while running a project installed globally

Upon installing my project globally, I encountered a Windows Script Host error. https://i.stack.imgur.com/unFVu.png What steps can I take to resolve this issue? The following is my JavaScript code snippet: Object.defineProperty(exports, "__esModule ...

JavaScript does not alter the text box for the default dropdown value

My webpage has three elements: a text box named txtSubTotal, a drop-down menu named discount, and another text box called txtGrossTotal. The txtSubTotal updates when the user clicks on the 'ADD' button, while the txtGrossTotal updates based on th ...

What is the best way to call upon a necessary module from various files?

When working with Node.js, I am using Socket.io in my main.js file like this: const io = require('socket.io')(http); Additionally, I have a separate "sub" file called api.js where I delegate some of my business logic. To include this file, I us ...

Navigating with buttons in the Material UI Drawer

I have implemented a Material UI drawer with some modifications. The original code used buttons, but now I want to navigate to a new page when a button is clicked. For example, clicking on the 'INBOX' button should take me to a page '/new&ap ...

Is it possible to modify a scss style in Prestashop?

I have encountered an issue while using a default theme in Prestashop 1.6 that I need assistance with. My goal is to move the navbar up by 25px. I understand that I should make changes to #block_top_menu { padding-top: 25px; } in blocktopmenu.scss, which ...

Why do React JS array objects reset when being updated?

I am working with an array of objects that contain IDs and prices. Whenever the onClick event is triggered, it updates the price of a specific object. However, upon clicking the event again, I noticed that the previously updated item's price gets rese ...

Learn how to customize button styles in ExtJS with the pressedCls configuration option

Is there a way to change the color when a button is pressed? I tried using the pressedCls config but it didn't work. How can I fix this issue or is there another method to set the CSS when a button is pressed? Thank you so much! Javascript: Ext.crea ...

What are some ways to make source code more visually appealing on an HTML/JSP page as it is being

I've recently created a webpage with some Java source code, neatly organized within blocks. However, I'm looking to enhance its appearance so it truly looks like Java code. Take a look at my page's code here for reference: Are there any onl ...

Looking for a solution to organize the dynamically generated list items in an HTML page

I am currently working on a movie listing website where all the movies are displayed in sequence based on their #TITLE#. The webpage is generated automatically by the software using a template file. Here is the section of code in the template file that sho ...

Caution: The React Hook useEffect is missing a required dependency

What is the best way to eliminate the warning "React Hook useEffect has a missing dependency" while developing my code? Here is a snippet of the code that triggers the warning: useEffect(() => { if(inactive){ document.querySelect ...

The media does not need to be applied to the ".nav__btn" class

How can I hide an element with the ".nav__btn" class by setting its display to none when the screen width is at least 768px? I tried the following media code but it doesn't work. Media Code @media (min-width: 768px) { .nav__btn { display: ...

Angular directive preventing default action but Chrome still loading image on drag

Has anyone encountered an issue with an angular directive that is not successfully preventing Chrome's default action? Below is the code for the directive in question: app.directive('fileDrag', function () { return { restrict: ' ...

"Master the art of drag and drop in Dojo: Implementing a handler for the drop

My list is structured as follows: <div dojoType="dojo.dnd.Source" id="myList"> <div class="dojoDndItem">item 1</div> <div class="dojoDndItem">item 2</div> <div class="dojoDndItem">item 3</div> </div ...