print-js
Version:
A tiny javascript library to help printing from the web.
168 lines (153 loc) • 4.12 kB
HTML
<html>
<script src='./dist/print.js'></script>
<script type="text/javascript">
function printPdf() {
printJS('test.pdf');
}
function printPdfWithModal() {
printJS({
printable: 'test.pdf',
type: 'pdf',
showModal: true
});
}
function printPdfWithModalAndCloseCallback() {
printJS({
printable: 'test.pdf',
type: 'pdf',
showModal: true,
onPrintDialogClose: () => console.log('The print dialog was closed'),
onPdfOpen: () => console.log('Pdf was opened in a new tab due to an incompatible browser')
});
}
function printHtml() {
printJS({
printable: 'test',
type: 'html'
});
}
function printHtmlCustomStyle() {
const style = '@page { margin: 0 } @media print { h1 { color: blue } }'
printJS({
printable: 'test',
type: 'html',
style: style,
scanStyles: false
});
}
function printHtmlCss() {
printJS({
printable: 'test',
type: 'html',
css: 'test.css',
scanStyles: false
});
}
function printJson() {
let data = [];
for (let i=0; i <= 1000; i++){
data.push({
test1: createRandomString(),
test2: createRandomString()
});
}
printJS(
{
printable: data,
properties: [{
field: 'test1',
displayName: 'test 1',
columnSize: 1
},{
field: 'test2',
displayName: 'test 2',
columnSize: 4
}],
type: 'json'
})
}
function printStyledJson() {
let data = [
{
test1: 'Test1 string',
test2: 'Test2 string'
},
{
test1: 'more Test1 string',
test2: 'more Test2 string'
}
]
printJS({printable: data, properties: ['test1', 'test2'], type: 'json', gridStyle: 'border: 2px solid #3971A5;', gridHeaderStyle: 'color: red; border: 2px solid #3971A5;'})
}
function printNestedJson() {
let data = [];
for (let i=0; i <= 100; i++){
data.push({
test1: createRandomString(),
test2: {
a: createRandomString()
}
});
}
printJS(
{
printable: data,
properties: [{
field: 'test1',
displayName: 'test 1',
columnSize: 1
},{
field: 'test2.a',
displayName: 'test 2 - a',
columnSize: 4
}],
type: 'json'
})
}
function createRandomString() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 5; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
</script>
<body>
<section id="test" class="test">
<h1>Print.js Test Page</h1>
<p>
<button onClick='printPdf();'>
Print PDF
</button>
<button onClick='printPdfWithModal();'>
Print PDF with Loading Modal
</button>
<button onClick='printPdfWithModalAndCloseCallback();'>
Print PDF with Loading Modal and close callback
</button>
</p>
<p>
<button onClick='printHtml();'>
Print HTML
</button>
<button onClick='printHtmlCustomStyle();'>
Print HTML with custom style
</button>
<button onClick='printHtmlCss();'>
Print HTML with custom css
</button>
</p>
<p>
<button onClick='printJson();'>
Print JSON
</button>
<button onClick='printStyledJson();'>
Print Styled JSON
</button>
<button onClick='printNestedJson();'>
Print Nested JSON
</button>
</p>
</section>
</body>
</html>