I want to print some content from a vue component. For example from the following snippet, I would like to print the v-card-text
element which also has an id of
You need to copy over the styles from the original document. Try something like this:
// Get HTML to print from element
const prtHtml = document.getElementById('print').innerHTML;
// Get all stylesheets HTML
let stylesHtml = '';
for (const node of [...document.querySelectorAll('link[rel="stylesheet"], style')]) {
stylesHtml += node.outerHTML;
}
// Open the print window
const WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(`<!DOCTYPE html>
<html>
<head>
${stylesHtml}
</head>
<body>
${prtHtml}
</body>
</html>`);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
Install this package vue-html-to-paper
npm install vue-html-to-paper
usage:
import Vue from 'vue';
import VueHtmlToPaper from 'vue-html-to-paper';
const options = {
name: '_blank',
specs: [
'fullscreen=yes',
'titlebar=yes',
'scrollbars=yes'
],
styles: [
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
'https://unpkg.com/kidlat-css/css/kidlat.css'
]
}
Vue.use(VueHtmlToPaper, options);
// or, using the defaults with no stylesheet
Vue.use(VueHtmlToPaper);
component:
<template>
<div>
<!-- SOURCE -->
<div id="printMe">
<h1>Print me!</h1>
</div>
<!-- OUTPUT -->
<button @click="print"></button>
</div>
<template>
<script>
export default {
data () {
return {
output: null
}
},
methods: {
print () {
// Pass the element id here
this.$htmlToPaper('printMe');
}
}
}
</script>
for more detail check: https://randomcodetips.com/vue-html-to-paper/