Streamlined Web Printing with vg-print on Vue 3/2

Revolutionizing Web Printing with vg-print

In the realm of web development, printing has historically been a complex challenge. Traditional CSS solutions often falter when precise pagination, headers, footers, and intricate layouts are required. Existing plugins are often costly or difficult to integrate. Enter vg-print, a comprehensive open-source solution based on Vue 3 and Vue 2 that promises to transform how developers manage printing tasks online.

Why Choose vg-print?

vg-print is designed to seamlessly integrate with the Vue 3 ecosystem, while still supporting Vue 2. It offers more than just a simple encapsulation of the hiprint library, providing a complete FullDesigner component to meet all printing needs.

• Visual Design: Say goodbye to cumbersome coding. With vg-print, you can use a drag-and-drop interface to create print templates efficiently.
• Ease of Use: This solution is plug-and-play. Introduce the component into your project and bypass complex configurations.
• Versatile Functions: Features include preview capabilities, direct printing, and exports to PDF and image formats.
• Silent Printing: Utilizing WebSocket technology, vg-print allows click-to-print functionality without triggering browser dialogs.
• Unlimited and Free: With no domain restrictions, vg-print supports offline use and is completely free.

Key Features

• FullDesigner Component: A robust designer that incorporates header actions and preview functions.
• Multi-Format Export: Utilize built-in plugins for high-definition PDF and image reports.
• Multi-Language Support: Accommodates languages including Chinese, English, and Japanese for international projects.
• Responsive Layout: Automatically adjusts to various screen sizes, ensuring a seamless user experience.

Quick Start

To integrate vg-print into a Vue 3 project, follow these steps:

1. Install Dependencies: Ensure style consistency across environments by importing necessary style files with npm i vg-print.
2. Integrate FullDesigner Component: Use the component directly in your page:

<template>
  <div>
    <!-- Customize header -->
    My Print Designer
    <template #headerRight>
      <el-button type="primary" @click="handlePreview">Preview</el-button>
      <el-button type="success" @click="handlePrint">Direct Print</el-button>
    </template>
  </div>
</template>

import { ref } from 'vue';

const designer = ref(null);
const initialTemplate = { panels: [] };
const printData = [{ name: 'Test User', id: 1001 }];

const handleSave = ({ template, data }) => {
  console.log('Saved template JSON:', JSON.stringify(template));
};

const handlePreview = () => {
  designer.value?.value?.preView();
};

const handlePrint = () => {
  designer.value?.value?.print();
};

Advanced Feature: Silent Printing

For high-frequency printing tasks like receipts, vg-print supports silent printing. By integrating with an Electron client, you can bypass the browser's print dialog, directly triggering paper output.

To achieve this:

• Configure hi-host and hi-token
• Download and install the client tool for silent printing available for Windows and Mac.

Explore vg-print and elevate your web development projects with efficient, streamlined printing solutions.