Printing by element ID
The most common way to print content is by referencing an element’s ID:<template>
<div>
<div id="invoice">
<h1>Invoice #12345</h1>
<p>Amount: $100.00</p>
<p>Date: {{ new Date().toLocaleDateString() }}</p>
</div>
<button @click="$print('invoice')">Print Invoice</button>
</div>
</template>
Printing by element reference
You can also pass an HTMLElement directly:<template>
<div>
<div ref="contentRef">
<h1>Receipt</h1>
<p>Thank you for your purchase!</p>
</div>
<button @click="handlePrint">Print Receipt</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { usePrint } from 'vue-print-it'
const contentRef = ref(null)
const { print } = usePrint()
function handlePrint() {
if (contentRef.value) {
print(contentRef.value)
}
}
</script>
Common use cases
- Invoices
- Receipts
- Tables
<template>
<div>
<div id="invoice" class="invoice">
<header>
<img src="/logo.png" alt="Company Logo" />
<h1>Invoice #{{ invoiceNumber }}</h1>
</header>
<section class="invoice-details">
<div>
<p><strong>Date:</strong> {{ invoiceDate }}</p>
<p><strong>Due Date:</strong> {{ dueDate }}</p>
</div>
<div>
<p><strong>Bill To:</strong></p>
<p>{{ customer.name }}</p>
<p>{{ customer.address }}</p>
</div>
</section>
<table class="items">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{{ item.description }}</td>
<td>{{ item.quantity }}</td>
<td>${{ item.price }}</td>
<td>${{ item.quantity * item.price }}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total</td>
<td>${{ total }}</td>
</tr>
</tfoot>
</table>
</div>
<button @click="$print('invoice')" class="no-print">
Print Invoice
</button>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const invoiceNumber = ref('12345')
const invoiceDate = ref('2024-03-04')
const dueDate = ref('2024-03-18')
const customer = ref({
name: 'John Doe',
address: '123 Main St, City, State 12345'
})
const items = ref([
{ id: 1, description: 'Web Development', quantity: 40, price: 75 },
{ id: 2, description: 'Design Services', quantity: 10, price: 100 }
])
const total = computed(() =>
items.value.reduce((sum, item) => sum + (item.quantity * item.price), 0)
)
</script>
<style>
.invoice {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.items {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.items th,
.items td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
@media print {
.no-print {
display: none;
}
}
</style>
<template>
<div>
<div id="receipt" class="receipt">
<div class="receipt-header">
<h2>Thank You!</h2>
<p>{{ storeName }}</p>
<p>{{ storeAddress }}</p>
</div>
<div class="receipt-date">
<p>{{ new Date().toLocaleString() }}</p>
<p>Transaction #{{ transactionId }}</p>
</div>
<div class="receipt-items">
<div v-for="item in items" :key="item.id" class="item">
<span>{{ item.name }}</span>
<span>${{ item.price }}</span>
</div>
</div>
<div class="receipt-total">
<div>
<span>Subtotal:</span>
<span>${{ subtotal }}</span>
</div>
<div>
<span>Tax:</span>
<span>${{ tax }}</span>
</div>
<div class="total">
<span>Total:</span>
<span>${{ total }}</span>
</div>
</div>
</div>
<button @click="printReceipt" class="no-print">
Print Receipt
</button>
</div>
</template>
<script setup>
import { usePrint } from 'vue-print-it'
const { print } = usePrint()
const storeName = 'My Store'
const storeAddress = '456 Commerce Ave'
const transactionId = 'TXN' + Date.now()
const items = [
{ id: 1, name: 'Product A', price: 29.99 },
{ id: 2, name: 'Product B', price: 49.99 }
]
const subtotal = items.reduce((sum, item) => sum + item.price, 0)
const tax = subtotal * 0.08
const total = subtotal + tax
function printReceipt() {
print('receipt', {
windowTitle: `Receipt ${transactionId}`,
specs: { width: 400, height: 600 }
})
}
</script>
<template>
<div>
<div id="report">
<h1>Sales Report</h1>
<p>Generated: {{ new Date().toLocaleDateString() }}</p>
<table>
<thead>
<tr>
<th>Product</th>
<th>Units Sold</th>
<th>Revenue</th>
<th>Growth</th>
</tr>
</thead>
<tbody>
<tr v-for="row in reportData" :key="row.id">
<td>{{ row.product }}</td>
<td>{{ row.units }}</td>
<td>${{ row.revenue.toLocaleString() }}</td>
<td :class="row.growth >= 0 ? 'positive' : 'negative'">
{{ row.growth }}%
</td>
</tr>
</tbody>
</table>
</div>
<button @click="$print('report', { windowTitle: 'Sales Report' })">
Print Report
</button>
</div>
</template>
<script setup>
const reportData = [
{ id: 1, product: 'Widget A', units: 1200, revenue: 36000, growth: 12 },
{ id: 2, product: 'Widget B', units: 850, revenue: 42500, growth: -5 },
{ id: 3, product: 'Widget C', units: 2100, revenue: 63000, growth: 23 }
]
</script>
<style>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
padding: 12px;
border: 1px solid #ddd;
text-align: left;
}
.positive { color: green; }
.negative { color: red; }
@media print {
.positive, .negative {
color: #000;
}
}
</style>
With basic options
Customize the print behavior with options:<script setup>
import { usePrint } from 'vue-print-it'
const { print } = usePrint()
function printWithOptions() {
print('content', {
windowTitle: 'My Document',
timeout: 1500,
autoClose: true,
specs: { width: 1024, height: 768 }
})
}
</script>
Hiding elements from print
Use CSS to hide elements that shouldn’t appear in print:<template>
<div id="page-content">
<h1>Document Title</h1>
<p>This will be printed</p>
<div class="no-print">
<button @click="$print('page-content')">Print</button>
<p>This won't be printed</p>
</div>
</div>
</template>
<style>
@media print {
.no-print {
display: none !important;
}
}
</style>
Next steps
Composable
Learn about using the usePrint composable
Global method
Explore the $print global method
Event callbacks
Handle print lifecycle events
Custom styles
Add custom print styles