Viewing HTML web pages using Mozilla Firebox

Printing an HTML table with lots of content has been a challenge for me. Google Chrome didn't work, so I switched to Mozilla Firefox. However, now Firefox is breaking the page inside the table. My question is how can I trigger print preview in Firefox using Javascript (calling window.print(); doesn't show print preview).

https://i.sstatic.net/09FA3.png

I noticed that Mozilla automatically sets header and footer, but is there a way to customize the header for printing? Or perhaps disable it by default when users click the print button.

javascriptjqueryhtmlcssmozilla

Answer №1

Would you like to try this technique?

Simply include the content you want to print inside a div with an id:

<div id="printableArea">
  <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="Print this div!" />

Next, let's set up a basic javascript function:

function printDiv(divName) {
 var printContents = document.getElementById(divName).innerHTML;
 var originalContents = document.body.innerHTML;

 document.body.innerHTML = printContents;

 window.print();

 document.body.innerHTML = originalContents;

}

You can also view this example on jsfiddle here. This fiddle includes options for header and footer customization.

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

Is there a substitute for toObservable?

Attempting to utilize RxJS, however the example I have appears to be outdated. The code I'm looking to execute is: myInput.addEventListener("keyup", () => { }, 200); However, it seems that the toObservable method has been removed. Despite my effo ...

jqueryrxjs

Using a directive to insert HTML content from a separate file into a div element

As a newcomer to angularjs, I am experimenting with appending html from another file using my directive. The goal is to only do this if there is a successful response from the server after an http request. The current approach involves defining my directi ...

angularjshtmlangularjs-directive

Tips for eliminating the glowing effect when pressing down on the thumb of the material ui slider

Visit Material-UI documentation for Slider component. Despite setting the disabled flag for the entire slider, the thumb continues to show a halo effect when clicked. ...

javascripthtmlcssreactjsmaterial-ui

WordPress footer widgets appearing misaligned

I have made a child theme for Twenty Thirteen and am in the process of making some updates to it. My development site is essentially a replica of the live site. The only modification I made in the footer section was to change the widget title styles, but I ...

htmlcsswordpress

es-lint is issuing a warning about the presence of multiple modules within the node_modules directory that have names differing only in their casing

After reviewing all my import statements, I found that everything looks correct. The only unusual import I have is react-bootstrap, which I import as: import { Jumbotron, Button } from 'react-bootstrap'; I'm using the Jumbotron and Button ...

javascriptnode.jsexpressmongooseeslint

Ensure there is a blank space preceding a table only when the table is being physically printed

I am currently in the process of developing a report card system for students in grades K-6. The report card will display specific tables based on the student's grade level. For example, a 5th grader may not have a "Reading Stage" table displayed on t ...

htmlcss

Remember to follow the camel case convention when utilizing element.tagName(String) with jSoup

Looking to change the name of an HTML tag using Jsoup in the following way - element.tagName("p:panelGroup"); But when I run this code, the output changes the case and I end up with p:panelgroup. Is there a method to preserve the camel case in the resul ...

htmljsoup

Styling TD with CSS for bottom border

Is there a way to adjust the bottom border of a TD element in CSS? The image provided demonstrates the desired effect, but with a slight overhang. I need the border to align perfectly with the width of the blue cell above it. This is the code snippet I am ...

htmlcss

Firebase allows for the updating of an object within a nested array

Within Firestore, I have a Document that includes a property named "items" which is of type array. This array consists of ShoppingItem objects with the specified structure: export class ShoppingItem { id?: string; name: string; checked = false; } To ...

javascriptangulargoogle-cloud-firestoreangularfire2

How can ternary conditional operators be transformed into if statements?

When dealing with minified code like this, f&&!f.error?k.button.b==k.button.c.G?k.button.Q(b,e,f,c,d):k.button.b==k.button.c.o&&k.button.P(b,e,f,c,d):(console.error(f),f=f.error.message||chrome.i18n.getMessage("error_tooltip"),k.button.v(b ...

javascriptsyntaxif-statementconditional-operator

Encountering difficulties when attempting to inject NotifierService into an Angular Service

I am attempting to incorporate Angular NotifierService into my service class so that I can display error notifications in case of any exceptions from the service side. I attempted to inject a bean of NotifierService in the constructor of my service class, ...

javascriptangulartypescript

The texture appearance becomes unusual when using a ThreeJS point light

I utilized ThreeJS, specifically React Three Fiber, to construct a 3D Canvas. After adding a glb model, point light, and ambient light, the outcome was disappointing. https://i.sstatic.net/6vHaOKBM.png Why does the texture appear so jagged? Could it be ...

javascriptreactjsthree.jsgraphicsreact-three-fiber

What is the process for extracting specific text from a web page source using Python with Selenium?

The following is the HTML source code: <div class="dropdown-popup"> <a href="/integrations/sources/" class="dropdown-item">Sources</a> <a href="/integrations/destinations/" cla ...

htmlpython-3.xseleniumselenium-webdrivercss-selectors

Transmit an Array using Ajax and retrieve it on an ASP Classic page

I am facing a challenge where I need to pass an array using AJAX on an ASP page. After trying to send it as GET method and checking the data being received, I noticed that only the LAST record of the array is being processed by ASP. How can I successfu ...

javascriptjqueryarraysajaxasp-classic

Refresh a table using jQuery Mobile, PHP, and AJAX without having to reload the entire page by clicking a

Currently, I am working on a web app that includes a pop-up feature. When the user clicks on the pop-up to close it, I want the table data to refresh without having to reload the entire page. This pop-up allows users to modify existing data in the table. A ...

javascriptphpajaxjquery-mobile

Event triggered only upon initial click

I am experiencing an issue with my category list. When I click on a category to trigger an AJAX request for the first time, the request does not go through. However, when I click on the same category a second time, it works perfectly. Below is the code sni ...

javascriptphpjqueryajax

When should we utilize the React.Children API in React applications?

Exploring the potential use cases of the React.Children API. The documentation is a bit confusing for me (Using React v.15.2.0). https://facebook.github.io/react/docs/top-level-api.html#react.children According to the documentation, this.props.children ...

javascriptreactjs

Retrieve the id and value attributes of a checkbox using the success callback function in jQuery AJAX

I'm currently working on a web application project using JSP, jQuery, AJAX, MySQL, and Servlet. Within my project, I have a table.jsp file structured as follows: <form id="frm_table"> Username : <input type="text" id="txt_name" name= ...

jqueryajaxjson

What is the best way to conceal a div once the mouse is no longer hovering over

Currently, I am utilizing Jquery to toggle the visibility of a div. The goal is to display the div when '.microblogpostwrapper' is hovered over and hide it when it's not. I have successfully implemented the first part, but struggling with ma ...

jqueryhovershow-hide

Is there a way to have one element automatically expand when another is selected?

I'm currently utilizing the date and time picker from . However, I need some assistance with the current setup. Currently, the date and time pickers are in separate input fields. In order to select a date, I have to click on the Date input field, and ...

javascriptjqueryhtmlcss