安装
注意
前端工程化配置较多,如果遇到报错不要慌. 一般可能跟你项目环境有关. 比如: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 库 |
根据您项目框架选择对应组件
比如 vue3 框架, 则安装 @sv-print/vue3 组件.
一般 react,vue,vue3 3个框架的包不会频繁更新.
如果见更新日志有新功能. 你可以安装对应更新的包:
npm i @sv-print/hiprint@latest
npm i sv-print@latest引入组件样式
以 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 组件, 其他框架同理. 只是写法有些许区别.