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 包:
- bwip-js 插件:丰富的二维码、条形码;如:DM 码、GS1、汉信码等等
- Fabric.js 插件:强大而简单的 JS Canvas 库;绘制各种图形、文字
- 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 | 请联系我获取 |
- 安装:
我这将使用 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 等包管理器进行安装。
- 打印样式引入:
复制 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 样式。如图:
- 引入组件样式:
在项目 入口文件 引入组件样式:
入口文件一般是 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.常用/核心 参数
参数 | 类型 | 作用 |
---|---|---|
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 步,~~作为一个合格的开发者,我觉得你至少已经看过了回调了吧。~~你可以看到回调中的这些内容:
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可视化打印组件库让开发者更快捷的接入了自定义模板打印功能。可视化拖拽设计,让设计模板更快、更多样化。
由于个人精力有限,文档的编写也不是特别的细致。很多文档或许有些许出入。望请谅解!
希望各位小伙伴们多动手,多观察。有问题多动动脑思考思考🤔