vue中printjs使用指南

使用攻略

• 参考文档
  https://printjs.crabbly.com/
• 分页
  使用css的 page-break-after:always 来控制在某个DIV之后新开一个页面

我是封面
我是目录，你不知道我的内容有多长
我是正文，我需要从一个新页面开始展示

• 标题栏每页重复打印
  因为打印时，表格中的thead和tfoot默认会在每一页重复打印，所以只要设置好表格结构就行。

html打印

<div id="printJS-table">
    <table class="printTable" style="width: 100%; text-align: center" border="0">
      <thead>
        <tr class="maintitle">
          <td :colspan="columns.length">
            <span style="font-size: 20px">{{ modelRef.hospitalName }} 标本阳性率报表span>
          td>
        tr>
        <tr class="subtitle">
          <td :colspan="2">
            统计时间:{{ modelRef.inlineForm.timeSpan[0].format('YYYY/MM/DD') }}-{{
              modelRef.inlineForm.timeSpan[1].format('YYYY/MM/DD')
            }}
          td>
          <td :colspan="columns.length - 4">制表人：{{ modelRef.username }}td>
          <td :colspan="2">打印时间:{{ moment().format('YYYY/MM/DD') }}td>
        tr>
        <tr class="header">
          <th v-for="item in columns" width="">{{ item.title }}th>
        tr>
      thead>
      <tbody>
        <tr
          v-for="(row, index) in printDatalist"
          :class="{ strongRow: row.sampletype == '合计' }"
        >
          <td
            :class="{ lastRow: printDatalist.length == index + 1 }"
            v-for="column in columns"
          >
            {{ row[column.dataIndex] }}
          td>
        tr>
      tbody>
    table>
  div>

  const handlePrint1 = () => {
   printJS({
     printable: 'printJS-table',
     type: 'html',
     // targetStyles: ['*'],
     // headerStyle: 'font-size:20px',
     style: `
     @page {  
       margin: 0.5cm; margin-right: 0.5cm; margin-top: 0.5cm; margin-bottom: 0.3cm; padding-bottom: 0px;}
     .printTable thead .maintitle {
       text-align: center;
       font-size: 20px;
     }
     .printTable thead .subtitle {
       text-align: center;
       font-size: 13px;
     }
     .printTable thead .header th {
       border-top: 1px solid #000;
       border-right: 1px solid #000;
     }
     .printTable thead .header th:nth-child(1) {
       border-left: 1px solid #000;
     }
     tbody td {
       border: 1px solid #000;
     }
     .printTable tbody .strongRow {
       font-weight: bold;
     }
     tbody {
       text-align: center;
     }
     table {
       border-collapse: collapse;
     }
     `,
   });
 };

以json格式打印

    const handlePrint = () => {
      let printColumns = columns.value.map((ele: any) => {
        return {
          field: ele.dataIndex,
          displayName: ele.title,
        };
      });
      printJS({
        printable: dataSource.value,
        maxWidth: 2500,
        properties: printColumns,
        header: `
          

            
${modelRef.hospitalName} 标本阳性率报表
            

              

                 统计时间：${modelRef.inlineForm.timeSpan[0].format(
                  'YYYY/MM/DD',
                )}-${modelRef.inlineForm.timeSpan[1].format('YYYY/MM/DD')}
              
              
制表人：${modelRef.username}
              
打印时间：${moment().format('YYYY/MM/DD')} 
            
          
        `,
        //size: landscape;
        style: `@page {  margin: 0.5cm; margin-right: 0.5cm; margin-top: 0.5cm; margin-bottom: 0.3cm; padding-bottom: 0px; }
          .title {
            margin-top: 10px;
            font-size: 20px;
            text-align: center;
            padding:10px;
          }
          .subtitle {
            display: flex;
            justify-content: space-between;
            font-size: 16px;
            padding:10px;
          }
          .subtitle .label {
            flex: 1;
            font-size: 14px;
          }
          .subtitle .label:nth-child(2) {
            text-align: center;
          }
          .subtitle .label:nth-child(3) {
            text-align: right;
          }
      
          `,
        gridStyle: 'text-align: center; border: 1px solid black;',
        gridHeaderStyle:
          'border-top: 1px solid black; border-right: 1px solid black; border-left: 1px solid black; border-bottom: 0px;',
        type: 'json',
      });

    };

参数

参数	默认值	说明
printable	null	文档源：pdf 或图像 url、html 元素 id 或 json 数据对象。
type		‘pdf’
header	null	用于 HTML、图像或 JSON 打印的可选标头。它将放置在页面顶部。此属性将接受文本或原始 HTML。
headerStyle	‘font-weight: 300;’	要应用于页眉文本的可选页眉样式。
maxWidth	800	最大文档宽度（以像素为单位）。根据需要更改此设置。在打印 HTML、图像或 JSON 时使用。
css	null	这允许我们传递一个或多个应应用于正在打印的html的css文件URL。值可以是具有单个 URL 的字符串，也可以是具有多个 URL 的数组。
style	null	这允许我们传递一个具有自定义样式的字符串，该字符串应应用于正在打印的html。
scanStyles	true	设置为 false 时，库将不会处理应用于正在打印的 html 的样式。使用参数css时很有用。
targetStyle	null	默认情况下，在打印 HTML 元素时，库仅处理某些样式。此选项允许您传递要处理的样式数组。例如：[‘padding-top’, ‘border-bottom’]
targetStyles	null	但是，与"targetStyle"相同，这将处理任何一系列样式。例如：[‘border’， ‘padding’]，将包括’border-bottom’， ‘border-top’， ‘border-left’， ‘border-right’， 'padding-top’等。
您还可以传递 [‘*’] 来处理所有样式。
ignoreElements	[]	接受在打印父 html 元素时应忽略的 html ID 数组。
properties	null	在打印 JSON 时使用。这些是对象属性名称。
gridHeaderStyle	‘font-weight: bold;’	打印 JSON 数据时网格标头的可选样式。
gridStyle	‘border: 1px solid lightgray; margin-bottom: -1px;’	打印 JSON 数据时网格行的可选样式。
repeatTableHeader	true	打印JSON数据时使用。当设置为false时，数据表头将只显示在第一页。
showModal	null	启用此选项可在检索或处理大型 PDF 文件时显示用户反馈。
modalMessage	‘Retrieving Document…’	showModal设置为true时，向用户显示的消息。
onLoadingStart	null	加载 PDF 时要执行的功能
onLoadingEnd	null	加载 PDF 后要执行的功能
documentTitle	‘Document’	打印 html、图像或 json 时，这将显示为文档标题。
fallbackPrintable	null	打印 pdf 时，如果浏览器不兼容（检查浏览器兼容性表），库将在新选项卡中打开 pdf。这允许您传递要打开的不同pdf文档，而不是在"可打印"中传递的原始文档。如果您在备用pdf文件中注入javascript，这可能很有用。
onPdfOpen	null	打印 pdf 时，如果浏览器不兼容（检查浏览器兼容性表），库将在新选项卡中打开 pdf。可以在此处传递回调函数，该函数将在发生这种情况时执行。在某些情况下，如果要处理打印流、更新用户界面等，它可能很有用。
onPrintDialogClose	null	在浏览器打印对话框关闭后执行的回调函数。
onError	error => throw error	发生错误时要执行的回调函数。
base64	false	在打印作为 base64 数据传递的 PDF 文档时使用。
honorMarginPadding (已弃用)	true	这用于保留或删除正在打印的元素中的填充和边距。有时这些样式设置在屏幕上很棒，但在打印时看起来很糟糕。您可以通过将其设置为 false 来将其删除。
honorColor (已弃用)	false	若要以彩色打印文本，请将此属性设置为 true。默认情况下，所有文本都将以黑色打印。
font(已弃用)	‘TimesNewRoman’	打印 HTML 或 JSON 时使用的字体。
font_size (已弃用)	‘12pt’	打印 HTML 或 JSON 时使用的字体大小。
imageStyle(已弃用)	‘width:100%;’	打印图像时使用。接受具有要应用于每个图像的自定义样式的字符串。