sv-print可视化打印组件不完全指南①

sv-print 可视化打印组件是使用svelte开发的打印设计器组件(基于 hiprint)；并提供了Vue3、Vue2、React 的 npm 包，同时还支持 Vanilla JS、jQuery 项目使用。

概览

通过阅读本文你将知道：

• sv-print 打印组件库的历史及由来
• 入门安装、引入打印样式，组件样式
• 集成组件，参数/事件
• 组件-常用参数
• 组件-常用 API

前言

sv-print只所以出现，就是因为很多小伙伴在群里问怎么使用 vue-plugin-hiprint(我的开源 js 打印插件)。虽然现在已经有很多文章/视频了，但是任然还有些小伙伴不知道怎么用... 为了大家伙能够更方便快捷的集成打印相关功能，所以我就开发了这款打印组件库。

本来sv-print 组件库是打算开源的，但是当我看到下方这些时：

有的就改改名字，有的名字改了 README 内容删掉，有的名字完全看不出是基于我的版本出来的。 不得不说这些小伙伴挺厉害的，不知道优化了多少功能，我才 0.0.54 版本，他们已经上升到了 0.2.x 、1.x.x

关键里面的 github 源代码还指向的我的 vue-plugin-hiprint 😂

希望能够看到国内开源环境美好的那天😁

所以sv-print目前没有开源的，它相比vue-plugin-hiprint优化了更多功能，比如支持插件机制、更完善的右键菜单、图片套打等等功能； 目前我已经开发了 3 个大插件并提供了 npm 包：

1. bwip-js插件：丰富的二维码、条形码；如：DM 码、GS1、汉信码等等
2. Fabric.js插件：强大而简单的 JS Canvas 库；绘制各种图形、文字
3. echarts插件：ECharts 可视化图表；打印你想要的各种图表

大家可以进入官网/demo 查看体验：

在线文档: ccsimple.gitee.io/sv-print-do…

在线 demo: ccsimple.gitee.io/sv-print-de…

---

1.安装引入

目前提供了前端几种常用框架的组件，如下表：

框架	npm 包
Vue3	@sv-print/vue3
Vue2	@sv-print/vue
React	@sv-print/react
Svelte	sv-print
VanillaJS	sv-print
jQuery	请联系我获取

---

1. 安装：

我这将使用 Vue 2.x 作为文章示例:

npm i @sv-print/vue

假如你使用的是 Vue 3.x 那么应该先这样：

npm i @sv-print/vue3

如果你使用的是 React 那么应该先这样：

npm i @sv-print/react

其他的框架如上方表格所示，使用对应的 npm 包即可。 当然你也可以使用你熟悉的 pnpm、yarn 等包管理器进行安装。

1. 打印样式引入：

复制 node_modules/@sv-print/hiprint/dist/print-lock.css 到项目的资源目录下，如图：

注意：print-lock.css 的路径

// 下方这个目录
node_modules/@sv-print/hiprint/dist/print-lock.css
// 下方这个目录
node_modules/@sv-print/hiprint/dist/print-lock.css
// 下方这个目录
node_modules/@sv-print/hiprint/dist/print-lock.css

复制到：项目的资源目录下

如果你用的其他打包工具 webpack、rullup等等，你需要先了解你使用工具的基础知识。

然后找到 index.html，编辑引入这个 print-lock.css 样式。如图：

1. 引入组件样式：

在项目 入口文件 引入组件样式：

入口文件一般是 src/main.js 或者 src/main.ts 如图：

当然你也可以在你使用的组件中引入这个样式。

2.集成组件

这里以 Vue2.x 项目集成举例，就像引入其他 vue 组件一样：

<template>
  <!-- 设计器容器，设置一个宽高，以适配不同大小 -->
  <div id="parent" style="width: 100vw; height: 100vh">
    <!-- 设计器组件 -->
    <Designer @onDesigned="onDesigned"></Designer>
  </div>
</template>

<script>
// 引入设计器组件
import { Designer } from "@sv-print/vue";
export default {
  //  Vue2 注册组件
  components: { Designer },
  data() {
    return {};
  },
  methods: {
    // 设计器回调
    onDesigned(e) {
      console.log("onDesigned");
      // 注意观察回调的几个对象！！ 很重要！
      // 注意观察回调的几个对象！！ 很重要！
      // 注意观察回调的几个对象！！ 很重要！
      console.log(e);
    },
  },
};
</script>

就是这么几行代码！ 完事儿~

至于组件有什么参数、插槽，就需要看看文档啦~

---

3.常用/核心 参数

参数	类型	作用
config	object	相当于 hiprint.setConfig(xx)
providers	array	相当于 hiprint.init({providers:xx})
providerMap	object/array<object>	相当于 hiprint.PrintElementTypeManager.build(xx.container, xx.value);
plugins	array	相当于 hiprint.register({plugins:xx})
template	object	相当于 new hiprint.PrintTemplate(xx) 或者 new hiprint.PrintTemplate({template:xx})
printData	object/array<object>	组件内预览/打印填充的数据 相当于 printTemplate.getHtml(xx)

这只列举了部分参数， 至于其他的参数，各位小伙伴可以看看在线文档，我相信你可以摸索出来。

---

4.常用/核心 API

很多小伙伴会问到我 sv-print怎么获取模板数据，怎么重写右上角的保存功能等等...

首先通过本文第 2 步，~~作为一个合格的开发者，我觉得你至少已经看过了回调了吧。~~你可以看到回调中的这些内容：

onDesigned(e) {
  console.log("onDesigned");
  console.log(e);
  // 分别是 hiprint模块、打印模板对象、设计器工具类
  const { hiprint, printTemplate, designerUtils } = e.detail;
},

由于历史原因，大家可直接忽略第二个对象。

hiprint 模块对象就不说了，setConfig、init等 API 都需要它调用。

关键就在这个designerUtils对象，它是我简单封装的一个单例类。 设计器 UI 相关的 API 几乎都可以操作了。比如：

// 获取设计器模板 json
designerUtils.printTemplate.getJson(xx);
// 获取设计器预览 html
designerUtils.printTemplate.getHtml(xx);
// 导出模板json文件
designerUtils.export();
// 显示组件内的 预览窗口
designerUtils.preview.show();

这里就不一一列举了， 各位稍微探索一番吧~

---

5.感慨~

这一路走来，不知道修修补补了多少功能；才有相对完善的 vue-print-hiprint打印插件。

虽然它不是很完美，但是它是有价值的，至少近些年它为 33.5k+ 的开发者们集成过打印功能。

感谢每一位曾经为vue-print-hiprint贡献过的小伙伴们~

特别感谢因此插件而结实的群内小伙伴们：迷弟、小龙哥、天哥、伟哥、长老师、心哥、杰哥等；当然还有龟龟们😄。虽然大家来自五湖四海。

6.总结

sv-print可视化打印组件库让开发者更快捷的接入了自定义模板打印功能。可视化拖拽设计，让设计模板更快、更多样化。

由于个人精力有限，文档的编写也不是特别的细致。很多文档或许有些许出入。望请谅解！

希望各位小伙伴们多动手，多观察。有问题多动动脑思考思考🤔

---