haru1990/easy-print

一个基于hiprint的打开即用的打印插件

easy-print

一个基于hiprint的打开即用的打印插件

安装使用

安装

npm i -D easy-print

使用

import hiprint from 'easy-print';
import panel from './panel.js';

// 初始化打印模板
const hiprintTemplate = new hiprint.PrintTemplate({ template: panel });

说明：panel是你编写的打印面板JSON对象，可以在hiprint官网自己进行配置生成。

推荐使用方式

推荐使用的业务Print组件结构
|-----Print
|--------index.js
|--------adapter.js
|--------panel.js

文件介绍：

• Print 文件夹就是一个打印面板组件，使用方式如下：

import React from 'React';
import Print from './Print';

const Demo = (() => {
  const ref = React.useRef();
  const printList = [{aa: 123}];
  return (
    <Print printList={data} ref={ref} />
  );
});

其中printList是需要批量打印的原始业务数据。

• index.js 就是这个面板打印的入口，提供预览页面以及调起浏览器打印的入口。
• adapter.js 就是用来将组件接受的业务打印数据转换成我们面板所需要的打印数据。
• panel.js 就是打印面板JSON对象。

上面的详细例子见 example 文件夹。

补充：reactDom 方式使用

上述推荐使用的方式，是依赖 jQuery 生成的 dom 元素，在批量打印很多的时候可能会有性能问题。

为解决该问题，提供新的 api hiprint.getReactDom(panel, printData)，不再 jQuery 生成 dom，而是使用 React 生成 dom，提高渲染速度。

使用方式：

import React from 'react';
import ReactDom from 'react-dom';
import hiprint from 'easy-print';
import panel from './panel.js';

const printData = [];

const reactDom = hiprint.getReactDom(panel, printData);
ReactDom.render(reactDom, document.getElementById('test'));

easy-print's Issues

支持静默打印吗？

不弹出打印预览，直接就能打印

Vue可以用吗?

Vue可以用吗?

请问您的 demo 要怎么样才能跑起来呢？

我尝试了通过 create-react-app 来初始化一个项目，然后把您的 demo 文件复制到根目录，执行 npm i -D easy-print，然后执行 npm start，运行起来后报错，根据提示，执行了：cnpm i -S typescript，然后把 App.js 改为 app.js，再执行 npm start，最后报错如下：

./src/Print/index.jsx
  Line 36:25:  'props' is not defined  no-undef
  Line 41:23:  'ref' is not defined    no-undef

请问如何实现自定义模板的配置

请问如何实现自定义模板的配置，类似官网的实例1

能否提供一个demo

打算在vue项目中使用hiprint,能否提供一个使用样例，谢谢🙏

请假vue如何使用这个组件呢