快速上手

安装

注意

前端工程化配置较多,如果遇到报错不要慌. 一般可能跟你项目环境有关. 比如: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.

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

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

npm

# 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

pnpm

# 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

yarn

# 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" />

引入组件

Svelte

<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>
  <Designer {template} on:onDesigned="{onDesigned}"></Designer>
</template>

Vue

<template>
  <Designer :template="template" @onDesigned="onDesigned" />
</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>

Vue3

<template>
  <Designer :template="template" @onDesigned="onDesigned" />
</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>

React

import { Designer } from '@sv-print/react';

const App = () => {
  const [template, setTemplate] = useState({});

  return (
    <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);
      }}
    />
  );
};

Vanilla JS

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 组件, 其他框架同理. 只是写法有些许区别.

付费的宝子们

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

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

联系我