Click on a new tab to enable printing options for the page

I am looking to enhance the print page functionality on my website. Currently, when the print icon in the footer is clicked, it opens the printer dialog box directly. I would like to change this behavior so that when the Print icon is clicked, the contents of the current page open in a new window with its own header and footer. In this new window, there should be a "Print" button located in the header. Clicking on this "Print" button should then trigger the opening of the print dialog box.

Thus far, I have been able to open a new window upon clicking the Print icon using the code below:

var printLinks = {};

printLinks.initialize = function() {
     $('body').on('click', '.js-print-link', function(e) {
          myWindow = window.open('', '_blank', 'resizable,scrollbars,status');
          myWindow.document.write("<p>Test</p>");
          myWindow.document.close();
          myWindow.focus();
          e.preventDefault();
     });
};

However, I am encountering an issue where the content of the current page is not displayed in the new window. What should I include in the document.write() method instead of "Test"? Any assistance would be greatly appreciated.

Answer №1

<script type = "text/javascript">
        function PrintContent(contentId) {
            var content1 = document.getElementById(contentId);
            <%--  var prtContent1 = document.getElementById("<%=UserDetails1.ClientID %>");
            var prtContent2 = document.getElementById("<%=UserDetails2.ClientID %>");--%>
       <%--     document.getElementById('<%=UserDetails1.ClientID%>');--%>
          <%--  var prtContent1 = document.getElementById('<%=MasterPage2.FindControl("UserDetails1").ClientID %>');
            var prtContent2 = document.getElementById('<%=MasterPage2.FindControl("UserDetails2").ClientID %>');
            var PrintingWindow = window.open('', '', 'left=10,top=10,width="450",height="250",toolbar=1,scrollbars=1,status=1');

            //PrintingWindow.document.write("<html><div>UserDetails1</div><body>");
            //PrintingWindow.document.write("<html><body>");
            PrintingWindow.document.write(content1.innerHTML);
            //WinPrint.document.write(prtContent2.innerHTML);
            //WinPrint.document.write("</body></html>");
            PrintingWindow.document.close();
            PrintingWindow.focus();
            PrintingWindow.print();
            PrintingWindow.close();

            return false;
        }
    </script>


 <input name="print_button" type="button" class="ipt" onclick="return PrintContent('UserDetails');" value=" Print ">

userdeatils --> print div id

Answer №2

For those interested in customizing the header and footer when printing a page, I recommend utilizing @media queries within your CSS to control which elements are shown or hidden during the print process. By following this method, elements like .header_print and .footer_print will remain unseen until the user initiates the printing action through Ctrl+P or window.print(). This eliminates the need to create a separate print window, simplifying the overall printing experience.

@media print {
.header, .footer {
    display:none;
}
.header_print, .footer_print {
    display: block;
}

}

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

What is the best way to incorporate async/await in a useEffect hook in a React Native application?

Upon executing useEffect, my objective is to retrieve the token from AsyncStorage, fetch the data value using the axios.post('/auth/me') endpoint, and trigger the KAKAOLOG_IN_REQUEST action through dispatch. After verifying that the data value i ...

Creating a hover state for a CSS class seems straightforward, but I'm finding it a bit tricky

I am looking to customize my inline menu by changing the last menu item to a different colored box with unique text. I have successfully applied a custom style using the #navbar a.blogbox class, but I am struggling to figure out how to change the hover s ...

Position your Logo to the left, align the Menu in the center, and place top links on the right using Bootstrap

I am currently struggling to create two rows with the logo aligned to the left, 'Home' and 'User' menu links at the top right corner, and a second row displaying 'Link1', 'Link2', 'Link3' menus centered. Th ...

"Exploring the concept of master pages in web development with the combination

Recently, I have been developing a website that functions similarly to olx, displaying ads based on the visitor's location (for example, showing Mumbai ads if the visitor is from Mumbai). Initially, I was planning to create separate pages for each cit ...

The instance of the Javascript Object Prototype losing its reference

I'm currently developing a small Javascript Object that will attach click listeners to specific elements, triggering an AJAX call to a PHP function. Everything is functioning as expected, but I want to execute a function once the AJAX response is rece ...

What could be the reason behind the absence of this.props.onLayout in my React Native component?

In my React Native app, I have the below class implemented with Typescript: class Component1 extends React.Component<IntroProps, {}> { constructor(props){ super(props) console.log(props.onLayout) } ... } The documentation for the View ...

Accessing a model's field within an Ember.js each loop

Here is the code for a route that I am working on: Calendar.DateIndexRoute = Ember.Route.extend({ model: function(data) { return {arr:getCalendar(data), activeYear: data.year, activeMonthNumber: data.month, activeDay: data.da ...

Position the Bootstrap footer element at the bottom of the page

On a custom HTML page that I created, I decided to include a footer using Bootstrap. In this example, it demonstrates how the footer can be positioned at the bottom of the page without being placed inside a container element (directly within the body eleme ...

Discovering the exact distance between a 'li' and a 'div' element

Currently, I am in the process of converting HTML to JSON. Here is an example of the HTML I am working with: <div class="treeprofit" id="divTreeViewIncomeDetails" style="height: auto;"> <li><span class="fa fa-folder-open highlight" ...

Activate a CSS class on click using JavaScript

Having a bit of trouble as a beginner with this. Any help would be much appreciated. This is the code in question: HTML: <div class='zone11'> <div class='book11'> <div class='cover11'></d ...

Update the class of the panel immediately prior to a click event

Is it possible to change the class before the animation starts or when opening/closing the panel? Currently, the class only changes after the animation has finished and the panel is already open or closed. Here is an example: http://jsfiddle.net/0b9jppve/ ...

disabling empty elements in a React JS JavaScript component

Currently, I am retrieving data from an API where users can post content up to 3 times. However, if a user has not posted three times, empty boxes with padding and background color will appear. I want to remove all elements that do not have any content wit ...

Creating a Loopback API that seamlessly integrates with Ember.js

Exploring the use of Loopback to create an API that communicates with Ember. Ember expects JSON data to be enclosed in 'keys', such as for an account: { account: { domain: 'domain.com', subdomain: 'test', title: ...

Are there any testing frameworks available for JavaScript that are similar to Junit and specifically designed for testing object-oriented JavaScript within Node

What are some recommended methods for testing object-oriented JavaScript in Node.js? For instance, let's consider the following Cat.js class: function Cat(age, name) { this.name = name || null; this.age = age || null; } Cat.prototype.getAge ...

I am encountering a continuous css ParserError while trying to compile my react project

I'm having trouble with the compilation of my React project. While everything runs smoothly with npm start, I encounter an error during compilation: npm run build <a href="/cdn-cgi/l/email-protection" class="__cf_ema ...

What is the best way to incorporate mongoose discriminators?

For my current project, I am looking to utilize mongoose discriminator to manage a collection of users with a specific document structure for the owner. However, I have encountered an error: throw new Error('The 2nd parameter to mongoose.model() shou ...

Coordinate the timing of CSS animation with the loading of the page

Despite the abundance of similar questions, none have quite addressed my specific query. I've created a preloader using CSS animation and I want it to synchronize perfectly with the page load. While I can trigger the animation on page load, I'm s ...

Arranging a div's position in relation to an unrelated div

I need to position a div element called "a" below another div element known as "b". The HTML code has the following structure: <div id="a"></div> <form> <div id="b"></div> <div id="c"></div> </form> U ...

Updating a behavior object array in Angular 5 by appending data to the end

After creating a service to share data across my entire application, I'm wondering if it's possible to append new data to an array within the userDataSource. Here is how the service looks: user.service userDataSource = BehaviorSubject<Array& ...

Position an element with absolute positioning to the right edge of a relative element

I have a situation where I need to align the end of a position absolute element with the end of a relative element, but the relative element's width is not fixed and may vary based on content. https://i.sstatic.net/L2sLP.jpg This scenario arises as ...