Direct answer: print a Vue component by rendering the data you want, waiting for Vue’s DOM update, and calling window.print() from a user action. Use @media print CSS to hide navigation and controls and to format the component for paper. The browser print dialog can send that output to a physical printer or a “Save as PDF” destination. If you need a downloadable PDF without a dialog, or a server-generated file, use a structured PDF renderer or a component library’s export API instead.
What “printing a Vue component” actually means
Vue does not print a component object or its source file. It renders a component into ordinary HTML, CSS, SVG, images, and canvas elements; the browser then prints that rendered DOM. A Vue single-file component (SFC) keeps its JavaScript, template, and CSS together, but the print engine only sees the final document after Vue has updated it.
That distinction determines the right approach:
- Browser printing:
window.print()opens the native preview. The user can choose a printer or Save as PDF. - Component-only printing: isolate one element in print CSS or a helper that opens a print window and copies styles.
- Programmatic PDF: use a PDF document renderer or a library’s export function when a file must be generated without a dialog.
Print one component with Vue and the browser
The following Vue 3 example prints only a report area while leaving the application shell visible on screen.
<script setup>
import { nextTick, ref } from 'vue'
const report = ref(null)
async function printReport () {
// Wait until the latest reactive values are in the DOM.
await nextTick()
window.print()
}
</script>
<template>
<button class="no-print" type="button" @click="printReport">
Print or save as PDF
</button>
<main id="report-to-print">
<ReportComponent v-if="report" :report="report" />
</main>
</template>/* Keep the application UI on screen, but remove it from printed output. */
@media print {
.no-print,
nav,
header,
footer,
.sidebar {
display: none !important;
}
#report-to-print {
display: block;
width: 100%;
}
@page {
margin: 16mm;
}
}Call the function from a click or another user gesture. The print dialog is intentionally controlled by the browser, so JavaScript cannot silently choose a printer, paper tray, or PDF filename.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
Make the printable state complete
- Load the report data and render the component.
- Wait for the reactive update with
nextTick(). - Wait for images and web fonts that affect dimensions. Printing too early can produce missing images or layout shifts.
- Call
window.print(). - Test the preview in each browser you support, including long tables and narrow pages.
Use a print-specific layout for complex screens
A dashboard usually contains buttons, tabs, filters, sticky panels, and transient loading states. Rather than forcing that screen to behave like a document, render the same data in a semantic report component and show it only for printing. Hide the interactive dashboard under @media print, then print the report. This gives you deliberate headings, table columns, margins, and page-break behavior without changing the on-screen UX.
Useful print CSS
@media print {
.dashboard,
.no-print { display: none !important; }
.print-report { display: block !important; }
table { width: 100%; border-collapse: collapse; }
thead { display: table-header-group; }
tr, img, .card { break-inside: avoid; }
h1, h2, h3 { break-after: avoid; }
/* Preserve important backgrounds where the browser permits it. */
.status-badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media screen {
.print-report { display: none; }
}Print CSS is a request to the browser, not a guarantee of identical pagination. User print settings, browser versions, fonts, cross-origin images, canvas content, and unsupported CSS can change the result. Keep critical information in real text rather than relying only on background colors or decorative effects.
Printing only a component with a helper
A Vue 3 helper such as vue-to-print can open a separate print window and copy CSS styles and selected markup into it. That is convenient when the component is deeply nested in an application shell and you do not want to maintain a large set of global print selectors.
The exact package API is version-sensitive, so adapt its current documentation to your component reference:
<script setup>
import { ref } from 'vue'
const printable = ref(null)
function printComponent () {
// Pass printable.value to the helper's current print method.
// The helper creates a print window and copies applicable styles.
}
</script>
<template>
<button type="button" @click="printComponent">Print component</button>
<section ref="printable">
<ReportComponent :report="report" />
</section>
</template>Because the helper uses another document, verify that fonts, image URLs, CSS variables, and component-library styles are available there. A helper copies styles; it does not solve every pagination, asset, or browser-print limitation. In particular, do not assume that a component’s scoped styles automatically work in a newly opened window unless the helper explicitly transfers the generated style rules.
Save a Vue component as PDF
Use the browser when a user is present
For a user-driven export, the simplest route is still window.print(). In the preview, select “Save as PDF.” This preserves the browser’s print controls and avoids adding a PDF-generation dependency. It is appropriate for reports where the user can inspect page breaks and choose paper size, orientation, and margins.
Use a structured PDF renderer for deterministic files
Choose a PDF renderer when the application must download a file directly, create PDFs on a server, or produce repeatable invoices and statements. Vue PDF-style renderers describe a document with primitives such as Document, Page, View, and Text. Browser components can provide print and download links, while a Node.js renderer can write a file.
Rank #2
// Illustrative structure for a Vue PDF renderer
<Document>
<Page size="A4">
<View>
<Text>Invoice #1042</Text>
<Text>Customer: Ada Lovelace</Text>
</View>
</Page>
</Document>This is a separate document layout, not a magic conversion of arbitrary screen CSS. It is usually the better fit when selectable text, deterministic pagination, and server-side generation matter. Interactive widgets, complex CSS, and pixel-level screen styling may need to be redesigned as PDF primitives.
Use a component library’s export API when available
Charts and other specialized widgets can often export their internal representation more faithfully than a screenshot of the screen. For example, DevExtreme’s Vue chart API documents PDF export and a print command:
this.$refs.chart.instance.exportTo('Exported Chart', 'PDF')
this.$refs.chart.instance.print()The first call creates a PDF export; the second opens the browser Print window. Check the component’s current API and version because export options differ between vendors. This approach is strongest when the library owns the SVG or chart model and can paginate it itself.
Which approach should you choose?
| Option | User experience | Output control | Best fit | Trade-off |
|---|---|---|---|---|
Browser window.print() plus print CSS |
Native preview; printer or Save as PDF | CSS and browser settings | Quick, user-driven reports | Pagination and settings vary by browser |
| Vue print helper | Print one component in an isolated window | Copies selected markup and styles | Component-only printing | Extra dependency and asset edge cases |
| Component-library export | Programmatic export or print | Vendor-specific fidelity | Charts and widgets with built-in export | Tied to that library |
| Structured PDF renderer | Download or server generation | Explicit document structure | Invoices, statements, deterministic PDFs | Separate PDF layout and more code |
Common failures and fixes
The PDF is blank or shows old data
Do not call print immediately after changing reactive state. Await nextTick(), and do not open the dialog until asynchronous requests have completed. If a report is behind v-if, confirm the component is mounted before printing.
Buttons, menus, or the sidebar appear
Add stable classes such as no-print and hide them under @media print. For a large application, a dedicated print layout is less fragile than trying to blacklist every interactive element.
Recommended Free Tools
Images or fonts are missing
Wait for image loads and font readiness when they affect layout. Check that the print window can access the asset URLs and that authentication does not expire in the new document. Cross-origin restrictions can affect canvas and image rendering; validate with the actual deployment origin.
Rank #3
- hole punched
- high quality card stock
- 4 pages
- made in USA
- keyboard shortcuts
Scoped styles disappear in a print window
A separately opened document does not automatically inherit the original document’s style tags. Use a helper that copies styles or explicitly include the compiled CSS in the print document.
Tables split badly across pages
Use real table markup, repeat the header with thead { display: table-header-group; }, and apply break-inside: avoid to rows or cards where supported. Extremely large rows may still need a print-specific design.
A chart or canvas is clipped
Give the printable chart a fixed print width, wait until it has finished rendering, and test the browser’s scaling settings. If the chart library provides an export API, prefer it over rasterizing the screen.
There is no automatic filename or silent PDF
That is a browser security boundary. Use a structured PDF renderer or a server endpoint when your workflow requires a file generated without user interaction.
Performance, reliability, and security notes
- Keep the print tree smaller than the full application DOM when reports are large; a dedicated report component reduces layout work.
- Do not fetch new data from inside the print dialog flow unless you can show a loading state and wait for completion first.
- Prefer server-generated PDFs for very large reports or scheduled exports, where browser memory and user settings should not affect the result.
- Escape user-provided text through Vue’s normal interpolation. Treat custom HTML, CSS, and JavaScript used in PDF or screenshot services as privileged input.
- Test paper size, orientation, margins, page breaks, fonts, images, and right-to-left or localized content in the browsers and locales you support.
Or skip the browser setup
If your goal is a clean image or PDF of a rendered URL rather than an interactive in-app print flow, ScreenshotNeo provides a single website screenshot API call. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers. It also offers an MCP server for AI clients, with take_screenshot, get_page_info, and capture_pdf.
See the complete parameter reference in the ScreenshotNeo documentation. A basic capture of a Vue route is:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
const body = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', body));ScreenshotNeo supports PNG, JPEG, WebP, and PDF responses; full-page capture with lazy-image loading; CSS-selector element capture; dark mode; device presets and custom viewports; retina scale; PDF paper size, margins, landscape, and page ranges; custom CSS and JavaScript; click, selector, delay, or network-idle waits; blocking ads, trackers, requests, or resource types; headers, cookies, user agents, Authorization, timezone, and geolocation; transparent backgrounds; resizing; configurable-TTL caching; signed image links; asynchronous jobs with signed webhooks; bulk capture of up to 100 URLs per call; a usage API; an OpenAPI specification; and familiar parameter names for easier migration.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots; yearly billing provides two months free, and every feature is on every plan. Create a free ScreenshotNeo account to try it.
Frequently Asked Questions
Can I call window.print() from setup() when the component mounts?
Avoid doing so. Browsers commonly require a user gesture, and mounting may occur before data, images, or fonts are ready. Use a button handler after the printable state is complete.
Does Save as PDF produce the same file in every browser?
No. The browser’s engine, print settings, installed fonts, and page-break support affect the result. Validate the browsers and paper formats your users need.
Should I use html2canvas and jsPDF for a Vue component?
They can rasterize a screen and assemble a PDF, but the supplied technical guidance does not establish universal fidelity or performance advantages. For text-heavy documents, a structured PDF renderer is generally easier to control; for user-driven output, start with browser printing.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteCan a print helper print a component with scoped CSS?
Only if the helper makes the generated style rules available in its print document. Verify the package’s current behavior and test fonts, variables, images, and library styles.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
