安装引入
安装
注意
前端工程化配置较多,如果遇到报错不要慌. 一般可能跟你项目环境有关. 比如: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# Svelte/Vanilla JS 组件
npm i sv-print
# React 组件
npm i @sv-print/react
# Vue2 组件
npm i @sv-print/vue
# Vue3 组件
npm i @sv-print/vue3# Svelte/Vanilla JS 组件
pnpm add sv-print
# React 组件
pnpm add @sv-print/react
# Vue2 组件
pnpm add @sv-print/vue
# Vue3 组件
pnpm add @sv-print/vue3# Svelte/Vanilla JS 组件
yarn add sv-print
# React 组件
yarn add @sv-print/react
# Vue2 组件
yarn add @sv-print/vue
# Vue3 组件
yarn add @sv-print/vue3引入组件样式
以 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" />引入组件
<script>
import { Designer } from 'sv-print';
let template = {};
function onDesigned(e) {
console.log('onDesigned');
console.log(e);
const { hiprint, designerUtils } = e.detail;
console.log(hiprint);
console.log(designerUtils);
console.log(designerUtils.printTemplate);
}
</script>
<template>
<!-- 宽高自定义 -->
<div style="width: 100vw; height: 100vh">
<Designer {template} on:onDesigned="{onDesigned}"></Designer>
</div>
</template><template>
<!-- 宽高自定义 -->
<div style="width: 100vw; height: 100vh">
<Designer :template="template" @onDesigned="onDesigned" />
</div>
</template>
<script>
import { Designer } from '@sv-print/vue';
export default {
components: { Designer },
data() {
return { template: {} };
},
methods: {
onDesigned(e) {
console.log('onDesigned');
console.log(e);
const { hiprint, designerUtils } = e.detail;
console.log(hiprint);
console.log(designerUtils);
console.log(designerUtils.printTemplate);
},
},
};
</script><template>
<!-- 宽高自定义 -->
<div style="width: 100vw; height: 100vh">
<Designer :template="template" @onDesigned="onDesigned" />
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Designer } from '@sv-print/vue3';
let template = ref({});
const onDesigned = (e) => {
console.log('onDesigned');
console.log(e);
const { hiprint, designerUtils } = e.detail;
console.log(hiprint);
console.log(designerUtils);
console.log(designerUtils.printTemplate);
};
</script>import { Designer } from '@sv-print/react';
const App = () => {
const [template, setTemplate] = useState({});
return (
<!-- 宽高自定义 -->
<div style="width: 100vw; height: 100vh">
<Designer
template={template}
onDesigned={(e) => {
console.log('onDesigned');
console.log(e);
const { hiprint, designerUtils } = e.detail;
console.log(hiprint);
console.log(designerUtils);
console.log(designerUtils.printTemplate);
}}
/>
</div>
);
};import { Designer } from 'sv-print';
const designer = new Designer({
target: document.body, // 容器
props: {
template: {},
},
});
designer.$on('onDesigned', (e) => {
console.log('onDesigned');
console.log(e);
const { hiprint, designerUtils } = e.detail;
console.log(hiprint);
console.log(designerUtils);
console.log(designerUtils.printTemplate);
});温馨提示
后续系列教程案例代码,均使用 vue3 组件, 其他框架同理. 只是写法有些许区别.
常见问题
sv-print 怎么安装？
按项目框架选择对应 npm 包：Vue3 装 @sv-print/vue3、Vue2 装 @sv-print/vue、React 装 @sv-print/react、Svelte/原生 JS 装 sv-print，npm / pnpm / yarn 均可安装。安装后在入口文件引入组件样式（如 sv-print/dist/style.css），再引入 Designer 组件即可使用。
安装后打印样式不对怎么办？
需要把 node_modules/@sv-print/hiprint/dist/print-lock.css 复制到站点资源目录（如 Vue 项目的 public 目录），并在入口 index.html 中以 media="print" 引入，文件名必须保持 print-lock.css。若部署后 https://你的域名/print-lock.css 无法正常访问，打印样式将不生效。
版权所有
版权归属：