vue打印不出console（vue使用print-js打印渲染不出来问题）
导读：使用print-js 打印渲染不出来 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>我是封面</div>
<div>我是目录 ，你不知道我的内容有多长</div>
<div>我是正文 ，我需要从一个新页面开始展示</div>
标题栏每页重复打印：因为打印时 ，表格中的thead和tfoot默认会在每一页重复打印 ，所以只要设置好表格结构就行 。
html打印
<div id="printJS-table">
<table class="printTable" border="0">
<thead>
<tr class="maintitle">
<td :colspan="columns.length">
<span>{{ 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" >{{ 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%;’ 打印图像时使用 。接受具有要应用于每个图像的自定义样式的字符串 。以上为个人经验 ，希望能给大家一个参考 ，也希望大家多多支持本站 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！