Print Library

A Vue 3 library for printing HTML templates with data substitution and support for multiple output formats (HTML, DOC, PDF).

Installation

npm install @studio-west/print

Setup

Global Installation (in your main.js or app entry point)

import { createApp } from 'vue'
import App from './App.vue'
import print from '@studio-west/print'

const app = createApp(App)

// Make print function available globally
app.config.globalProperties.$print = print

app.mount()

Local Installation (in individual components)

import print from '@studio-west/print'

export default {
  methods: {
    handlePrint() {
      const template = '<h1>Hello {{name}}!</h1><p>This is a {{type}} document.</p>'
      const data = { name: 'World', type: 'test' }
      print(template, data, 'output.pdf')
    }
  }
}

Function Parameters

The print function accepts three parameters:

• template (string): HTML template with optional placeholder variables
• data (object, array, string, or number): Data to substitute into the template
• fileName (string, optional): Output filename with extension to determine format

Template Placeholders

The template supports two types of placeholders:

• Empty placeholders: {{}} - replaced with data in order
• Named placeholders: {{variableName}} - replaced with corresponding property from data object

Supported Output Formats

• .html - Opens in browser for printing
• .doc/.docx - Downloads as Word document
• .pdf - Generates and downloads as PDF (requires html2pdf.js)

Examples

Basic Usage

const template = '<h1>{{title}}</h1><p>{{content}}</p>'
const data = { title: 'My Title', content: 'My Content' }
print(template, data, 'document.pdf')

Using Empty Placeholders

const template = '<h1>{{}}</h1><p>{{}}</p>'
const data = ['Title', 'Content'] // Will replace placeholders in order
print(template, data, 'document.html')

Direct String/Number

const template = '<h1>{{0}}</h1>' // Using index-based placeholder
const data = 'My Title'
print(template, data, 'document.docx')