vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > 使用print-js打印渲染不出来

vue 使用print-js 打印渲染不出来问题

作者:qiji_xiaofeng

这篇文章主要介绍了vue 使用print-js 打印渲染不出来问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

使用print-js 打印渲染不出来

vue 使用print-js  打印渲染不出来, 实际数据已经加载出来了。

遇到这问题,解决方向

1、是否是数据未赋值上

2、打印加载js是否渲染上

所以:在vue中可以使用id的形式和ref的形式进行绑定,如果id绑定渲染不成功的话可以尝试

<div id="printDiv"  ref="printDiv"/>
this.$refs.printDiv
print({
    printable: this.$refs.printDiv,
    type: 'html',
    scanStyles: false
})

vue中printjs使用指南

使用攻略

参考文档:https://printjs.crabbly.com/

分页:使用css的 page-break-after:always 来控制在某个DIV之后新开一个页面

<div style="page-break-after:always">我是封面</div>
<div style="page-break-after:always">我是目录,你不知道我的内容有多长</div>
<div>我是正文,我需要从一个新页面开始展示</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: `
          <div class="titleDiv">
            <div class="title">${modelRef.hospitalName} 标本阳性率报表</div>
            <div class="subtitle">
              <div class="label">
                &nbsp;统计时间:${modelRef.inlineForm.timeSpan[0].format(
                  'YYYY/MM/DD',
                )}-${modelRef.inlineForm.timeSpan[1].format('YYYY/MM/DD')}
              </div>
              <div class="label">制表人:${modelRef.username}</div>
              <div class="label">打印时间:${moment().format('YYYY/MM/DD')}&nbsp;</div>
            </div>
          </div>
        `,
        //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',
      });
    };

参数

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文