快速上手

安装

注意

前端工程化配置较多,如果遇到报错不要慌. 一般可能跟你项目环境有关. 比如:babel、webpack、vite、rollup等插件配置有关.

Package	Status	Description
sv-print		Svelte/Vanilla JS 组件
@sv-print/react		React 组件
@sv-print/vue		Vue 2 组件
@sv-print/vue3		Vue 3 组件
@sv-print/hiprint		js 库

若无授权,会有体验版水印.

宝子们

sv-print是付费的,提供一对一技术支持.有问题直接联系我.

授权金额: 1k/永久. 提供技术支持. 无域名限制,无网可用. 可咸鱼搜索sv-print.

授权购买组件源码: 联系我

根据自己项目环境选择对应组件安装:

引入组件样式

以 vue3 为例:

在main.ts/main.js 文件中引入组件样式

import { createApp } from 'vue';
import App from './App.vue';
// 引入组件样式
import 'sv-print/dist/style.css';

createApp(App).mount('#app');

引入打印样式

重要提醒

需要复制【node_modules/@sv-print/hiprint/dist/print-lock.css】到开发资源目录。

例如: Vue 项目的 public 目录。

假如你部署的网站是: https://www.abcd.com/index.html 那么确保 https://www.abcd.com/print-lock.css 能够正常访问

在你项目的 index.html 入口 添加 print-lock.css 打印样式【名称 print-lock.css】

注意: media="print"

<!-- 可以调整成 相对链接/自有链接, 【重要】名称需要一致 【print-lock.css】-->
<link rel="stylesheet" type="text/css" media="print" href="/print-lock.css" />

引入组件

提示

后续系列教程案例代码,均使用 vue3 组件, 其他框架同理. 只是写法有些许区别.

付费的宝子们

在使用过程中, 遇到问题, 可以联系我.

注意: 直接描述问题, 看到后会及时回复.

联系我