I am trying to display book data - title, author, publisher and so on, plus image as a cover page. All of the data except the image I managed to display.
Here is my code:
Routes:
Route::get('/dynamic_pdf', 'DynamicPDFController#index');
Route::get('/dynamic_pdf/pdf', 'DynamicPDFController#pdf');
Controller:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use DB;
use PDF;
class DynamicPDFController extends Controller
{
public function index(){
$book_data = $this->get_book_data();
return view('dynamic_pdf')->with('book_data',$book_data);
}
//get book data method
public function get_book_data(){
$book_data = DB::table('books')
->limit(515)
->get();
return $book_data;
}
public function pdf(){
PDF::setOptions(['isHtml5ParserEnabled'=>true, 'isRemoteEnabled'=>true]);
$pdf= \App::make('dompdf.wrapper'); //uses a method of dompdf
$pdf->loadHTML($this->convert_book_data_to_html());// converts book data to html
return $pdf->stream();//makes it able to show pdf file
}
function convert_book_data_to_html()
{
$book_data = $this->get_book_data();
$output = '
<h3 align="center">Book Data</h3>
<table width="100%" style="border-collapse: collapse; border: 0px;">
<tr>
<th style="border: 1px solid; padding:12px;" width="20%">Cover</th>
<th style="border: 1px solid; padding:12px;" width="30%">Title</th>
<th style="border: 1px solid; padding:12px;" width="15%">Author</th>
<th style="border: 1px solid; padding:12px;" width="15%">Publisher</th>
<th style="border: 1px solid; padding:12px;" width="20%">Year</th>
<th style="border: 1px solid; padding:12px;" width="20%">Description</th>
</tr>
';
foreach($book_data as $book)
{
$output .= '
<tr>
<td style="border: 1px solid; padding:12px;"> <img src="/storage/public/cover_images/'. $book->image .'"> </td>
<td style="border: 1px solid; padding:12px;">'. $book->title.'</td>
<td style="border: 1px solid; padding:12px;">'. $book->author.'</td>
<td style="border: 1px solid; padding:12px;">'. $book->publisher.'</td>
<td style="border: 1px solid; padding:12px;">'. $book->year.'</td>
<td style="border: 1px solid; padding:12px;">'. $book->description.'</td>
</tr>
';
}
$output .= '</table>';
return $output;
}
}
View:
<!DOCTYPE html>
<html>
<head>
<title>Laravel - How to Generate Dynamic PDF from HTML using DomPDF</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.box{
width:600px;
margin:0 auto;
}
</style>
</head>
<body>
<br />
<div class="container">
<h3 align="center">Welcome to our pdf data</h3><br />
<div class="row">
<div class="col-md-7" align="right">
<h4>Books Data</h4>
</div>
<div class="col-md-5" align="right">
Convert into PDF
</div>
</div>
<br />
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Cover</th>
<th>Title</th>
<th>Author</th>
<th>Publisher</th>
<th>Year</th>
<th>Description</th>
</tr>
</thead>
<tbody>
#foreach($book_data as $book)
<tr>
<td> <img src="{{asset('/storage/public/cover_images/'.$book->image )}}" style="width:150px; height:150px; float:left; border-radius:50%; margin-right:25px;"></td>
<td>{{ $book->title }}</td>
<td>{{ $book->author }}</td>
<td>{{ $book->publisher }}</td>
<td>{{ $book->year }}</td>
<td>{{ $book->description }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</body>
</html>
The images from the view I can display but when I click the button to convert to PDF the images are not displayed but it says image not found or type unknown.
I really do not understand why it does not work.
Related
The <th> are stacked on top of each other and the <td> are also stacked on top of each other. I am trying to alternate <th>over <td> for mobile devices. Your feedback would be helpful!
confirmation.html
<table class="table table-hover table-bordered table-responsive-vertical">
<thead class="thead-light">
<tr class="text-center">
<th scope="col" data-toggle="true">Venue</th>
<th scope="col">Quantity</th>
<th scope="col">Ticket Price</th>
<th scope="col">Hearing Loop</th>
<th scope="col">Total Price</th>
</tr>
</thead>
<tbody>
{% for ticket in tickets %}
<tr class="text-center">
<th scope="row">{{ticket.venue}}</th>
<td class="text-center">{{ticket.quantity}}</td>
<td class="text-center">$25.00 each</td>
<td class="text-center">{{ticket.loop}}</td>
<td class="text-center">${{ticket.total | floatformat:2}}</td>
</tr>
<tr>
<th colspan="4" class="text-right">Sales Tax</th>
<td class="text-center">${{ticket.tax | floatformat:2}}</td>
</tr>
<tr>
<th colspan="4" class="text-right">Total</span></th>
<td class="text-center">${{ticket.total_price | floatformat:2}}</td>
</tr>
<tr>
<td>EditDelete</td>
<td colspan="4">Checkout</td>
</tr>
{% endfor %}
</tbody>
</table>
styles.css
#media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
table, thead, tbody, th, td, tr {
display: block;
}
tr {
margin: 0 0 1rem 0;
}
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 0;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
}
Here's a demo of the technique I typically use for responsive tables. It's written for mobile-first.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table.responsive {
width: 100%;
max-width: 60em;
}
table.responsive thead {
display: none;
}
table.responsive tr {
display: block;
border-bottom: 1px solid #d0d0d0;
}
table.responsive td {
display: block;
padding: .75em .375em .75em 6.5em;
}
table.responsive td[data-header]:before {
content: attr(data-header) " ";
position: relative;
margin-left: -6.4em;
left: -.1em;
float: left;
padding-left: .375em;
max-width: 6em;
}
#media all and (min-width:360px) {
table.responsive td[data-header*="\20"]:before {
top: -1em;
}
}
#media all and (min-width:520px) {
table.responsive thead {
display: table-header-group;
}
.responsive>thead th {
text-align: left;
padding: .75em .375em;
}
table.responsive tr {
display: table-row;
border-bottom: 0 none;
}
table.responsive td {
display: table-cell;
padding: .75em .375em;
}
table.responsive td[data-header]:before {
display: none;
}
}
</style>
</head>
<body>
<table class="responsive">
<thead>
<tr>
<th>Title</th>
<th>Created</th>
<th>Last Accessed</th>
</tr>
</thead>
<tbody>
<tr>
<td data-header="Title">Donna's Printing</td>
<td data-header="Created">5/24/2017 <span class="time">12:33pm (EDT)</span></td>
<td data-header="Last Accessed">03/03/2019 <span class="time">12:33pm (EDT)</span></td>
</tr>
<tr>
<td data-header="Title">Test batch</td>
<td data-header="Created">5/24/2017 <span class="time">12:33pm (EDT)</span></td>
<td data-header="Last Accessed">03/03/2019 <span class="time">12:33pm (EDT)</span></td>
</tr>
<tr>
<td data-header="Title">For Mr. Baker</td>
<td data-header="Created">5/24/2017 <span class="time">12:33pm (EDT)</span></td>
<td data-header="Last Accessed">03/03/2019 <span class="time">12:33pm (EDT)</span></td>
</tr>
<tr>
<td data-header="Title">Endorsements</td>
<td data-header="Created">5/24/2017 <span class="time">12:33pm (EDT)</span></td>
<td data-header="Last Accessed">03/03/2019 <span class="time">12:33pm (EDT)</span></td>
</tr>
</tbody>
</table>
</body>
</html>
I am new to angular JS and working on table to have odd/even background colour change however I am facing some challenges.
Here is my code
<!DOCTYPE html>
<html>
<style>
table, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr> <td style="background-color:green">Name</td> <td style="background-color:green">Country</td></tr>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">
{{ x.Name }}</td>
<td ng-if="$even">
{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">
{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/getCustomer")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
</body>
</html>
Output I am getting is not desirable, the odd country data is coming blank.
Use below code, I think for the column country odd condition is missing
<table>
<tr> <td style="background-color:green">Name</td> <td style="background-color:green"> Country</td></tr>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">
{{ x.Name }}</td>
<td ng-if="$even">
{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">
{{ x.Country }}</td>
<td ng-if="$even">
{{ x.Country }}</td>
</tr>
</table>
You can do it with CSS much more simple and clean code.
table tr:nth-child(odd) td{
//your style
}
table tr:nth-child(even) td{
}
You can also define the basic background color and then just use odd/even.
You can use CSS for background color change.
<style>
table, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
tr:nth-child(odd) { background-color: #f1f1f1; }
</style>
The reason why your data is not coming properly is that you have used ng-if="$odd" to apply styles for odd columns.
So change your HTML to the following way and add background color from CSS.
<table>
<tr> <td style="background-color:green">Name</td> <td style="background-color:green">Country</td></tr>
<tr ng-repeat="x in names">
<td>
{{ x.Name }}</td>
<td>
{{ x.Name }}</td>
<td>
{{ x.Country }}</td>
</tr>
</table>
I am New For Angular-js Please Heip On Coding With Dynamic Table Creation .I added Some Records Helping With Json Ang ng-model but How To Remove Current Record When Click On Remove Button.
Passing With This Operator.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.emplist = [
{empname:'samudrala',empsalary:'4.5 - pam',empid:'Emp - 450'},
{empname:'soujanya',empsalary:'4.5 - pam',empid:'Emp - 451'},
{empname:'suguna',empsalary:'4.5 - pam',empid:'Emp - 452'},
{empname:'sangeetha',empsalary:'4.5 - pam',empid:'Emp - 453'},
{empname:'sadhanandham',empsalary:'4.5 - pam',empid:'Emp - 454'},
{empname:'jai',empsalary:'4.5 - pam',empid:'Emp - 455'},
{empname:'vijay',empsalary:'4.5 - pam',empid:'Emp - 456'},
{empname:'Ajay',empsalary:'4.5 - pam',empid:'Emp - 457'},
{empname:'Sandya',empsalary:'4.5 - pam',empid:'Emp - 458'},
{empname:'Raamu',empsalary:'4.5 - pam',empid:'Emp - 459'}
];
$scope.addItem = function(){
$scope.emplist.push({'empname':$scope.empname,'empsalary':$scope.empsalary,'empid':$scope.empid});
$scope.empname = '';
$scope.empsalary = '';
$scope.empid = '';
}
$scope.remItem = function(x){
$scope.emplist.splice(x,1);
}
});
body{
font-size: 14px;
font-family: Arial;
color:#333;
}
<!DOCTYPE Html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table style="width:100%;">
<tr height="25" style=" background: #99ff00;">
<th width="5%"></th>
<th width="40%">EMP Name</th>
<th width="30%">EMP Salary</th>
<th width="25%">EMP ID</th>
</tr>
<tr height="25" ng-repeat="x in emplist">
<td style="text-align: center; background: #99ff00;" ng-if="$odd" >{{$index}}</td>
<td style="text-align: center; background: #00ff00;" ng-if="$even" >{{$index}}</td>
<td style="text-align: center; background: #99ff00;" ng-if="$odd" >{{x.empname}}</td>
<td style="text-align: center; background: #00ff00;" ng-if="$even" >{{x.empname}}</td>
<td style="text-align: center; background: #99ff00;" ng-if="$odd">{{x.empsalary}}</td>
<td style="text-align: center; background: #00ff00;" ng-if="$even">{{x.empsalary}}</td>
<td style="text-align: center; background: #99ff00;" ng-if="$odd">{{x.empid}} <button ng-click="remItem();" style="background:#00ffff; border:0px;">× Remove</button></td>
<td style="text-align: center; background: #00ff00;" ng-if="$even">{{x.empid}} <button ng-click="remItem();" style="background:#00ffff; border:0px;">× Remove</button></td>
</tr>
<tr height="25">
<td><button ng-click="addItem();" style="background: #00ffff; border:0px; width:100%; height:100%;">Add</button></td>
<td style="padding:2px;"><input type="text" ng-model="empname" style="width:100%;" ></td>
<td style="padding:2px;"><input type="text" ng-model="empsalary" style="width:100%;" ></td>
<td style="padding:2px;"><input type="text" ng-model="empid" style="width:100%;" ></td>
</tr>
</table>
</div>
</body>
</html>
Instead of showing the table row for each record, use ng-repeat
<tr ng-repeat="emp in emplist">
<td>{{emp.name}}</td>
<td>{{emp.name}}</td>
<td>{{emp.name}}</td>
<td><button ng-click="remItem($index)">Remove</button></td>
And inside the controller directly you can get the $index
$scope.remItem = function(itemIndex){
$scope.emplist.splice(itemIndex,1);
}
Please Pass Current Index in your function
<button ng-click="remItem(x,$index);" > Remove</button>
$scope.remItem = function(x,index){
$scope.emplist.splice(index,1);
}
It will help you !!!
Try this
<button ng-click="remItem(x);" > Remove</button>
and in controller
$scope.remItem = function(item){
var index = $scope.emplist.indexOf(item);
$scope.emplist.splice(index,1);
}
**You can delete the row based on index **
<button title="Remove" ng-click="removeFile($index)"></button>
$scope.removeFile = function (index) {
if (!confirm("Are you sure you want to remove?")) {
return;
}
$scope.emplist.splice(index, 1);}
<div class="dataTables_scroll">
<div class="dataTables_scrollHead ui-state-default" style="overflow: hidden; position: relative; border: 0px none; width: 100%;">
<div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%;">
<table id="DataTables_Table_4" class="dataTable no-footer" role="grid" aria-describedby="DataTables_Table_4_info" style="width: 100%;">
<thead>
<tbody>
<tr class="odd" role="row">
<tr class="even" role="row">
<td class="center-col multiRowSelect sorting_1">
<td>GROUP4</td>
<td class=" center-col">Enterprise Open</td>
<td class=" center-col">0</td>
</tr>
</tbody>
</table>
</div>
Are you absolutely sure you don't like xpath for that? It is awfully powerful and can in fact very well be used to find by text:
Click Element xpath=//*[contains(text(),"GROUP")]/parent::tr
I'm working with Sequelize and a lodash template in a server side (NodeJS) to generate invoices. after each pass of the loop, I have a [object SequelizeInstance] that appears just above my html table.
compiled = _.template("
<div class='row' style='padding: 20px 0px 0px 0px;'>
<div class='col-lg-12 col-md-12 col-sm-12'>
<div class='table-responsive'>
<table border='1' style='width: 100%;'>
<thead>
<tr>
<th>Réf Produit.</th>
<th>Désignation</th>
<th>Quantité</th>
<th>Prix Unitaire</th>
<th>Sous Total</th>
</tr>
</thead>
<tbody>
<% datas = []%>
<% _.forEach(order.OrderedProducts, function(value, key) {%>
<%- datas[key] = value %>
<tr>
<td style='padding: 0px 0px 0px 4px;'><%- datas[key].Product.id %></td>
<td style='padding: 0px 0px 0px 4px;'><%- datas[key].Product.name %></td>
<td style='padding: 0px 0px 0px 4px;'><%- datas[key].quantity %></td>
<td style='padding: 0px 0px 0px 4px;'><%- datas[key].Product.price %> €</td>
<td style='padding: 0px 0px 0px 4px;'><%- datas[key].Product.price * datas[key].quantity %> €</td>
<% }); %>
</tr>
</tbody>
</table>
</div>
<hr>
<div class='row'>
<div style='float: right;' class='col-md-3'>
<div class='ttl-amts'>
<h5> Sous Total : <%= Math.round((order.total_cmd - ((order.total_cmd * 20) / 100)) * 100) / 100 %> €</h5>
</div>
<hr>
<div class='ttl-amts'>
<h5> TVA : 20%</h5>
</div>
<hr>
<div style='padding: 0px 0px 20px 0px;' class='ttl-amts'>
<h4><strong>Montant Total : <%= order.total_cmd %> €</strong></h4>
</div>
</div>
</div>
Can you help me to resolve this please ? Thanks
I think you should change this line:
<%- datas[key] = value %>
to:
<% datas[key] = value %>
With the extra dash in there you are telling it to echo the value in datas[key], which translates to [object SequelizeInstance].
I would also like to point out that anywhere inside that forEach loop, you can replace datas[key] with value, and then just get rid of that line I mentioned altogether.