Vue Print Page

In this tutorial, we will learn how to print a page or a specific div in Vue 3 (Composition API). We will use the window.print()
method to print the page. Whether you're looking to create printable reports, invoices, or any other document.

written

reviewed

updated

Thanks for your feedback!
Your contributions will help us to improve service.
Example 1 : Use Vue 3 to Print Current Page
In the example below, we provide code to print the entire page using Vue 3. We utilize the print.window
method to achieve this.
Vue 3 Print Page (Composition Api)
Copied to Clipboard
13
<script type="module">
const {createApp} = Vue;
createApp({
setup() {
const printPage = () => {
window.print();
};
return {
printPage
};
}
}).mount("#app");
</script>
Example 2: How to Print Specfic Div in Vue 3?
In this second example of this tutorial, we will learn how to print a specific div of the page, use "try it," customize the code, and apply it to your project.
Print Div in Vue 3
Copied to Clipboard
18
<script type="module">
const {createApp,ref} = Vue;
createApp({
setup() {
const contentToPrint = ref(null);
const printContent = () => {
let newWin = window.open('', '_blank');
newWin.document.write(contentToPrint.value.innerHTML);
newWin.document.close();
newWin.print();
};
return {
contentToPrint,
printContent
};
}
}).mount("#app");
</script>
Ad