Currently i work on a project in asp classic, jquery, and html
Recently, i sucessfully convert a html file to a pdf using "from-html.js", but i got one question wich is:
How can i insert some images in the pdf that i create ? i searched for a long time now and i don't find the way to do it.
I tried to use addhtml.js or addimage.js mixed up with my actual code but it doesn't work.
there's what i have currently done
<title>Recapitulatif Commande</title>
<script type="text/javascript" src="./examples/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jspdf.js"></script>
<script type="text/javascript" src="./dist/jspdf.min.js"></script>
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf.plugin.addimage.js"></script>
<script src='./libs/Blob.js/Blob.js' type='text/javascript'></script>
<script src='./libs/FileSaver.js/FileSaver.js' type='text/javascript'></script>
<script src='./libs/png_support/zlib.js' type='text/javascript'></script>
<script src='./libs/png_support/png.js' type='text/javascript'></script>
<script src='./libs/deflate.js' type='text/javascript'></script>
<script src='jspdf.plugin.png_support.js' type='text/javascript'></script>
<script language="JavaScript">
$(document).ready( function(){
var doc = new jsPDF();
var specialElementHandlers =
{
'#editor': function (element, renderer)
{
return true;
}
};
$('#cmd').click(function ()
{
doc.fromHTML($('#mydiv').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers,
});
doc.save('RecapCommande.pdf');
});
});
</script>
<div id="mydiv">
<h2><center>Bonjour voici un recap des notes</center></h2>
<table id="table" width="100%" border="2px solid">
<thead>
<tr>
<th width="33%" align="center">date : </th>
<th width="33%" align="center">montant : </th>
<th width="33%" align="center">statut : </th>
</tr>
</thead>
</table>
</div> <!-- /container -->
<table id="table14" width="100%" >
<thead>
<tr>
<th width="33%" align="center"><button id="cmd" align="center" >Imprimer votre commande</button></th>
</tr>
</thead>
</table>
If you can help me, i would be so relieve, thanks
you will have to convert your table into a canvas then display it.First attach a hidden canvas to your div.Second copying your div into the hidden canvas.Third hide your table and unhide the canvas.fourth generate pdf.
<Script>
//first
$("#table").append('<div id="can" style="background-color:white" >
<canvas id="canvas" width="300" height="320" style="background-color:white"></canvas> </div>');
//second
canvg('canvas', $("#table").html());
//third
var im = document.getElementById('canvas');
im.style.display = 'block';
var create = document.getElementById('table');
create.style.display = 'none';
//fourth..call function for pdf generation
</Script>
Encode your images to base64, and insert the data blob into the img src area... i.e.:
<img src="data:image/jpeg;base64,/9j/4AA......9k=" />
I know this is an old post, however I've been dealing with this issue today and have found that base64 images are the only way the HTML to PDF conversion can output them.
Related
I am facing an issue while displaying the nested data inside the ng-repeat. I get data for the first 4 fields but those which are more nested like the label and onwards field data do not show up. the last 5 fields appear to be empty and does not fetch the data. Will be glad if anyone could help troubleshoot the issue.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<!-- <p>Today's welcome message is:</p> -->
<table border="2">
<tr>
<th>deliveryRecipient</th>
<th>Pick Up Locality</th>
<th>Delivery Locality</th>
<th>Created On</th>
<th>Name</th>
<th>category</th>
<th>Item Price</th>
<th>Weight</th>
<th>Qty</th>
<th>Action</th>
</tr>
<tr ng-repeat="x in myWelcome">
<td>{{x.deliveryRecipient}}</td>
<td>{{x.pickupLocality}}</td>
<td>{{x.deliveryLocality}}</td>
<td>{{x.createdOn}}</td>
<td>{{x.label}}</td>
<td>{{x.category}}</td>
<td>{{x.actualPriceLabel}}</td>
<td>{{x.weight}}</td>
<td>{{x.quantity}}</td>
<td><button onclick="showgraphqldata()" type="button" class="view">View</button></td>
</tr>
<td ng-repeat="y in x.items">
<td>
<tr ng-repeat="z in y">
<td>{{z.label}}</td>
<td>{{z.category}}</td>
<td>{{z.actualPriceLabel}}</td>
<td>{{z.weight}}</td>
<td>{{z.quantity}}</td>
</tr>
<input type="hidden" value="{{x.uid}}" />
</table>
</div>
<!-- <p>The $http service requests a page on the server, and the response is set as the value of the "myWelcome"
variable.</p> -->
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$http({
method: "GET",
url: "https://api-stg.martcart.pk/api/v1/merchants/incomingOrders?archived=false&isIncomingOrders=true&isPurchaseOrders=true&loadItems=true&pageNumber=1&recordsPerPage=100&statusIn=NEW,VIEWED",
headers: {
datatype: 'JSON',
, 'Content-Type': 'application/json'
}
}).then(function mySuccess(response) {
$scope.myWelcome = response.data;
}, function myError(response) {
$scope.myWelcome = response.statusText;
});
});
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).on('click', '.view', function () {
var uid = $(this).parent().prev().val();
</script>
</body>
</html>
attached images are the responses if json data
enter image description here
enter image description here
When I use this HTML template in my server, the head is copied on the body. I get in
<table id="myTable">
the whole head repeated.
<title>IndoorLoc App</title>
That title tag is the first that appears after the table tag and I don't understand wht thid happens and following that comes all the head tag including js scripts.
<!DOCTYPE>
<html>
<head>
<title>IndoorLoc App</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script type="text/javascript">
function ajax(){
var req = new XMLHttpRequest();
req.onreadystatechange = function(){
if (req.readyState == 4 && req.status == 200) {
document.getElementById('myTable').innerHTML = req.responseText;
}
}
req.open('GET', 'http://localhost:8080/data', true);
req.send();
}
setInterval(function(){ajax();}, 1000);
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header id="head">
<h1>IndoorLoc</h1>
</header>
<table id="myTable">
<tr>
<td>MAC address</td>
<td>RSSI</td>
</tr>
%for row in rows1:
<tr>
<td>{{ row[1] }}</td>
<td>{{ row[2] }}</td>
</tr>
%end
<tr>
<td>MAC address</td>
<td>RSSI</td>
</tr>
%for row in rows2:
<tr>
<td>{{ row[1] }}</td>
<td>{{ row[2] }}</td>
</tr>
%end
</table>
</body>
</html>
The response you are getting and directly inserting inside table tag, what kind of data is that, If it is table body markup then it will work otherwise it will just add string or response whatever you are getting.
I created a rest web api and using AngularJS, I want to receive those json data and store them in a table. I am new to AngularJS. I was able to get all the json data but I want to split them up into each row. I am not sure if I am doing to correctly or not but here is my code:
index.html
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<meta charset="UTF-8">
<title>Angular</title>
<script src="lib/angular.js"></script>
<script src="angularDemo.js"></script>
</head>
<body>
<div ng-controller="demoController">
<table>
<tr>
<th>Id</th>
<th>Question</th>
</tr>
<tr ng-repeat=" quiz values">
<td>{{result.id}}</td> <!-- Does not get any value-->
<td>{{result.question}}</td> <!-- Does not get any value-->
</tr>
</table>
<h1>{{result}}</h1> <!-- gets all the json data -->
</div>
</body>
</html>
js
var app = angular.module("demoApp", []);
app.controller("demoController", function($scope, $http) {
$http.get("http://localhost:8080/quiz/webapi/quiz")
.then(function(response) {
$scope.result = response.data;
});
});
Your ng-repeat is not good,
If i understand your array of results is in $scope.result, so you have to do this kind of ng-repeat :
<tr ng-repeat="row in result">
<td>{{row.id}}</td>
<td>{{row.question}}</td>
</tr>
How to set values for the below div block (setting values in '?' placeholder).
<table>
<tr>
<td class="tfArrive " valign="top">
<div class="tfArrAp" id="txt3">
? </div>
</td> </tr>
</table>
I have tried with following scenario, but not working
<script type="text/javascript">
document.getElementById('txt3').innerHTML = "TEST";
</script>
Your script is working perfectly, it's just that you need to be sure that you are placing the script after the HTML is rendered, so first you need to print the tables out and than use the script tag, because if you place the script before the id="txt3" has rendered, it won't change anything as onload the script didn't find any, so this should be the order...
<table>
<tr>
<td class="tfArrive " valign="top">
<div class="tfArrAp" id="txt3">
?
</div>
</td>
</tr>
</table>
<script type="text/javascript">
document.getElementById('txt3').innerHTML = "TEST";
</script>
Side Note : If you are using HTML5, you don't need
type="text/javascript" anymore, as now, default is JavaScript
$(document).ready(function(){
$('#txt3').html("New Text");
});
Be sure your page is loaded before you manipulate it:
<script type="text/javascript">
window.onload = function() {
document.getElementById('txt3').innerHTML = "TEST";
}
</script>
I am using jQuery mobile and Knockout.js to test the first example on http://knockoutjs.com/documentation/foreach-binding.html but nothing is displayed and error console of FireFox reveals this error:
Timestamp: 9/10/2012 1:13:16 PM
Error: NotFoundError: Node was not found
Source File: http:///kotest/Scripts/knockout-2.1.0.js
Line: 46
Note that this is the latest knockout-2.1.0.js downloaded today.
The code is below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js" type="text/javascript"></script>
<script src="Scripts/knockout-2.1.0.js" type="text/javascript"></script>
</head>
<body>
<h4>People</h4>
<table>
<thead>
<tr><th>First name</th><th>Last name</th></tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
ko.applyBindings({
people: [
{ firstName: 'Bert', lastName: 'Bertington' },
{ firstName: 'Charles', lastName: 'Charlesforth' },
{ firstName: 'Denise', lastName: 'Dentiste' }
]
});
</script>
</body>
</html>
I should mention that it works as expected if references to the jQuery mobile js files are deleted.
Update:
You can try the jQuery mobile pageinit function.
<script type="text/javascript" >
$(document).on('pageinit','[data-role=page]', function(){
ko.applyBindings({
people: [
{ firstName: 'Bert', lastName: 'Bertington' },
{ firstName: 'Charles', lastName: 'Charlesforth' },
{ firstName: 'Denise', lastName: 'Dentiste' }
]
});
});
</script>
include a div Tag with the data-role="page" binding from jquery mobile:
<div data-role="page" >
<table>
<thead>
<tr><th>First name</th><th>Last name</th></tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table>
</div>
Your document is not in the ready state. Since you're using jQuery mobile, you'll want to listen for the pageinit event, then apply your KO bindings in that:
$(document).bind('pageinit', function() {
// Use KO here
});
Note that Daniel's answer suggests to use document.ready, however, that doesn't work in the jQuery mobile bits where page contents are loaded asynchronously via AJAX. Instead, you must use pageinit event.