Efficiently incorporating styles and CSS, as well as Bootstrap CDN, into window.print() while utilizing Vue.js

I am trying to print from my Vuejs component and apply CSS and Bootstrap styles to the printed page.

Currently, I am using window.print() inside the mounted lifecycle hook as shown below:

       export default {
             mounted() {        
                  window.print();
               }
          }

However, the CSS and Bootstrap styles are not being rendered on the print screen. Can someone please suggest a solution for this issue?

UPDATE: I am using the adminlte Template, which may be causing the problem.

javascriptcssvue.jsbootstrap-4

Answer №1

Hey there! There are a couple of ways you can make this happen

TakeSnapshot(el)
{
    let snapWindow = window.open('', 'SNAPSHOT', 'height=600,width=800');

    snapWindow.document.write('<html><head><title>' + document.title  + '</title>');
    snapWindow.document.write('</head><body >');
    snapWindow.document.write('<h1>' + document.title  + '</h1>');
    snapWindow.document.write(document.getElementById(el).innerHTML);
    snapWindow.document.write('</body></html>');

    snapWindow.document.close(); // IE >= 10
    snapWindow.focus(); //  IE >= 10*/

    snapWindow.print();
    snapWindow.close();

    return true;
}

Alternatively,

You could use a wrapper for this task Check out Npm Link here

npm install vue-html-to-paper

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

Guide on transmitting data from a child component to a parent object in Vue.js?

When I attempt to utilize a child component with custom form inputs and emit those values to the parent component, I encounter an issue where one input value disappears when another input value is entered. Let me showcase some code: Child Component <tem ...

javascriptvue.jsvuejs2

Enhance Your Website with Interactive Tooltips Using Twitter Bootstrap

In Twitter bootstrap, the default trigger for tooltips is hover. If I want to make the tooltip display on focus instead, I can add data-trigger="focus". But how do I make it so the tooltip displays both on hover and on focus? ...

javascripttwitter-bootstraptooltip

What is the best way to transfer the http server variable between different layers in node.js without requiring it in a separate file?

I've developed a nodeJS application that involves creating a server in the file server.js. The code looks like this: http.createServer(app).listen(app.get('port'), function (err) { if (err) { console.error(err); } else { ...

javascriptnode.jsexpress

The next button will only activate once all input forms have been completed in multiple forms

In the JavaScript code: var current_fs, next_fs, previous_fs; //fieldsets var left, opacity, scale; //fieldset properties that will be animated var animating; //flag to prevent rapid glitches from multi-clicking $(".next").click(function(){ if(animati ...

javascriptjqueryajax

Utilizing the static folder feature in Express on a shared hosting platform

Struggling with implementing a static folder in my Node.js+Express application, I keep encountering a frustrating 404 error. After setting up the basic structure using express project_name, here is the simplified folder layout: app.js /views \-- la ...

javascriptnode.jsexpress

Creating a Product Configurator using Vue.js and HTML Canvas

My goal is to develop a shoe configurator and I'm seeking advice on how to begin. I'm wondering if it's feasible to utilize vue js for creating the shoe model (upper, tongue...) and integrating with an html canvas where I can dynamically loa ...

web-applicationshtml5-canvasvue.js

Having trouble implementing absolute css positioning on my custom composite button

I encountered a peculiar issue that I have managed to work around, but I am still curious about why it is happening. Below is the code for my Composite class: import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.clie ...

cssgwt

Is there a way to automatically scroll the parent page's top when the user navigates within an iframe?

We are encountering an issue with the loading of the iFrame. When the iFrame loads on the client's page, we notice that the page location jumps around and, in most cases, the page focus is lower down the page. This requires users to scroll up to view ...

javascriptjqueryangularjsiframecross-domain

Exploring the benefits of leveraging Express with SSL security features

I recently acquired a Comodo SSL certificate for setting up an SSL server with express. The certificates I have include: AddTrustExternalCARoot.crt COMODORSAAddTrustCA.crt COMODORSADomainValidationSecureServerCA.crt mysite.com.key mysite.com.csr mysite_co ...

javascriptnode.jssslexpressopenssl

Tips for inserting a row component into a table using Angular 7

I am currently using the latest version of Angular (7.2.0). I have created a custom tr component as follows: import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-table-row', templateUrl: './table- ...

javascriptangularcomponents

Ensure that Bootstrap4 cards are fully stretched to a width of 100%

Does anyone know how to make Card2 and Card3 in Bootstrap4 stretch to 100% width? Card1 defines the total height, but Card2 and Card3 are not taking up the full remaining width. Card1 is already stretched, but Card2 and Card3 are inside a flex column and a ...

htmlcsstwitter-bootstrap

Ways to showcase Material-UI Grid components without using cards

I initially used Material-UI grid items for spacing adjustments, but now they are displaying as cards. I would prefer them to be invisible like before, but the documentation doesn't provide a solution for this issue. Any assistance would be greatly ap ...

javascriptreactjsmaterial-ui

Tips for conducting unit tests on Vue.js components utilizing nuxt-i18n

When attempting to execute the code below using yarn run jest, an error is thrown: TypeError: _vm.$t is not a function. This occurs because the component SearchField relies on a translation ("$t('search')"). import { mount } from "@vue/test-util ...

vue.jsjestjsnuxt.jsnuxt-i18n

Is the initial carousel element failing to set height to 100% upon loading?

If you take a look here, upon loading the page you will notice a DIV at the top. It is labeled "content" with "content_container" wrapped around it and finally, "page" around that. Clicking the bottom left or right arrows reveals other DIVs with similar ta ...

javascripthtmlcssheightalignment

Picking out specific SharePoint components using jQuery

I encountered an issue with making my two radio boxes readonly. To resolve this, I attempted to disable the unchecked option. Despite trying to access the elements using jQuery and reviewing the data from the console, the solution did not work as expected. ...

javascriptjqueryhtmlsharepointjquery-selectors

What methods are available to load sections of a complex SVG shape asynchronously?

I'm currently in the process of creating a website with a geographic map built using SVG, pulling data from OpenStreetMap. Due to its large size and potential for transformations such as zooming and moving, only a portion of it will be visible on the ...

javascripthtmlcsssvgcatiledlayer

Is it recommended for the main, module, and browser properties in package.json to reference the minified version or the source

When developing a JavaScript library, it is important to consider the structure in which it will be published. This typically includes various bundles such as CJS, ESM, and UMD, each with their own source, minified, and map files. my-package\ dist& ...

javascriptnode.jsnpmwebpackrollup

Exploring the synergies of Remark and Rehype plugins alongside MDX in Next.js powered by @next/mdx

I’ve been experimenting with Github Flavored Markdown using @next/mdx, but I’m struggling to understand how to use plugins alongside the code. Here’s a breakdown of what I’ve attempted so far: (I’m following the instructions from the Next.js Doc ...

javascriptreactjsnext.jsmarkdownmdxjs

How can I locate a div element using multiple class names?

<div class="value test" /> I am trying to locate this specific element on the web page which has two classes assigned to it. Since className does not accept space-separated values, I am exploring alternative ways to achieve this. Any suggestions? ...

javacssseleniumselenium-webdriver

The color of the last clicked DIV is supposed to stay permanent, but for some unknown reason

I'm attempting to replicate this design in my project: http://jsfiddle.net/AYRh6/26/ However, I am facing issues with it and cannot pinpoint the exact problem in the code. I am using code for a toggle effect. Any assistance would be greatly appreciat ...

javascriptjqueryhtmlcss