Guide on Configuring Print Page using Fresh HTML Codes with jQuery

Having an issue with printing a Bootstrap modal exactly as displayed? Check out this Print Problem

Despite trying various solutions, none have solved my problem. Therefore, I am exploring a new approach.

Does anyone know how to dynamically print new HTML code using JavaScript and jQuery?

Imagine having two screens: Screen 1 and Screen 2

Screen 1: the working web screen with the displayed HTML code

Screen 2: a hidden screen

When the "print" button is clicked, my jQuery script will generate new HTML code on Screen 2 and proceed to print it.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

This solution is effective for me.

HTML snippet:

<div id='print-section'></div>
<div id='print-btn'></div>

CSS code:

@media print {
    body * {
        visibility: hidden;
    }

    @page {size: portrait}

    #print-section {
        visibility: visible;
        width : 100%;
        height : auto;
    }
}

JavaScript function:

$("#print-btn").click(function(){
     var htmlText = '<p>CONTENT TO PRINT</p>';

     $( "#print-section" ).html( htmlText ).promise().done(function() {
            window.print();
    });
});

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 could be the reason that my submenus are not appearing as expected?

I'm currently working on refining the navigation bar design for a website, but I've encountered a problem with the submenu functionality. It appears that only one submenu is visible while the others remain hidden. For example, when navigating to ...

htmlcsssubmenu

In AngularJS, how can you filter the ng-repeat value by clicking on a checkbox field?

Hey there, I'm looking to filter the ng-repeat value when a checkbox is clicked. Check out my Plunker here. By checking the checkbox labeled Role block, it should only show elements with roles value of "block". Similarly, by checking the checkbo ...

htmlangularjsmeanjs

React Issue: Footer not staying attached at the bottom of the page

I'm currently developing a website with react, but I'm struggling to keep the footer at the bottom. When there isn't enough content, the footer ends up right after the content instead of staying at the bottom. I've tried various solutio ...

htmlcssreactjsjsx

Can a JavaScript function be sent through a REST API using Node.js and Express?

I have a unique scenario where I need to send a custom JavaScript function as a response to a GET request made to an API endpoint. Currently, I am using Node.js with Express for my server implementation, but I am open to exploring other frameworks. When a ...

javascriptnode.jsrestexpress

jQuery does not permanently alter the values

It is unclear whether this issue is related to caching or coding. Interestingly, there seems to be inconsistency when attempting to modify the value of a div using text(); it works at times and fails at other times... EDIT SOLVED SEE BELOW: The problem wa ...

jquery

AngularJS view does not wait for the completion of $http.get request

Within my controller, the code snippet below is present... $scope.products = dataService.getJsonData(); console.log($scope.products); The corresponding code in my dataservice is as follows: .service('dataService', function ($http) { t ...

javascriptangularjs

Understanding how to decode querystring parameters within a Django view

In the application I'm working on, there is a search form that utilizes a jQuery autocomplete plugin. This plugin processes the querystring and sends back the suggested item using encodeURI(q). For example, an item like Johnny's sports displays ...

javascriptpythondjango

Unable to Retrieve Stripe Connect Account Balance

I've been attempting to retrieve the balance for my connected accounts in Stripe, but every time I make an API call, it keeps returning the platform's account balance instead of the connected account balance. This is happening while in test mode. ...

javascriptnode.jsstripe-payments

Utilize jQuery to swiftly align elements within a designated container

Check out my JSFiddle example: http://jsfiddle.net/c62rsff3/ I'm attempting to implement snapping behavior between 2 elements using this code: $('.draggable-elements').draggable({ snap: true }); In addition, I've defined a container ...

javascriptjqueryhtmlcssjquery-ui

Generate a text string by choosing options from a form

Greetings! I have a form for creating a file, where the file name is determined by user selections. It's similar to "display text as you type" mentioned here, but my form includes radio buttons in addition to a textbox. For example: Textbox: "Name gi ...

javascriptjqueryformsjquery-selectors

Maximizing the potential of typescript generics in Reactjs functional components

I have a component within my react project that looks like this: import "./styles.css"; type InputType = "input" | "textarea"; interface ContainerProps { name: string; placeholder: string; as: InputType; } const Conta ...

javascriptreactjstypescript

Determining the value of an element by examining the clicked element

My goal is to determine the remaining balance in my cart based on the selected item. Let's say I have 3 items in my cart, and I choose one that costs $100. Previously, I stated that I had a total of $300. In my HTML code, there are elements with IDs ...

javascriptjqueryonclickcart

Creating an array using Vue.js

When I initialize a Vue data array like this [0: Object, 2: Object];, the console log in Vue shows the array as [0: Object, 1: undefined 2: Object];. This causes issues when iterating through with 'v-for="cell in row.cells"' as it results in tryi ...

javascripthtmlvue.js

Swap Text Inside String - JS

I have a challenge where I need to extract an ID from an HTML element and then replace part of the extracted word. For instance: HTML <input type="checkbox" id="facebookCheckbox"></div> JavaScript var x = document.getElementById("facebookCh ...

javascripthtmlcssreplace

What is the best way to isolate the text before a particular segment within a string, excluding any blank spaces?

Is it possible to use vanilla JavaScript in order to extract the first string value directly to the left of a specified portion of a longer string, excluding any blank spaces? Consider the following string: 1 hr 30 min How could you extract the 1 located ...

javascript

Encountering Error with NodeJS Typescript: Issue with loading ES Module when running sls offline command

I have come up with a unique solution using NodeJS, Typescript, and Serverless framework to build AWS Lambdas. To debug it locally in VS Code, I use the serverless-offline library/plugin. You can find my project on GitHub here However, when I run the comm ...

javascriptnode.jstypescriptecmascript-6serverless-framework

Can the MemoryRouter be successfully nested within the BrowserRouter in a React application?

I've been on a quest for some time now, trying to uncover whether it's feasible to utilize MemoryRouter solely for specific routes while maintaining the use of BrowserRouter in general. My goal is to navigate to a particular component without alt ...

javascriptreactjsreact-router

What is the process for obtaining a component's ref using JavaScript event propagation?

Here is a code snippet I am working with: const dailyRef = createRef(); const monthlyRef = createRef(); const annuallyRef = createRef(); const handleBillingCycleClick = ({target}) => { const value = target.dataSet.value // How can I access the clic ...

javascriptreactjs

Best Practices and Tips for Layout Design Using HTML and CSS Grid

As I begin my journey into front-end development, I am currently immersing myself in studying html, css, and vanilla javascript. While things are going well so far, I find myself struggling with understanding the organization of design layouts in general. ...

htmlcssfrontend

Is there a way to transform a stringified array into an array in JavaScript if I do not have access to the original string?

Recently, I encountered a challenge where I had an array of items enclosed within "", and not '' (if that distinction matters): "['item 1', 'item2', 'item 3']" I am interested in converting it to ...

javascriptnode.jsarraysjson