--- theme: devui-blue highlight: vs2015 --- > *sv-print 可视化打印组件*是使用*svelte*开发的*打印设计器*组件(基于 hiprint)；并提供了*Vue3、Vue2、React 的 npm 包*，同时还*支持 Vanilla JS、jQuery 项目*使用。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e0f207353de84281974c3a97d0eef0fb~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3614\&h=2042\&s=1512159\&e=png\&a=1\&b=fbfafa) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4990822ca88844ff9b9b9f1bcbc6b194~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3614\&h=2042\&s=931964\&e=png\&a=1\&b=efefef) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c8180272d3a403891b8656e02687b72~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3614\&h=2040\&s=1525900\&e=png\&a=1\&b=fbfafa) ## 概览通过阅读本文你将知道： * *sv-print 打印组件库的历史及由来* * *入门安装、引入打印样式，组件样式* * *集成组件，参数/事件* * *组件-常用参数* * *组件-常用 API* ## 前言 *sv-print*只所以出现，就是*因为很多小伙伴在群里问*怎么使用 **[vue-plugin-hiprint](https://gitee.com/CcSimple/vue-plugin-hiprint)**(我的开源 js 打印插件)。~~虽然现在已经有很多文章/视频了，但是任然还有些小伙伴不知道怎么用...~~ *为了大家伙能够更方便快捷的集成打印相关功能，所以我就开发了这款打印组件库。* 本来*sv-print 组件库*是*打算开源*的，但是当我看到下方这些时： ![2023-10月前截取](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/55538ccc3826417d8033a5ebca27f498~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2006\&h=1516\&s=481835\&e=png\&a=1\&b=fefefe) 有的就改改名字，有的名字改了 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、汉信码等等 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/52a3fcc4813143b78c05850d7c0b12fe~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1212\&h=986\&s=460657\&e=png\&a=1\&b=fafafa) 2. *Fabric.js*插件：强大而简单的 JS Canvas 库；绘制各种图形、文字 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aff17793fbc74648923a723910dc4cad~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1548\&h=1304\&s=260883\&e=png\&a=1\&b=f0f0f0) 3. *echarts*插件：ECharts 可视化图表；打印你想要的各种图表 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3c375546aed442ff80e8d160034eae04~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=830\&h=484\&s=83925\&e=png\&a=1\&b=3901d3) 大家可以进入官网/demo 查看体验：在线文档: 在线 demo: *** ## 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 等包管理器*进行安装。 2. 打印样式引入：复制 *node\_modules/@sv-print/hiprint/dist/print-lock.css* 到项目的资源目录下，如图： ![复制 print-lock.css 文件](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eebbab4b87374604b4266a0a0ee2f40a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=566\&h=498\&s=40535\&e=png\&a=1\&b=151515) 注意：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 复制到：项目的资源目录下 ![vite资源目录](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5c1c02919de342a7b735161b48b54aa0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=796\&h=410\&s=40127\&e=png\&a=1\&b=131313) 如果你用的*其他打包工具 webpack、rullup*等等，你需要先了解你使用工具的基础知识。然后找到 *index.html*，编辑引入这个 *print-lock.css* 样式。如图： ![引入print-lock.css](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d6cae426a74e432fa1cd5cf907874a08~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1312\&h=602\&s=139703\&e=png\&a=1\&b=181818) 3. 引入组件样式：在项目 *入口文件* 引入组件样式：入口文件一般是 *src/main.js* 或者 *src/main.ts* 如图： ![引入组件样式](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b103f15bb9a64725842675e2d7cb600b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=714\&h=392\&s=61255\&e=png\&a=1\&b=171717) *当然你也可以在你使用的组件中引入这个样式*。 ## 2.集成组件这里以 Vue2.x 项目集成举例，就像引入其他 vue 组件一样： *就是这么几行代码！完事儿\~* 至于*组件*有什么*参数、插槽*，就需要*看看文档*啦\~ *** ## 3.常用/核心参数 | 参数 | 类型 | 作用 | | ----------- | ---------------------- | --------------------------------------------------------------------------------- | | config | `object` | 相当于 *hiprint.setConfig(xx)* | | providers | `array` | 相当于 *hiprint.init({providers:xx})* | | providerMap | `object/array