Overview
This page documents the type definitions used for bridge printing operations: BridgeHealthResponse, BridgePrinter, BridgePrintRequest, and BridgePrintResponse. These types are used when interacting with the bridge service for direct printer communication.
BridgeHealthResponse
Response from the bridge health check endpoint, providing information about the bridge service status.
Properties
Current status of the bridge service. Typically "ok" when the service is healthy.
Version number of the bridge service currently running.
Service uptime in seconds since the bridge service was started.
Example
import { usePrint } from 'vue-print-it';
const { getBridgeStatus } = usePrint();
const checkBridge = async () => {
const health = await getBridgeStatus();
if (health) {
console.log('Status:', health.status); // "ok"
console.log('Version:', health.version); // "1.0.0"
console.log('Uptime:', health.uptime); // 3600 (seconds)
}
};
BridgePrinter
Represents a printer available through the bridge service.
Properties
The name of the printer as registered with the operating system.
Whether this printer is set as the system’s default printer.
Current status of the printer. Common values: "idle", "printing", "offline", "error".
Example
import { usePrint } from 'vue-print-it';
const { getAvailablePrinters } = usePrint();
const listPrinters = async () => {
const printers = await getAvailablePrinters();
printers.forEach(printer => {
console.log('Printer:', printer.name);
console.log('Default:', printer.is_default);
console.log('Status:', printer.status);
console.log('---');
});
// Example output:
// Printer: HP LaserJet Pro
// Default: true
// Status: idle
// ---
// Printer: Zebra Label Printer
// Default: false
// Status: idle
};
BridgePrintRequest
Request payload for sending a print job to the bridge service.
Properties
Name of the printer to use for this print job. If not specified, the bridge will use the default printer.
The content to print. This can be HTML string or base64-encoded PDF data, depending on content_type.
Type of content being sent:
'html': HTML content that will be rendered and printed'pdf': Base64-encoded PDF data
Number of copies to print.
Additional printer-specific options. Available options depend on the printer driver and may include:
orientation: 'portrait' or 'landscape'paperSize: Paper size specificationquality: Print quality settingscolorMode: 'color' or 'monochrome'
Example
import { usePrint } from 'vue-print-it';
const { printDirect } = usePrint();
// Print HTML content
const printHtml = async () => {
const request = {
printer_name: 'HP LaserJet Pro',
content: '<h1>Invoice</h1><p>Total: $100</p>',
content_type: 'html',
copies: 2,
options: {
orientation: 'portrait',
paperSize: 'A4'
}
};
const response = await printDirect(request.content, request);
console.log('Print job submitted:', response.job_id);
};
// Print PDF content
const printPdf = async (base64Pdf) => {
const request = {
printer_name: 'Color Printer',
content: base64Pdf,
content_type: 'pdf',
copies: 1,
options: {
colorMode: 'color',
quality: 'high'
}
};
const response = await printDirect(request.content, request);
console.log('PDF print job:', response.job_id);
};
BridgePrintResponse
Response from the bridge service after submitting a print job.
Properties
Whether the print job was successfully submitted to the printer queue.
Unique identifier for the print job. Can be used to track the job status.
Human-readable message about the print job submission. Contains success or error details.
Example
import { usePrint } from 'vue-print-it';
const { printDirect } = usePrint();
const handlePrint = async () => {
try {
const response = await printDirect('<h1>Receipt</h1>', {
printer_name: 'Receipt Printer',
content_type: 'html'
});
if (response.success) {
console.log('Print job ID:', response.job_id);
console.log('Message:', response.message);
// Example:
// Print job ID: "job-12345-67890"
// Message: "Print job submitted successfully"
showNotification('Print sent to Receipt Printer', 'success');
} else {
console.error('Print failed:', response.message);
showNotification(response.message, 'error');
}
} catch (error) {
console.error('Print error:', error);
showNotification('Failed to connect to printer', 'error');
}
};
Complete Usage Example
<template>
<div>
<div v-if="bridgeStatus">
<p>Bridge Status: {{ bridgeStatus.status }}</p>
<p>Version: {{ bridgeStatus.version }}</p>
<p>Uptime: {{ formatUptime(bridgeStatus.uptime) }}</p>
</div>
<div v-if="printers.length">
<h3>Available Printers</h3>
<select v-model="selectedPrinter">
<option v-for="printer in printers" :key="printer.name" :value="printer.name">
{{ printer.name }} {{ printer.is_default ? '(Default)' : '' }} - {{ printer.status }}
</option>
</select>
</div>
<div>
<label>
Copies:
<input v-model.number="copies" type="number" min="1" max="10" />
</label>
</div>
<button @click="printReceipt" :disabled="!selectedPrinter">Print Receipt</button>
<div v-if="lastJob">
<p>Last Job: {{ lastJob.job_id }}</p>
<p>Status: {{ lastJob.message }}</p>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { usePrint } from 'vue-print-it';
const { getBridgeStatus, getAvailablePrinters, printDirect } = usePrint();
const bridgeStatus = ref(null);
const printers = ref([]);
const selectedPrinter = ref('');
const copies = ref(1);
const lastJob = ref(null);
onMounted(async () => {
// Check bridge health
bridgeStatus.value = await getBridgeStatus();
// Get available printers
if (bridgeStatus.value) {
printers.value = await getAvailablePrinters();
// Auto-select default printer
const defaultPrinter = printers.value.find(p => p.is_default);
if (defaultPrinter) {
selectedPrinter.value = defaultPrinter.name;
}
}
});
const printReceipt = async () => {
const receiptHtml = `
<div style="font-family: monospace;">
<h2>RECEIPT</h2>
<p>Date: ${new Date().toLocaleString()}</p>
<hr>
<p>Item 1: $10.00</p>
<p>Item 2: $25.00</p>
<hr>
<p><strong>Total: $35.00</strong></p>
</div>
`;
try {
const response = await printDirect(receiptHtml, {
printer_name: selectedPrinter.value,
content_type: 'html',
copies: copies.value,
options: {
paperSize: '80mm',
orientation: 'portrait'
}
});
lastJob.value = response;
if (response.success) {
alert(`Print job ${response.job_id} submitted successfully!`);
} else {
alert(`Print failed: ${response.message}`);
}
} catch (error) {
console.error('Print error:', error);
alert('Failed to send print job');
}
};
const formatUptime = (seconds) => {
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
return `${hours}h ${minutes}m`;
};
</script>
TypeScript Usage
import { usePrint } from 'vue-print-it';
import type {
BridgeHealthResponse,
BridgePrinter,
BridgePrintRequest,
BridgePrintResponse
} from 'vue-print-it';
const { getBridgeStatus, getAvailablePrinters, printDirect } = usePrint();
const checkHealth = async (): Promise<void> => {
const health: BridgeHealthResponse | null = await getBridgeStatus();
if (health) {
console.log(`Bridge ${health.version} is ${health.status}`);
}
};
const listPrinters = async (): Promise<BridgePrinter[]> => {
const printers: BridgePrinter[] = await getAvailablePrinters();
return printers.filter(p => p.status === 'idle');
};
const sendPrintJob = async (content: string): Promise<string | null> => {
const request: Partial<BridgePrintRequest> = {
printer_name: 'Label Printer',
content_type: 'html',
copies: 2
};
const response: BridgePrintResponse = await printDirect(content, request);
return response.success ? response.job_id : null;
};
See Also
