Print Vue page with the same styling as the original

How can I add a print button to my application that prints the page with the original CSS styles? I am currently using window.print() function and have a separate file called print.scss with specific print styles. 

@media print {
    header {display:none;}
    footer {display:none;}
    button {visibility: hidden;}
}

The issue I am facing is that I want to retain the original styles from my main style files, of which there are many.

https://i.stack.imgur.com/OuoEK.png

https://i.stack.imgur.com/vJDS9.png

(Buttons have been intentionally removed for illustration purposes.)

cssvue.jsprintingstyles

Answer №1

Finally discovered the solution! It turns out that there were no background colors specified. I simply added this line in the media query for printing: 

-webkit-print-color-adjust: exact !important;

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

Setting the width of colspan elements can be challenging when other columns have dynamic widths

I am working with a table setup that includes various columns for data tracking: <table > <thead style="width: calc(100% - 15px); display: table; table-layout: fixed;"> <tr> <th colspan="3">& ...

csshtml

Creating a dynamic design with a responsive background image and three columns of engaging content placed on top using Bootstrap

I'm struggling to translate a design mockup into Bootstrap 3.3.6 Here is an image showcasing the concept I am aiming for: The blue background represents an image, with grey text boxes overlaid on top (one of which includes a form). The entire layout ...

htmlcsstwitter-bootstrap

Attempting to place a different span beneath the current span

Is it possible to add another span below the first span and keep it on the same line as the circle? Check out this link for reference The following is the HTML code snippet: <div class="dialog-box"> <div class="dialog-box-circle"></d ...

htmlcss

Vue - Syntax error: Unexpected token, expecting "}."

I recently started working with Vue and have encountered a simple component issue. Sometimes, when I run npm run serve or save a file that is already being served, I receive the following error message: E:\Development\website\app>npm run ...

javascriptvue.jsvuejs2

How can you use Vue.js @mouseover to target a specific <path> element within an <svg>?

Check out this Codepen example. I am working with an SVG map that contains various paths holding data. My goal is to retrieve the state name when hovering over a specific path. Currently, I have added an event listener to the svg element and am trying to ...

javascriptsvgvue.jsvuejs2vue-component

Guide on implementing gradient animation effects in a React component

How can I implement gradient animation effects like this example in a React component using inline CSS? I need to utilize the CSS-based gradient animation effects shown below directly within the React component. Are there any specific packages available ...

cssreactjs

What is the best way to transfer static assets from an npm package to a nuxt project?

Has anyone successfully sent assets from an npm package to a nuxt application before? I have a vue component within an npm package with the following structure: -src/ -assets/ -noun-filter.svg In this npm package, the vector image is included in the v ...

javascriptvue.jsnuxt.jsnpm-package

The linking process in AngularJS is encountering difficulties when trying to interact with

I've already looked at similar questions, and my code seems correct based on the answers provided. It's a very simple beginner code. <html ng-app=""> <head> <title>Assignment</title> <script src=" ...

javascripthtmlcssnode.jsangularjs

What is the method to display HTML code using JavaScript within a span element in a JSP page?

While working on a jsp file, I came across a span tag with the following code: <span id="divBasicSearchResults" style="height:100%;"></span> Below is the Javascript function that generates HTML content for this span: function renderBasicSear ...

javascripthtmlcssjsp

Top method for transitioning project from Vue2 to Vue3

I am looking to take my project to the next level with vue3 This project is based on symfony and utilizes vue as separate components on the frontend Since I have never tackled a major upgrade before, I'm unsure of the best approach. Any suggestions? ...

vue.jsnpmvuejs2vuejs3

I am unable to retrieve images using the querySelector method

Trying to target all images using JavaScript, here is the code: HTML : <div class="container"> <img src="Coca.jpg" class="imgg"> <img src="Water.jpg" class="imgg"> <img src="Tree.jpg" class="imgg"> <img src="Alien.jpg" class=" ...

javascripthtmlcssdomcss-selectors

Is it more important to focus on passing props or making API requests the top priority in your web application structure

Context Currently, I am working on a Vue App utilizing the Composition API. My backend serves as the source of data for loading pages and components. Inquiry When it comes to structuring my app's architecture, should I prioritize passing props thro ...

vue.jsarchitecturefrontendvue-router

Choose a Range of DOM Elements

My challenge is to select a range of DOM elements, starting from element until element. This can be done in jQuery like this: (Source) $('#id').nextUntil('#id2').andSelf().add('#id2') I want to achieve the same using JavaScr ...

javascripthtmlcss

Select the small image to reveal the larger overlay image

I have a grid of images and I want each image to expand into fullscreen when clicked. However, the JavaScript I am using is causing only the last image in the grid to overlay. How can I resolve this issue? Here is the code I am currently using: http://js ...

javascriptjqueryhtmlcssimage

Utilizing VueJS to display content conditionally with v-show and JSON Data

I'm in the process of creating a VueJs portfolio where I want to showcase projects based on selected tags. Below is my code: <script lang="ts"> import projectsData from "../projects.json" export default { data() ...

vue.jsconditional-rendering

Attach two divs to the top-right and bottom-left corners using adhesive

Currently, I am utilizing jQuery's resizable() function. My goal is to have one div positioned on the top-right corner and another div on the bottom-left corner at all times. Essentially, I want these two divs to act as if they were the resizable hand ...

jqueryhtmlcss

Bootstrap allows for the use of video backgrounds, offering the option for borders to be included

Having trouble with a Bootstrap HTML page featuring a video background? The issue is that sometimes the video has borders on the left and right, and occasionally on mobile devices as well. Oddly enough, when the browser (Chrome or Firefox) is refreshed, th ...

javascripthtmlcsstwitter-bootstraphtml5-video

What steps can be taken to resolve an ESLing error in this situation?

Check out this code snippet: <template v-if="isTag(field, '')"> {{ getItemValue(item, field) ? getItemValue(item, field) : '&#8211'; }} </template> An issue has been identified with the above code: Er ...

javascriptvue.jseslint

My goal is to create text that is opaque against a backdrop of transparency

Is it feasible using CSS to create text with a transparent background while keeping the text opaque? I attempted the following method: p { position: absolute; background-color: blue; filter: alpha(opacity=60); opacity: 0.6; } span { color: b ...

htmlcss

What are some tips for getting media queries to function properly?

I need help with my homepage banner image as I am trying to make it responsive by adding media queries. The goal is for the image to adapt to 3 different sizes based on the screen being used, but currently only the medium-sized version appears. Could someo ...

css