install

npm install print-paper

usage

import { Print } from 'print-paper'

const str =
  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit excepturi corrupti dicta expedita commodi! Velit, ab autem! Minima minus neque quam fugit, beatae ut recusandae dolorum quos repudiandae laudantium odio mollitia facilis esse quis veniam quia sed dolores doloribus vel. Quaerat suscipit incidunt ullam, totam molestiae exercitationem! Unde, ipsam numquam!'

const print = new Print('A5', 'horizontal', 0)
// size：A4 A5
// direction：horizontal 水平方向，vertical 垂直方向
// margin：纸张距离内容的距离，单位为mm

// 修改成你的容器
const container = document.querySelector('#app')

// 添加元素到容器中（这步操作必须在print.create()前执行）
container.appendChild(print.element)

// 通过setTemplate设置的模板将会重复出现在每一页
// 模板的位置请自行通过css设置，例如 position:absolute;bottom:0;height:40px;
print.setTemplate(`<div style="height:80px;line-height:80px;text-align:center;">Header</div>`)

// tips：对绝对定位的元素，若需要单行文字居中，请使用flex而非light-height
print.setTemplate(
  `<div style="display:flex;flex-direction:column;justify-content:center;position:absolute;left:0;bottom:0;width:100%;height:80px;text-align:center;">Footer</div>`
)

const arr = new Array(30).fill(0).map(() => ({
  name: str.slice(0, Math.ceil(Math.random() * 200) + 50),
}))
print.setData(arr)

// 通过setActiveTemplate设置单个动态模板，若纸张剩余空间不够，会自动创建新纸张并将未完成的打印数据书写在新纸张上
print.setActiveTemplate(data => {
  return `<div>${data.name}</div>`
})

// 生成打印内容
print.create()

// 自行打印：鼠标右键菜单-打印 | 控制台输入print()

tips

如果使用在 React 中。为避免产生元素重叠，请在元素添加到容器前设置容器的innerHTML为''

container.innerHTML = ''
container.appendChild(print.element)