DOCSEARCHbyAlgolia
Submit Docs

sv-print Printing Component

website·Indexed 31 days ago

https://www.ibujian.cn

A printing solution featuring a designer component, template management, and a client based on Vue3, Naive UI, TypeScript, and Electron-Egg. It supports browser printing, silent printing, and PDF export, with an extensible plugin system for adding custom API methods, UI views, and element properties. Includes core objects like hiprint.PrintTemplate and integration guides for Socket.IO.

Tokens
33.7K
Snippets
164
Records
212
Agent score
49%

What's inside sv-print

  1. Overview of sv-print printing client features

    sv-print is a cross-platform printing client (Windows/Mac/Linux) built with Vue3, Naive UI, TypeScript, and Electron-Egg. It provides the following capabilities:

    • Template Design: Integrated template designer for saving local templates and a template center supporting custom API requests.
    • Communication: Supports triggering prints via socket.io, MQTT, and HTTP requests.
    • Printer Management: Ability to view printer information, disable printers, and preview rendering.
    • Extensibility: Supports custom HTML rendering pages, custom template rendering pages, and custom log preview pages.
    • Cloud Printing: Supports cloud and relay services for remote printing.
    • Logging: Includes log viewing, log reporting, and configurable log retention periods.
    • Configuration: Configuration can be modified via socket.io, MQTT, HTTP requests, or client-side import/export.

  2. Overview of sv-ssh tool for automated frontend deployment

    sv-ssh is an open-source tool designed to automate the deployment of frontend projects using Node.js, eliminating the need to manually copy and paste deployment code.
    # Source code available at: https://github.com/CcSimple/sv-ssh

  3. Overview of sv-print view plugins

    View plugins (identified by the @sv-print/plugin-view-xxx naming convention) are UI-based extensions used to enrich the capabilities of the sv-print designer. These plugins are designed to be imported on-demand to reduce the overall bundle size and to provide flexibility for users to implement custom plugins if conflicts arise (e.g., version conflicts with libraries like CodeMirror).

  4. Overview of hiprint Global Objects

    The hiprint system exposes several global objects on the window object to manage printing configurations, templates, connectivity, and utility functions:

    • HIPRINT_CONFIG: Global configuration object containing parameters for element types and designer settings.
    • hiprint: The primary API for creating template objects, handling multi-template printing/previewing, initializing providers, and managing draggable elements and parameter objects.
    • hiwebSocket: A socket.io instance used to connect to the printing client for sending and receiving data, as well as managing connection states (disconnect/reconnect).
    • hinnn: A utility class providing common helper methods such as event handling, unit conversion, throttling, debouncing, and converting numbers to uppercase Chinese characters.

  5. Overview of hiprint v0.2.x Global Objects

    The hiprint library exposes several global objects on the window object to manage printing configurations, template creation, client communication, and general utilities.

  6. Overview of sv-print API plugins

    API plugins (following the @sv-print/plugin-api-xxx naming convention) are used to extend the API of the template object. They are designed to be imported on-demand to reduce the overall bundle size and provide a mechanism for users to implement custom extensions, such as exporting to Word or Excel.

  7. Overview of sv-print print designer

    sv-print is a print designer component built using Svelte and based on hiprint. It is designed to be framework-agnostic, meaning it can be integrated into projects using React, Vue, Angular, Svelte, jQuery, or plain HTML. It provides a visual interface for designing print templates, managing data binding, and exporting documents.

  8. Overview of sv-print plugin architecture

    sv-print uses a hook-based plugin mechanism to extend core logic. Plugins execute at specific lifecycle moments to implement features such as adding new style parameters for text/image elements, introducing new element types (e.g., ECharts or bwip-js), or defining custom global keyboard shortcuts.

  9. Understand and use hiprint print templates

    Print templates in hiprint are represented as JSON data. Data is populated into the template based on the field property of the template elements. For example, if a text element has a field named "name", providing a data object with a name key will fill that element.
    const printData = { name: '张三' };
// Template object
let template = { panesl: [{}] };
let printTemplate = new hiprint.PrintTemplate({ template: template });

// Browser print (single)
printTemplate.print(printData);

// Browser print (batch)
printTemplate.print([printData, printData, printData]);

  10. Use sv-ssh for automated frontend project deployment

    sv-ssh is an open-source tool designed to automate the deployment of frontend projects using Node.js, eliminating the need to manually copy and paste deployment code.
    # Source code available at
github.com/CcSimple/sv-ssh

  11. Install sv-print Functional Plugins

    Functional plugins provide core utility features for the sv-print environment:
    # Internationalization (i18n) and multi-language support
npm install @sv-print/plugin-i18n

# Designer usage guide/onboarding
npm install @sv-print/plugin-driver

  12. Create a custom API plugin for sv-print

    API plugins allow you to extend the template object with new methods. Common use cases include exporting templates as images or PDFs, encrypting template JSON, or sending print data via MQTT. To implement a custom API, you must define the logic for the method and then register it using the newPrintTemplate hook within a plugin definition.