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

大家好，欢迎来到IT知识分享网。

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.安装引入

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

1. 安装：

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

css

代码解读

复制代码

npm i @sv-print/vue

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

css

代码解读

复制代码

npm i @sv-print/vue3

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

css

代码解读

复制代码

npm i @sv-print/react

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

1. 打印样式引入：

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

注意：print-lock.css 的路径

perl

代码解读

复制代码

// 下方这个目录 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 组件一样：

xml

代码解读

复制代码

<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.常用/核心 参数

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

4.常用/核心 API

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

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

javascript

代码解读

复制代码

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

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

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

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

ts

代码解读

复制代码

// 获取设计器模板 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可视化打印组件库让开发者更快捷的接入了自定义模板打印功能。可视化拖拽设计，让设计模板更快、更多样化。

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

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

原文链接：https://juejin.cn/post/0