Newer
Older
xc-business-system / 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};', // 可选-打印时去掉眉页眉尾
  })
}

/**
 * 打印pdf
 * @param pdfUrl
 * @param header
 * @param style
 */
export function printPdf(pdfUrl: string, header?: string, style?: string) {
  printJS({
    printable: pdfUrl, // 标签元素id
    type: 'pdf', // 打印类型
    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};', // 可选-打印时去掉眉页眉尾
  })
}

/**
 * 二进制流转blob
 * @param stream // 流
 * @param type 文件类型
 * @returns
 */
export function streamToBlob(stream: any, type: string) {
  // 创建blob对象,解析流数据
  const blob = new Blob([stream], {
    // 如何后端没返回下载文件类型,则需要手动设置:type: 'application/pdf;chartset=UTF-8' 表示下载文档为pdf,如果是word则设置为		  msword,excel为excel
    type,
  })
  return blob
}

// 打印文件流
export function printStream(stream: any) {
  const url = URL.createObjectURL(stream) // 后端返回的文本流
  var iframe = document.createElement('iframe')
  iframe.setAttribute('id', 'printPDF')
  iframe.setAttribute('name', 'printPDF') // 不可少
  iframe.style.frameborder = 'no'
  iframe.style.display = 'none'
  iframe.style.pageBreakBefore = 'always' // 打印保留分页
  iframe.src = url
  document.body.appendChild(iframe)
  setTimeout(() => {
    document.getElementById('printPDF').contentWindow.print()
  }, 1000)
  window.URL.revokeObjectURL(iframe.src)
}