I am using jsPDF to create a PDF download.
Below is my code, which works perfectly to display all the bits of info I need so far.
I want everything to display on the PDF in the order I have the code:
Banner
Logo
Job Title
Main Content
Everything sits exactly where it should except for the Banner.
It keeps displaying below all of the content.
In the output PDF I can see the space at the top where it should sit, but it always goes to the last page of the document, after all other content. On the page it displays, it sits in the top left corner and is the correct width and height, so it is doing that correctly, but is just on the wrong page.
What have I stuffed up here? Or how can i force it to sit on page 1?
Thanks in advance for any assistance!
function demoFromHTML() {
var doc = new jsPDF('p', 'mm', 'a4');
var lMargin=20; //left margin in mm
var rMargin=20; //right margin in mm
var pdfInMM=210; // width of A4 in mm
var source = document.getElementById('text-7');
// Banner
html2canvas(jQuery("#top-banner"), {
useCORS : true,
onrendered: function(canvas) {
var banner = canvas.toDataURL('image/png');
doc.addImage(banner, 'PNG', 0, 0, 210, 100);
console.log(banner);
setTimeout(function () {
doc.save('"<?php echo ( get_the_title() );?>"');
}, 0);
}
})
// Logo
var logo = 'data:image/png;base64,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';
doc.addImage(logo, 'PNG', 10, 100, 50, 18);
// Job title
doc.setTextColor(0,0,0);
doc.fromHTML(
jQuery('.job_listing-title').get(0), // [Refer Exact code tutorial][2]HTML string or DOM elem ref.
10, // x coord
125, // y coord
{
'width': 190,
});
// Main content
doc.fromHTML(
jQuery('#main').get(0), // [Refer Exact code tutorial][2]HTML string or DOM elem ref.
10, // x coord
135, // y coord
{
'width': 190,
});
}
After posting, I realised how simple the answer was.
The issue was occurring because I was firing the doc.save inside the html2canvas, prior to the logo, job title or main content. Instead I needed to move all of the other content under the banner, but before the doc.save.
The below now functions correctly and outputs all items in the correct order and positions.
function demoFromHTML() {
var doc = new jsPDF('p', 'mm', 'a4');
var lMargin=20; //left margin in mm
var rMargin=20; //right margin in mm
var pdfInMM=210; // width of A4 in mm
var source = document.getElementById('text-7');
html2canvas(jQuery("#top-banner"), {
useCORS : true,
onrendered: function(canvas) {
var banner = canvas.toDataURL('image/png');
// Banner
doc.addImage(banner, 'PNG', 0, 0, 210, 100);
// Logo
var logo = 'data:image/png;base64,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';
doc.addImage(logo, 'PNG', 10, 100, 50, 18);
// Job title
doc.setTextColor(0,0,0);
doc.fromHTML(
jQuery('.job_listing-title').get(0), // [Refer Exact code tutorial][2]HTML string or DOM elem ref.
10, // x coord
125, // y coord
{
'width': 190,
});
// Main content
doc.fromHTML(
jQuery('#main').get(0), // [Refer Exact code tutorial][2]HTML string or DOM elem ref.
10, // x coord
135, // y coord
{
'width': 190,
});
console.log(banner);
setTimeout(function () {
doc.save('"<?php echo ( get_the_title() );?>"');
}, 0);
}
})
}
Related
I am trying to dynamically get the height of a table in a PDF that I created using jsPDF and js Autotable. I want to add a line of text under the table, but since the table height changes, I can't put a specific Y value for the text line.
My current table script:
let col = ['Header 1', 'Header 2', 'Header 3']
let rows = arrayForTable;
let getTableWidth = 150;
let pageWidth = doc.internal.pageSize.width;
let tableMargin = (pageWidth - getTableWidth) / 2;
let height = 0;
doc.autoTable(col, rows, {
margin: {top: 20, right: tableMargin, left: tableMargin},
startY: 70,
styles: {
halign: 'center',
overflow: 'linebreak',
cellWidth: 'wrap',
valign: 'middle'
},
columnStyles: {
0: {cellWidth: 50},
1: {cellWidth: 50},
2: {cellWidth: 50},
},
headStyles: {
fillColor: [163, 32, 32]
},
didParseCell: function(data) {
if (data.row.index === rows.length - 1) {
data.cell.styles.fillColor = [63, 63, 64];
data.cell.styles.fontStyle = 'bold';
data.cell.styles.textColor = [255, 255, 255];
}
height = data.table.height
}
});
console.log(height)
The console prints undefined. Anyone know how to dynamically add a line of text under this table without having to designate a static Y value like this:
doc.text(25, 40, exampleText);
The table height changes every time because of different data being shown.
I am using jsPDF AutoTable plugin v3.5.6.
Get the cursor position on Y axis using
didDrawPage
which will be precisely after the table.
This worked for me in Angular 2:
let yPos = 0;
pdf.autoTable({
...
didDrawPage: function(data) {
yPos = data.cursor.y;
}
}
jspdf version:
"jspdf": "^2.3.1",
"jspdf-autotable": "^3.5.14",
Source:
Table height is always 0 #604
From what I understood, you want to add the text under the table. Instead of trying to read the table height, you can read the last cell Y position. What you need to do is like this
let height = 0;
....
didParseCell: function(data) {
...
height = data.cursor.y + data.row.height;
}
....
then you can adjust the position of the text you want to add, for the example I want to add 10 gap between the table and the text
doc.text("exampleText", 25, height + 10);
I have a chart with some indicators below it. Each indicator area consists
of a svg renderer button. so when I use resize property to drag and resize
the panes, the series resized perfectly but the button remains in its same
position, Can we move the button with the resizer?
Here I created a sample link to regenerate
https://jsfiddle.net/q0ybpnvx/2/
Any help will be appreciated. I am having great trouble. Thank you
You can add and position the custom button in render event:
chart: {
events: {
render: function() {
var chart = this;
if (chart.customBtn) {
chart.customBtn.attr({
y: chart.yAxis[1].top,
});
} else {
chart.customBtn = chart.renderer.button(
'sometext',
5,
chart.yAxis[1].top,
function() {
console.log('some task')
}).add()
}
}
}
},
Live demo: https://jsfiddle.net/BlackLabel/b7vq4ecy/
API Reference:
https://api.highcharts.com/highcharts/chart.events.render
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
I was able to do something by manually changing the x/y attributes of my svgRenderer label, the same should apply to buttons.
I'm in angular and have a listener for screen resizing:
Also Note that you can change the entire SVGRenderer label with the attr.text property.
this.chart = Highcharts.chart(.....);
// I used a helper method to create the label
this.chart.myLabel = this.labelCreationHelperMethod(this.chart, data);
this.windowEventService.resize$.subscribe(dimensions => {
if(dimensions.x < 500) { //this would be your charts resize breakpoint
// here I was using a specific chart series property to tell where to put my x coordinate,
// you can traverse through the chart object to find a similar number,
// or just use a hardcoded number
this.chart.myLabel.attr({ y: 15, x: this.chart.series[0].points[0].plotX + 20 });
} else {
this.chart.myLabel.attr({ y: 100, x: this.chart.series[0].points[0].plotX + 50 });
}
}
//Returns the label object that we keep a reference to in the chart object.
labelCreationHelperMethod() {
const y = screen.width > 500 ? 100 : 15;
const x = screen.width > 500 ? this.chart.series[0].points[0].plotX + 50 :
this.chart.series[0].points[0].plotX + 20
// your label
const label = `<div style="color: blue"...> My Label Stuff</div>`
return chart.renderer.label(label, x, y, 'callout', offset + chart.plotLeft, chart.plotTop + 80, true)
.attr({
fill: '#e8e8e8',
padding: 15,
r: 5,
zIndex: 6
})
.add();
}
i have a question to jsPDF autotable.
My Code:
$('#printBtn').on('click', function() {
var pdf = new jsPDF('p', 'pt', 'a4');
var res = pdf.autoTableHtmlToJson(document.getElementById("tablePrint"));
pdf.autoTable(res.columns, res.data, {
theme : 'plain',
styles: {
fontSize: 12
},
showHeader: 'never',
createdCell: function(cell, data) {
var tdElement = cell.raw;
if (tdElement.classList.contains('hrow')) {
cell.styles.fontStyle = 'bold';
}
}
});
pdf.save("test.pdf");
});
I want add Text before and after the Table from a div.
I have found this Code Snippet in jsPDF autotable examples:
var before = "text before";
pdf.text(before, 14, 30);
This code works good. I have insert that before pdf.autoTable(...});.
But i dont know what the number 14 and 30 for?
Then i have the code insert after the pdf.autoTable function call and the Text printed on the last page of pdf but on the top of the page, not on the end, why?
Sorry for my bad englisch.
Thanks for help.
If what you want is to add something before you must first move the table that you are adding with autotable, you achieve this by adding a startY: 150 attribute within doc.autotable:
pdf.autoTable(res.columns, res.data, {
theme : 'plain',
styles: {
fontSize: 12
},
startY: 150,
showHeader: 'never',
createdCell: function(cell, data) {
var tdElement = cell.raw;
if (tdElement.classList.contains('hrow')) {
cell.styles.fontStyle = 'bold';
}
}
});
150 is the value in pixels you want to move. Above this you can place the text you want with the code you placed.
var before = "text before";
pdf.text(before, 14, 30);
Now the values of 14 (Value in Y) and 30 (Value in Y) are the values that you want the text to move in pixels.
In order for you to add text after the table you must first obtain in which number of pixels your table ended and from there enter the text you want.
let finalY = pdf.previousAutoTable.finalY; //this gives you the value of the end-y-axis-position of the previous autotable.
pdf.text("Text to be shown relative to the table", 12, finalY + 10); //you use the variable and add the number of pixels you want it to move.
Here's my stab at an answer:
So this is your Autotable's function call:
var pdf = new jsPDF('p', 'pt', 'a4');
Since jsPDF Autotables is based on jsPDF, you'll have to go here:
pt is a unit of measurement called points, so 14 and 30 are points. At the first position, 14, moves elements left and right. The second position, 30, moves elements down and up. I'm guessing they're like pixels(px). Seems like you have to move your text to your desired locations by using points.
An idea that helped me is to placing a Table with no content on the position where you would like to add the new table.
autoTable(doc, {
body: [],
startY: finalY + bias
});
Im trying to get my jspdf to not save a blank page PDF. I been trying many examples, but nothing works :(. My table content is saved correct, with a image on the second page of the PDF, but my first page is blank.
var pdf = new jsPDF('o', 'pt', 'a6');
//pdf.autoTable(this.columns, this.data);
//var width = pdf.internal.pageSize.width;
//var height = pdf.internal.pageSize.height;
pdf.addPage('1800','900');
pdf.addImage(imgData, 'PNG', 120, 40, 120, 100);
pdf.setTextColor(0,0,0);
pdf.text(120, 20, 'BOOKINGS');
pdf.setFontSize(22);
// 'o', 'pt', 'a4'
// 'p', 'pt', 'letter'
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
source = jQuery('.dataTables_wrapper')[0];
// we support special element handlers. Register them with jQuery-style
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
// There is no support for any other type of selectors
// (class, of compound) at this time.
specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme': function (element, renderer) {
// true = "handled elsewhere, bypass text extraction"
return true
}
};
margins = {
top: 120,
bottom: 0,
left: 0,
width: 2000
};
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
},
function (dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('bookings.pdf');
}, margins);
}
The first page is blank because adding a page is the first call you make after calling the jsPDF constructor. The constructor does already create a (first) blank page. To get rid of the additional empty page at the start of the document, either delete the first page calling doc.deletePage(1), or do not add a page after the constructor is being called.
I am creating Array of LabelView in my application during the run time and adding it to a TableView. But click EventListener not working for LabelView, Here is my sample code
var picRow = Titanium.UI.createTableViewRow();
var photoContainer = Ti.UI.createView({
top:0,
width:300,
left:15,
right:5,
height:200
})
picRow.add(photoContainer);
var shareTable = Ti.UI.createTableView({
data:[picRow],
top:10,
left:0,
right:0,
height:250,
separatorColor: '#ccc',
backgroundColor:'transparent'
});
win.add(shareTable);
var pushleft = 5;
var pushtop = 5;
var images = [];
for (var i = 0; i < imageArray.length; i++){
images[i] = Ti.UI.createLabel({
backgroundImage: imageArray[i].image, // path to image at applicationDataDirectory
width: 70 ,
height: 70,
"tickOption":false,
"index":i,
"picId":imageArray[i].picId,
left: pushleft + 25, // logic for positioning
top: pushtop + 5
});
pushleft = pushleft + 80;
pushtop = pushtop + 50;
photoContainer.add(images[i]);
images[i].addEventListener('click', function(e) {
alert(e);
});
}
Here I am not getting any alert while clicking on the label view. Also I am not getting any error. Anyone help me to solve this issue. Thanks in Advance. I am using Titanium 1.7.5 and ios
it is a best practice to put the eventlistener on the whole row and then look at the click event object to determine which object received the click.
so for example you would look for the picId of the object, if it existed, you would know that a label was clicked