I hope someone can help me with this. I am using printThis.js to print a document. I have bootstrap.min.css located in the public folder. The thing is, I couldn't get it to work. I already tried possible answers but not working.
Here's my code at "barcode.blade.php". What I wanted is to make this.
loadCSS: "{{ asset('Admin/bower_components/bootstrap/dist/css/bootstrap.min.css') }}"
work. Thanks!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{{ asset('Admin/plugins/datatables/dataTables.bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('Admin/bower_components/bootstrap/dist/css/bootstrap.min.css') }}">
<style>
.row{
margin: 50px;
}
p{
margin-top: 10px;
}
</style>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<div class="container">
<div class="row">
@foreach($barcodes as $barcode)
<div class="col-md-4">
<img src="data:image/png;base64,{{DNS1D::getBarcodePNG($barcode->pxbarcode, 'C128A')}}" />
<p>{{$barcode->pxbarcode}}</p>
</div>
@endforeach
</div>
</div>
<div class="w3-right footer">
<button id="print" class="w3-button w3-blue">Print</button>
<a href="{{url('admin/home')}}" class="btn btn-primary">Back</a>
</div>
<script src="{{ asset('Admin/bower_components/jquery/dist/jquery.min.js')}}"></script>
<script src="{{ asset('js/printThis.js')}}"></script>
<script>
$('#print').click(function(){
$('.container').printThis({
debug: false, // show the iframe for debugging
importCSS: true, // import parent page css
importStyle: false, // import style tags
printContainer: true, // print outer container/$.selector
loadCSS: "{{ asset('Admin/bower_components/bootstrap/dist/css/bootstrap.min.css') }}", // path to additional css file - use an array [] for multiple
pageTitle: "", // add title to print page
removeInline: false, // remove inline styles from print elements
removeInlineSelector: "*", // custom selectors to filter inline styles. removeInline must be true
printDelay: 333, // variable print delay
header: "<h2>Print Barcode</h2>", // prefix to html
footer: null, // postfix to html
base: false, // preserve the BASE tag or accept a string for the URL
formValues: true, // preserve input/form values
canvas: false, // copy canvas content
doctypeString: '<!DOCTYPE html>', // enter a different doctype for older markup
removeScripts: false, // remove script tags from print content
copyTagClasses: false, // copy classes from the html & body tag
beforePrintEvent: null, // callback function for printEvent in iframe
beforePrint: null, // function called before iframe is filled
afterPrint: null // function called before iframe is removed
});
})
</script>
</body>
</html>
This is how it looks when i click the print button.
As you can see, I'm using a bootstrap in my blade and it is not taking effect when I print it.
