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

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

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

<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" 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;
}
`,
});
};

    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',
});
};