How to print new page after each element?
I am trying to print only the section called "barCodesWrapper" in my page. And after each SVG tag, I want a new page. So when they print this page, I want one bar code on each page ( should be 5 total pages in this example ).
Can anyone help me get this working?
Currently, all are showing up on one page. I don't know what else to do. I am stumped.
Can anyone help me get this working?
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js">
</script>
<style>
@media print {
body * {
visibility: hidden;
}
#barCodesWrapper, #barCodesWrapper * {
visibility: visible;
page-break-after: always;
page-break-before: always;
}
#barCodesWrapper svg {
page-break-after: always;
page-break-before: always;
}
#barCodesWrapper {
position: absolute;
left: 0;
top: 0;
page-break-after: always;
page-break-before: always;
}
svg {
page-break-after: always;
page-break-before: always;
}
}
</style>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<div id="barCodesWrapper">
<svg id="barcode"></svg>
<svg id="barcode2"></svg>
<svg id="barcode3"></svg>
<svg id="barcode4"></svg>
<svg id="barcode5"></svg>
</div>
<script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
<script>
$(document).ready(function(){
JsBarcode("#barcode", "1234567890");
JsBarcode("#barcode2", "HELLO WORLD");
JsBarcode("#barcode3", "HELLO WORLD2");
JsBarcode("#barcode4", "HELLO WORLD3");
JsBarcode("#barcode5", "HELLO WORLD4");
});
</script>
</body>
</html>Currently, all are showing up on one page. I don't know what else to do. I am stumped.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER