Print-js cannot be rendered
vue print-js can't render, the actual data has been loaded.
When encountering this problem, the solution direction
1. Whether the data is not assigned
2. Whether the print load js is rendered
So: in vue, you can use the id form and ref form to bind. If the id binding rendering is not successful, you can try it
<div ref="printDiv"/>
this.$
print({
printable: this.$,
type: 'html',
scanStyles: false
})Guide to using printjs in vue
Usage strategy
Reference documentation:/
Pagination: Use css' page-break-after: always to control the opening of a new page after a DIV
<div style="page-break-after:always">I'm the cover</div> <div style="page-break-after:always">I'm a directory，You don't know how long my content is</div> <div>I'm the text，I need to start displaying with a new page</div>
The title bar repeatedly prints each page: because when printing, the head and tfoot in the table will be repeatedly printed on each page by default, so just set the table structure.
html printing
<div >
<table class="printTable" style="width: 100%; text-align: center" border="0">
<thead>
<tr class="maintitle">
<td :colspan="">
<span style="font-size: 20px">{{ }} Specimen positive rate report</span>
</td>
</tr>
<tr class="subtitle">
<td :colspan="2">
Statistics time:{{ [0].format('YYYY/MM/DD') }}-{{
[1].format('YYYY/MM/DD')
}}
</td>
<td :colspan=" - 4">Watchmaker：{{ }}</td>
<td :colspan="2">Print time:{{ moment().format('YYYY/MM/DD') }}</td>
</tr>
<tr class="header">
<th v-for="item in columns" width="">{{ }}</th>
</tr>
</thead>
<tbody>
<tr
v-for="(row, index) in printDatalist"
:class="{ strongRow: == 'total' }"
>
<td
:class="{ lastRow: == index + 1 }"
v-for="column in columns"
>
{{ row[] }}
</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;
}
`,
});
};
Print in json format
const handlePrint = () => {
let printColumns = ((ele: any) => {
return {
field: ,
displayName: ,
};
});
printJS({
printable: ,
maxWidth: 2500,
properties: printColumns,
header: `
<div class="titleDiv">
<div class="title">${} Specimen positive rate report</div>
<div class="subtitle">
<div class="label">
&nbsp;Statistics time：${[0].format(
'YYYY/MM/DD',
)}-${[1].format('YYYY/MM/DD')}
</div>
<div class="label">Watchmaker：${}</div>
<div class="label">Print time：${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',
});
};
parameter
| parameter | default value | illustrate |
|---|---|---|
| printable | null | Document source: pdf or image url, html element id or json data object. |
| type | ‘pdf’ | |
| header | null | Optional header for HTML, image, or JSON printing. It will be placed at the top of the page. This property will accept text or raw HTML. |
| headerStyle | ‘font-weight: 300;’ | Optional header styles to apply to header text. |
| maxWidth | 800 | Maximum document width in pixels. Change this setting as needed. Used when printing HTML, images, or JSON. |
| css | null | This allows us to pass one or more css file URLs that should be applied to the html being printed. The value can be a string with a single URL or an array with multiple URLs. |
| style | null | This allows us to pass a string with a custom style that should be applied to the html being printed. |
| scanStyles | true | When set to false, the library will not handle the styles applied to the html being printed. It is useful when using parameter css. |
| targetStyle | null | By default, when printing HTML elements, the library only processes certain styles. This option allows you to pass an array of styles to process. For example: [‘padding-top’, ‘border-bottom’] |
| targetStyles | null | However, as with "targetStyle", this will handle any series of styles. For example: [‘border’, ‘padding’] will include ‘border-bottom’, ‘border-top’, ‘border-left’, ‘border-right’, ‘padding-top’, etc. |
| You can also pass ['*'] to handle all styles. | ||
| ignoreElements | [] | Accepts an array of html IDs that should be ignored when printing the parent html element. |
| properties | null | Used when printing JSON. These are the object property names. |
| gridHeaderStyle | ‘font-weight: bold;’ | Optional style for grid headers when printing JSON data. |
| gridStyle | ‘border: 1px solid lightgray; margin-bottom: -1px;’ | Optional style for grid lines when printing JSON data. |
| repeatTableHeader | true | Used when printing JSON data. When set to false, the data table header will only be displayed on the first page. |
| showModal | null | Enable this option to display user feedback when retrieving or processing large PDF files. |
| modalMessage | ‘Retrieving Document…’ | The message displayed to the user when showModal is set to true. |
| onLoadingStart | null | Functions to be performed when loading PDFs |
| onLoadingEnd | null | Functions to be executed after loading PDF |
| documentTitle | ‘Document’ | This will appear as the document title when printing html, image, or json. |
| fallbackPrintable | null | When printing pdf, if the browser is incompatible (check the browser compatibility table), the library opens pdf in a new tab. This allows you to pass different pdf documents to open, rather than the original document passed in "printable". This may be useful if you inject javascript into your alternate pdf file. |
| onPdfOpen | null | When printing pdf, if the browser is incompatible (check the browser compatibility table), the library opens pdf in a new tab. A callback function can be passed here, which will be executed when this happens. In some cases, it can be useful if you want to deal with print streams, update the user interface, etc. |
| onPrintDialogClose | null | The callback function executed after the browser print dialog is closed. |
| onError | error => throw error | The callback function to be executed when an error occurs. |
| base64 | false | Used when printing PDF documents passed as base64 data. |
| honorMarginPadding (deprecated) | true | This is used to preserve or delete padding and margins in the element being printed. Sometimes these style settings are great on the screen, but they look awful when printing. You can delete it by setting it to false . |
| honorColor (deprecated) | false | To print text in color, set this property to true. By default, all text will be printed in black. |
| font(deprecated) | ‘TimesNewRoman’ | The font used when printing HTML or JSON. |
| font_size (deprecated) | ‘12pt’ | The font size used when printing HTML or JSON. |
| imageStyle(deprecated) | ‘width:100%;’ | Used when printing images. Accepts strings with custom styles to apply to each image. |
The above is personal experience. I hope you can give you a reference and I hope you can support me more.