sv-print 是什么

sv-print 是一套纯前端的 web 可视化打印设计器与打印解决方案：通过拖拽设计打印模板、用 JSON 数据填充内容，在浏览器直接打印或导出 PDF/Excel/Word/图片，也可配合跨平台桌面客户端实现静默打印与云打印。支持 Vue2/3、React、Angular、Svelte、jQuery 及原生 HTML，可离线部署在内网环境。

sv-print 与传统打印控件的对比

能力	sv-print	LODOP / C-Lodop 等传统打印控件
部署方式	纯前端 npm 包，无需安装浏览器插件	需安装控件或本地打印服务
模板设计	内置可视化拖拽设计器，所见即所得	代码定义模板或借助第三方设计器
前端框架	Vue2/3、React、Angular、Svelte、jQuery	以原生 JS 调用为主，框架集成较繁琐
导出格式	PDF（位图/矢量）、Excel、Word、图片	PDF、Word 等
静默打印	桌面客户端（Win/Mac/Linux）+ 多种通信协议	C-Lodop 本地服务转发
离线内网部署	支持	支持

常见问题

前端如何做打印模板的可视化设计？

使用 sv-print：npm 引入 Designer 组件，几行代码即可在页面内获得拖拽式打印模板设计器。模板保存为 JSON，支持导入导出与模板中心 API，方便团队复用与版本管理。

前端如何实现静默打印（无弹窗打印）？

安装 sv-print 桌面打印客户端（支持 Windows/Mac/Linux），业务系统通过 socket.io、MQTT 或 HTTP 将打印数据与模板发送给客户端，由客户端调用打印机完成静默打印，并支持打印状态监听与日志查询。

sv-print 不安装控件能导出 PDF 吗？

可以。注册 @sv-print/plugin-api-pdf（或矢量版 plugin-api-pdf-vector）插件后，模板实例即可调用 toPdf / toVectorPdf 导出 PDF，纯前端完成，无需安装任何浏览器控件。还可导出 Excel（plugin-api-excel）、Word（plugin-api-word）与长图（plugin-api-image）。

sv-print 收费吗？

sv-print 设计器为付费授权模式（永久授权制，价格见快速开始文档），提供完整的可视化设计器与打印能力；官方插件体系与打印客户端可按需组合使用。

几行代码即可获得完整设计器与预览能力

让 AI 帮你集成

描述你的想法💡 skill 帮你搞定！ 见文档：AI skill 集成

Svelte.svelte

<script>
import { Designer } from 'sv-print';
let template = {};

function onDesigned(e) {
  console.log('onDesigned');
  console.log(e);
  const { hiprint, designerUtils } = e.detail;
  console.log(hiprint);
  console.log(designerUtils);
  console.log(designerUtils.printTemplate);
}
</script>

<template>
  <!-- 宽高自定义 -->
  <div style="width: 100vw; height: 100vh">
    <Designer {template} on:onDesigned="{onDesigned}"></Designer>
  </div>
</template>

Vue2.vue

<template>
  <!-- 宽高自定义 -->
  <div style="width: 100vw; height: 100vh">
    <Designer :template="template" @onDesigned="onDesigned" />
  </div>
</template>

<script>
import { Designer } from '@sv-print/vue';

export default {
  components: { Designer },
  data() {
    return { template: {} };
  },
  methods: {
    onDesigned(e) {
      console.log('onDesigned');
      console.log(e);
      const { hiprint, designerUtils } = e.detail;
      console.log(hiprint);
      console.log(designerUtils);
      console.log(designerUtils.printTemplate);
    },
  },
};
</script>

Vue3.vue

<template>
  <!-- 宽高自定义 -->
  <div style="width: 100vw; height: 100vh">
    <Designer :template="template" @onDesigned="onDesigned" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Designer } from '@sv-print/vue3';
let template = ref({});
const onDesigned = (e) => {
  console.log('onDesigned');
  console.log(e);
  const { hiprint, designerUtils } = e.detail;
  console.log(hiprint);
  console.log(designerUtils);
  console.log(designerUtils.printTemplate);
};
</script>

React.jsx

import { Designer } from '@sv-print/react';

const App = () => {
  const [template, setTemplate] = useState({});

  return (
    <!-- 宽高自定义 -->
    <div style="width: 100vw; height: 100vh">
      <Designer
        template={template}
        onDesigned={(e) => {
          console.log('onDesigned');
          console.log(e);
          const { hiprint, designerUtils } = e.detail;
          console.log(hiprint);
          console.log(designerUtils);
          console.log(designerUtils.printTemplate);
        }}
      />
    </div>
  );
};

VanillaJS.js

import { Designer } from 'sv-print';

const designer = new Designer({
  target: document.body, // 容器
  props: {
    template: {},
  },
});

designer.$on('onDesigned', (e) => {
  console.log('onDesigned');
  console.log(e);
  const { hiprint, designerUtils } = e.detail;
  console.log(hiprint);
  console.log(designerUtils);
  console.log(designerUtils.printTemplate);
});

快速开始

快速上手 sv-print 设计器

插件中心

AI设计、导出Excel/Word、条码二维码、数据源面板等 26+ 官方插件

静默/云打印客户端

跨平台打印客户端，socket.io / MQTT / HTTP 三种对接方式

更新日志

查看最新版本更新内容