I am working on printing pages and need to hide certain elements. Specifically, I do not want the two button signs to be displayed when I print. I am using a plugin called https://www.npmjs.com/package/vue-html-to-paper
Here is my code:
<div id="printThis">
<h1> My title </h1>
<button> I WANT TO HIDE THIS BUTTON IN PRINT!!! </button>
<p> My paragraph </p>
</div>
print(){
this.$htmlToPaper('printThis');
}
The question is simple. I want to hide the button in my PDF paper.
After reviewing the source code on https://github.com/mycurelabs/vue-html-to-paper/blob/master/src/index.js, it seems that there is no built-in variable to handle a specific task (which would be helpful; perhaps a pull request could address this?). However, we can create our own solution.
To do so, add a new variable called printing in the data section of your component:
data() {
return {
printing: false,
}
},
Update your template to utilize this new variable:
<template>
<div id="printThis">
<h1> My title </h1>
<button v-show="!printing"> I WANT TO DISPLAY THIS BUTTON IN PRINT!!! </button>
<p> My paragraph </p>
</div>
</template>
(You can also use v-if instead, each method has its advantages and disadvantages.)
Next, modify the method call to the plugin within a custom method to toggle the variable on and off. Follow the plugin documentation's callback instructions to reset the variable:
print(){
this.printing = true;
const options = null; // Customize as needed per https://randomcodetips.com/vue-html-to-paper/
this.$htmlToPaper('printThis', options, () => {
this.printing = false;
});
}
And that's it.
It might be worth considering developing a more efficient plugin to achieve the same functionality. Implementing a promise-based approach or defining lifecycle events for print success or failure could enhance the process significantly.
If you want to specify the direction of a CSS file, you can do so within the CSS file itself. For example, consider using something like "__dir/app.js" or "__dir/main.js".
import VueHtmlToPaper from 'vue-html-to-paper';
const options = {
name: '_blank',
specs: [
'fullscreen=yes',
'titlebar=yes',
'scrollbars=yes'
],
styles: [
'css/print.css',
]
}
Vue.use(VueHtmlToPaper, options);@media print {
.hidden-print {
display: none !important;
}
}I am facing an issue with my canvas drawing function. Whenever I clear the drawings on the background image by clicking a button, the old drawings reappear when I try to draw again. How can I permanently delete the cleared drawings so that I can start fr ...
I've been thinking about how to implement Class Inheritance in JavaScript. Since JavaScript doesn't have classes like other languages, we typically use functions to create objects and handle inheritance through Prototype objects. For instance, h ...
Lately, I've been experimenting with creating a responsive button for our new website. The goal is to adjust the body width to 460px, simulating how our site would appear on mobile devices. While researching, I came across a technique that utilizes if ...
After writing some code to remove '#' tags from text input, I encountered an issue upon loading the page. The initial display showed '{{textWithHashes | textWithoutDashes}}', which is not appealing at all. I attempted to use ng-cloak to ...
Currently, I am working on a small game where I transfer essential game data to the client by constructing the data and inserting it into the HTML as shown below: <?php echo "<script>"; echo "window.gd = ".json_encode($manager->game, ...
I am currently working on an Angular 8 application. In this application, there is a specific requirement for handling links. For external links, such as www.ad.nl, clicking on them should open in a new tab. However, if the link belongs to the same domain ...
I am using an API in PHP to check the IP address from which calls are being made with REMOTE_ADDR. I want to whitelist all calls coming from IP address "A". For example, if I have an ajax call to myapi.com/controller/action/ and the AJAX JavaScript file i ...
Recently, I've been using npm to create projects. When it comes to AMD, I find the native node require to be very convenient and effective for my needs. Currently, I rely on grunt-watchify to run my projects by specifying an entry file and an output f ...
After conducting extensive research on Google and StackOverflow, I am still unable to resolve this issue. This question is unique because the problem persists despite my efforts: I have a JavaScript function that is triggered on click (working properly). T ...
My current project involves creating a form with four input fields: name, email, phone, and message. To handle the submission process, I am utilizing JavaScript in conjunction with Ajax to send the user inputs to a PHP file for validation and mailing using ...
In my search for a way to extend the Date prototype in Angular (Typescript), I stumbled upon a solution on GitHub that has proven to be effective. date.extensions.ts // DATE EXTENSIONS // ================ declare global { interface Date { addDa ...
My work_experience model includes an "is_working" field which is set to true when a user is currently employed at a company. I am using a toggle switch on the front end and would like to update the boolean field value for "is_working" with a click. What lo ...
In my app.js file, I have an array that stores files. To display these files on a website, I use a for-loop in ejs: <% for(let i = 0;i<posts.length; i++){ %> <li class="listtitle"> <%= posts[i].title %> </li> ...
How can I make only the selected button change, instead of all at the same time when clicked? I have implemented a function that includes a Boolean state and toggles it const [like, setLike] = useState(false); const handleLike=()=> { setLike(! ...
I am currently working on a feature that involves returning specific data when the Enter key is pressed, similar to a barcode scanner. The idea is that after scanning a barcode, which triggers the Enter key code (keyCode = 13), the application should searc ...
Can someone please help me troubleshoot this code for passing a JavaScript variable to PHP? It doesn't seem to be working properly. I want to extract the value of an ID from JavaScript and send it over to PHP. <!DOCTYPE html> <html> ...
Greetings to all! A few weeks ago, I embarked on the journey of learning javascript, node.js and mongo. As a beginner, I have an interesting task at hand today. My goal is to add a simple document to the mongoDB and perform a conditional check. So here&apo ...
I've been doing a lot of reading and trying to understand how to redirect using withRouter in React. However, I came across some information stating that when onClick occurs, the page should be redirected to a specific link. Additionally, I learned th ...
Can you set up package.json to execute a different npm start script depending on the context? For instance, I want to run DEBUG=http nodemon app.js during development. However, I prefer to run node app.js in production. ...
Feeling frustrated with a seemingly commonplace issue. Despite the thousands of times it has been asked before, I can't seem to find an answer on Google. I wanted to neatly display my text within one of my cards, but so far I've only achieved th ...