[Open-source Recommendation] Web Print Designer vg-print Based on Vue 3/Vue 2 + Hiprint

In web development, printing functionality has always been a headache. Traditional CSS printing struggles to precisely control pagination, headers and footers, and complex layouts, while the printing plugins available on the market are either expensive or have complex integrations.

Recently, in our project, we have encapsulated a set of out-of-the-box Vue 3/Vue 2 print design component libraries based on the renowned hiprint library, named vg-print. It not only supports visual drag-and-drop design templates but also integrates preview, PDF/image export, and even supports silent printing in conjunction with the client. Additionally, it is partially based on the functionality of vue-plugin-hiprint. Today, I would like to share this open-source project with everyone, hoping to assist developers and users who may need it.
Why choose vg-print?
vg-print is a printing solution based on the Vue 3 ecosystem (also supports Vue 2). It is not just a simple encapsulation of hiprint, but also provides a complete FullDesigner component.

Vue 2 version: If you are using Vue 2 with webpack 4.0 or above, please refer to vg-print-vue2

The documentation is constantly being improved. If you have any questions, please contact me 👉 Click to enter vg-print developer documentation

Addressing core pain points:

Visual design: No longer handwriting complex print styles, directly drag and drop to generate templates.
Out of the box: The component can be used immediately after being introduced, without requiring cumbersome initialization configuration.
Comprehensive functions: Supports preview, printing, exporting to PDF, exporting images, client-side exporting, and data source configuration.
Silent printing: With built-in WebSocket connectivity, it can achieve click-to-print functionality in conjunction with the client, eliminating the need to pop up a browser print dialog box.
Unlimited: No domain name restrictions, supports offline use, and is completely free. Feature display: Insert image description here. Main features: FullDesigner component: A fully functional designer that integrates a header action bar and preview function.

Multi-format export: Built-in PDF and image export plugins to generate high-definition reports.

Multi-language support: Supports multiple languages such as Chinese, English, and Japanese, making it suitable for international projects.

Responsive layout: Automatically adapts to different screen sizes, with secondary buttons automatically collapsing on smaller screens. Quick start. Below is a demonstration of how to quickly integrate it into a Vue 3 project.

Install dependencies

To ensure consistency of print styles across different environments (such as preview and direct printing), it is recommended to import the style files into the project when using npm i vg-print.

Using the FullDesigner component is the simplest integration method, which can be directly utilized within the page:

<!-- Customize the left side of the header --> My Print Designer

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

import { ref } from 'vue'// Import the vg-print component (assuming it has been globally registered or locally imported) const designer = ref(null) // Initial template data (optional) const initialTemplate = { panels: [] } // Print test data const printData = [{ name: 'Test User', id: 1001 }] // Save template callback const handleSave = ({ template, data }) => { console.log('Saved template JSON:', JSON.stringify(template)) // Here you can save the template to the backend database} // Call the internal method of the component const handlePreview = () => { designer.value?.value?.preView()} const handlePrint = () => { designer.value?.value?.print()}

.print-page { height: 100vh;}.header-title { font-size: 18px; font-weight: bold; color: #fff; margin-left: 10px;}Advanced: Silent Printing For scenarios requiring high-frequency printing (such as express delivery labels and receipts), the browser's built-in print preview window can significantly affect efficiency. vg-print supports silent printing by connecting to a local client.

Only need to configure hi-host and hi-token:

in conjunction with the accompanying Electron client, allows for direct paper output upon clicking a button.
Insert image description here

Download the accompanying client:

To achieve silent printing, a specialized client tool needs to be installed. I have uploaded the compiled installation package to CSDN, and everyone can directly download and use it:

👉 Click to download: Silent Print Client Tool (Windows/Mac)

Welcome everyone to download and experience. If you have any questions, feel free to leave a message in the comment section