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 作为文章示例:

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

参数 类型 作用
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可视化打印组件库让开发者更快捷的接入了自定义模板打印功能。可视化拖拽设计,让设计模板更快、更多样化。

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

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


相关推荐
y先森几秒前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189114 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
天天进步20152 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js