Newer
Older
smart-metering-front / src / utils / printUtils.ts
import printJS from 'print-js'
// JSON表头配置项
interface IJsonPropertie {
  field: string // 字段名
  displayName: string // 要显示的中文名
  columnSize?: string // 列宽度,非必填
}
/**
 * 打印HTML元素
 * @param element 元素id
 * @param header 打印标题
 * @param style 打印样式
 * @param ignoreElements 忽略元素id列表
 */
export function printHtml(element: string, header?: string, style?: string, ignoreElements?: string[]) {
  printJS({
    printable: element, // 标签元素id
    type: 'html', // 打印类型
    header: `<div style="display: flex;flex-direction: column;text-align: center"><h3>${header}</h3></div>`, // '标题',
    targetStyles: ['*'], // 默认情况下,库仅在打印 HTML 元素时处理某些样式。此选项允许您传递要处理的样式数组。例如:[‘padding-top’, ‘border-bottom’]
    style: style || '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾
    ignoreElements: ignoreElements || [], // 传入打印父 html 元素时应忽略的 html id 数组。使其不打印。
  })
}

export function printJSON(jsonData: Array<Object> | Object, properties: IJsonPropertie[], header?: string, style?: string, gridHeaderStyle?: string, gridStyle?: string) {
  printJS({
    printable: jsonData, //  json 数据对象
    type: 'json',
    properties,
    header: `<div style="display: flex;flex-direction: column;text-align: center"><h3>${header}</h3></div>`, // '表单',
    style: style || '', // 可选-打印时去掉眉页眉尾
    gridHeaderStyle: gridHeaderStyle || 'border: 1px solid #000;text-align:center',
    gridStyle: gridStyle || 'border: 1px solid #000;text-align:center',
  })
}

/**
 * 打印图片
 * @param element 元素id
 * @param header 打印标题
 * @param style 打印样式
 * @param ignoreElements 忽略元素id列表
 */
export function printImage(image: string, header?: string, style?: string) {
  printJS({
    printable: image, // 标签元素id
    type: 'image', // 打印类型
    header: `<div style="display: flex;flex-direction: column;text-align: center"><h3>${header}</h3></div>`, // '标题',
    targetStyles: ['*'], // 默认情况下,库仅在打印 HTML 元素时处理某些样式。此选项允许您传递要处理的样式数组。例如:[‘padding-top’, ‘border-bottom’]
    style: style || '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾
  })
}