使用print-js打印渲染不出来
qiji_xiaofeng 人气:6使用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使用指南
使用攻略
参考文档:http://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"> 统计时间:${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')} </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', }); };
参数
参数 | 默认值 | 说明 |
---|---|---|
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%;’ | 打印图像时使用。接受具有要应用于每个图像的自定义样式的字符串。 |
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容