快速上手

依赖环境

• Node.js v16+(开发环境是 16.18.1)
• Vite v3+(开发环境是 ^3.2.5)
• Webpack v4+(使用 vue create 创建的项目测试可正常引入)
• jQuery/纯js 项目支持(使用 html + js 项目测试可正常引入 (需要demo 联系我))

安装

目前支持框架/js 如下：

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		hiprint core (js 库)

选择您项目环境版本安装即可

引入组件样式

以 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">

引入组件