Quickstart

<script setup>
import { usePrint } from 'vue-print-it'

const { print } = usePrint()

function printWithStyles() {
  print('content', {
    styles: [
      '@page { margin: 1in; }',
      'body { font-family: Arial, sans-serif; }',
      '@media print { .no-print { display: none; } }'
    ]
  })
}
</script>

<template>
  <div>
    <div id="content">
      <h1>Invoice #12345</h1>
      <p>Amount: $100.00</p>
    </div>
    
    <button @click="printWithStyles" class="no-print">
      Print Invoice
    </button>
  </div>
</template>

<style>
@media print {
  .no-print {
    display: none;
  }
}
</style>

<script setup>
import { ref } from 'vue'
import { usePrint } from 'vue-print-it'

const { print } = usePrint()
const isPrinting = ref(false)

async function handlePrint() {
  isPrinting.value = true
  
  await print('content', {
    onBeforePrint: () => {
      console.log('Preparing to print...')
    },
    onAfterPrint: () => {
      console.log('Print completed!')
      isPrinting.value = false
    },
    onPrintError: (error) => {
      console.error('Print failed:', error)
      isPrinting.value = false
    }
  })
}
</script>

<template>
  <div>
    <div id="content">
      <h1>Document</h1>
      <p>Content to print</p>
    </div>
    
    <button @click="handlePrint" :disabled="isPrinting">
      {{ isPrinting ? 'Printing...' : 'Print' }}
    </button>
  </div>
</template>

<template>
  <div class="invoice-container">
    <div id="invoice" class="invoice">
      <header>
        <h1>Invoice #{{ invoiceNumber }}</h1>
        <p>Date: {{ invoiceDate }}</p>
      </header>
      
      <section>
        <h2>Bill To:</h2>
        <p>{{ customer.name }}</p>
        <p>{{ customer.address }}</p>
      </section>
      
      <table>
        <thead>
          <tr>
            <th>Item</th>
            <th>Quantity</th>
            <th>Price</th>
            <th>Total</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in items" :key="item.id">
            <td>{{ item.name }}</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>
    
    <div class="actions no-print">
      <button @click="handlePrint" :disabled="isPrinting">
        {{ isPrinting ? 'Printing...' : 'Print Invoice' }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { usePrint } from 'vue-print-it'

const { print } = usePrint()

const invoiceNumber = ref('12345')
const invoiceDate = ref(new Date().toLocaleDateString())
const customer = ref({
  name: 'John Doe',
  address: '123 Main St, City, State 12345'
})
const items = ref([
  { id: 1, name: 'Web Development', quantity: 40, price: 75 },
  { id: 2, name: 'Design Services', quantity: 10, price: 100 }
])

const total = computed(() => 
  items.value.reduce((sum, item) => sum + (item.quantity * item.price), 0)
)

const isPrinting = ref(false)

async function handlePrint() {
  isPrinting.value = true
  
  try {
    await print('invoice', {
      windowTitle: `Invoice #${invoiceNumber.value}`,
      preserveStyles: true,
      styles: [
        '@page { margin: 1in; }',
        'body { font-family: Arial, sans-serif; }',
        'table { width: 100%; border-collapse: collapse; }',
        'th, td { padding: 8px; border: 1px solid #ddd; }',
        '@media print { .no-print { display: none; } }'
      ],
      onAfterPrint: () => {
        console.log('Invoice printed successfully')
      }
    })
  } finally {
    isPrinting.value = false
  }
}
</script>

<style scoped>
.invoice {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.actions {
  margin-top: 20px;
  text-align: center;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media print {
  .no-print {
    display: none;
  }
}
</style>