Vue 3 Print Template Designer

A comprehensive drag-and-drop print template designer built with Vue 3 and Bootstrap 5. Create professional printable documents, reports, invoices, labels, and other materials with an intuitive visual interface.

Features

🎨 Visual Designer Interface

• Canvas Area: Zoom (10%-200%), pan, grid/snap toggle, rulers with measurements
• Multiple Page Support: A4, Letter, and custom page sizes
• Drag & Drop System: Component library with visual feedback and auto-scroll

📝 Design Elements

• Text Elements: Rich text editing, font controls, alignment, dynamic binding
• Image Elements: Upload, resize, filters, SVG/PNG/JPG support
• Advanced Controls: Properties panel with position, size, styling options

💾 Template Management

• Save/Load System: Template library with thumbnails and version history
• Import/Export: JSON template files with backup/restore functionality
• Sample Templates: Pre-built invoice and label templates

📄 Export & Print

• PDF Generation: High-quality output with proper scaling
• Print Options: Direct browser printing with responsive layouts
• Preview Mode: Real-time preview before export

Quick Start

Installation

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Usage

// Basic integration
import { createApp } from 'vue'
import PtdDesigner from './components/PtdDesigner.vue'
import PtdViewer from './components/PtdViewer.vue'

const app = createApp({
  components: {
    PtdDesigner,
    PtdViewer
  }
})

Component Integration

1. Designer Component (ptd-designer)

<template>
  <ptd-designer 
    @template-updated="handleTemplateUpdate"
    ref="designerRef"
  />
</template>

<script>
import PtdDesigner from './components/PtdDesigner.vue'

export default {
  components: { PtdDesigner },
  methods: {
    handleTemplateUpdate(template) {
      // Handle template changes
      console.log('Template updated:', template)
    },
    
    loadTemplate() {
      // Load a saved template
      const template = {
        elements: [...],
        pageSize: 'a4'
      }
      this.$refs.designerRef.loadTemplate(template)
    },
    
    getTemplate() {
      // Get current template
      return this.$refs.designerRef.getTemplate()
    }
  }
}
</script>

2. Viewer Component (ptd-viewer)

<template>
  <ptd-viewer :template="currentTemplate" />
</template>

<script>
import PtdViewer from './components/PtdViewer.vue'

export default {
  components: { PtdViewer },
  data() {
    return {
      currentTemplate: {
        elements: [
          {
            id: 1,
            type: 'text',
            x: 50,
            y: 50,
            width: 200,
            height: 40,
            content: 'Sample Text',
            fontSize: 16,
            color: '#000000'
          }
        ],
        pageSize: 'a4'
      }
    }
  }
}
</script>

Custom Field Examples

Text Field

const textField = {
  id: 1,
  type: 'text',
  x: 100,
  y: 50,
  width: 200,
  height: 40,
  content: 'Custom Text Content',
  fontSize: 16,
  color: '#333333'
}

Image Field

const imageField = {
  id: 2,
  type: 'image',
  x: 100,
  y: 120,
  width: 150,
  height: 100,
  src: 'https://example.com/image.jpg',
  // or base64 data URL for uploaded images
  src: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ...'
}

PDF Export Example

// In your component
methods: {
  async exportToPDF() {
    // The viewer component handles PDF export automatically
    // Just call the export method on the viewer
    await this.$refs.viewerRef.exportToPDF()
  }
}

Template Management

import { useTemplateManager } from './composables/useTemplateManager.js'

export default {
  setup() {
    const {
      templates,
      saveTemplate,
      loadTemplate,
      deleteTemplate,
      exportTemplate,
      importTemplate
    } = useTemplateManager()

    // Save a template
    const saveCurrentTemplate = (template, name) => {
      return saveTemplate(template, name)
    }

    // Load a template
    const loadSavedTemplate = (templateId) => {
      return loadTemplate(templateId)
    }

    return {
      templates,
      saveCurrentTemplate,
      loadSavedTemplate
    }
  }
}

Advanced Features

Custom Page Sizes

// Add custom page size in PtdDesigner.vue
const customPageSize = {
  width: 800,
  height: 600,
  widthPx: 800,
  heightPx: 600
}

Dynamic Data Binding

// Text elements support dynamic content
const dynamicText = {
  type: 'text',
  content: '{{customerName}}', // Template variable
  // ... other properties
}

// Replace variables before export
const processTemplate = (template, data) => {
  template.elements.forEach(element => {
    if (element.type === 'text') {
      element.content = element.content.replace(/\{\{(\w+)\}\}/g, (match, key) => {
        return data[key] || match
      })
    }
  })
  return template
}

Keyboard Shortcuts

• Ctrl+Z / Cmd+Z: Undo (planned)
• Ctrl+Y / Cmd+Y: Redo (planned)
• Ctrl+C / Cmd+C: Copy element (planned)
• Ctrl+V / Cmd+V: Paste element (planned)
• Delete: Delete selected element
• Arrow Keys: Move selected element

Browser Support

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

Dependencies

• Vue 3.4+
• Bootstrap 5.3+
• jsPDF 2.5+
• html2canvas 1.4+

License

MIT License - see LICENSE file for details

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

Support

For issues and questions:

• GitHub Issues: Create an issue with detailed description
• Documentation: Check the inline code comments
• Examples: See the /examples directory for more use cases# vue3-print-template-designer