How to place single image on multiple pages by jspdf? - javascript

I am having html page which contain very lengthy data.
Here, I have to convert html to pdf. I cant able to convert pdf with css by using jspdf
So i have planned. First convert html to png by canvas and then convert png to pdf. I got correct method to do this. I got solution also.
But Problem is After converting png, im not able to place in pdf, Image will be cropped.
This is my code
window.onload = function() {
html2canvas(document.body).then(function(canvas) {
document.getElementById("page1").appendChild(canvas);
document.body.appendChild(canvas);
var context = canvas.getContext("2d");
l = {
orientation: 'p',
unit: 'pt',
format: 'a3',
compress: true,
fontSize: 8,
lineHeight: 1,
autoSize: false,
printHeaders: true
};
var doc = new jsPDF(l, "", "", "");
doc.addImage(canvas.toDataURL("image/jpeg"), 'jpeg',0,0)
doc.addPage();
doc.addImage(canvas.toDataURL("image/jpeg"), 'jpeg',0,500, 1000, 1000)
window.location=doc.output("datauristring")
});
}
After converting pdf, I am showing in same tab.
I have tried another method.
Divide html page into two section. First section will be in first page in pdf and remaining will be in second page in pdf. After that, I have to shown in browser.
I am not able to do this.
Anyone Can give solution for this one?

l = {
orientation: 'p',
unit: 'pt',
format: 'a3',
compress: true,
fontSize: 8,
lineHeight: 1,
autoSize: false,
printHeaders: true
};
var doc = new jsPDF(l);
doc.addHTML($('elementHTML'),{format:'png',pagesplit: true}});

Related

jsPDF autotable: Header image not printing in all pages

I have multiple tables that I want to print in my pdf. The format should be like:
The logo should be at the top of the page, and should be repeated in each page
The table should be printed below the logo
Here's my code to implement this logic:
document.querySelectorAll(".table_neu_parts").forEach((item,index) => {
doc.autoTable({
html: item,
startX: 10,
startY: 50,
theme: 'grid',
bodyStyles: {lineColor: [0, 0, 0]},
styles: {
fontSize: 10,
cellWidth: 'auto',
halign: 'center',
fillColor: [225, 197, 238]
},
})
doc.addPage();
(async function(){
base = await loadImageAsDataURL("/logo.png");
doc.addImage(base,'PNG',15,40,30,38);
})
}
When I execute the above code, the table gets printed in the first page, which is fine (the logo is already printed in the first page, so no worries in that), but in the second page only the table is printed, then the logo gets printed in the third page.
The logo and the table should be on the same page, no matter what. Where am I going wrong? Please help me.
My output:
Expected output:

html pages come scattered between pages when i print them with html2pdf library in javascript

html2pdf is printing a pdf but the write is choppy between pages how to solve?
this my code javascript if you need to html i can comment it,
any one have an idea ? please help me!
<script>
window.onload = function () {
document.getElementById("download")
.addEventListener("click", () => {
const invoice = this.document.getElementById("invoice");
console.log(invoice);
console.log(window);
var opt = {
margin: 1,
filename: 'myfile.pdf',
image: { type: 'png', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'pt', format: 'a4', orientation: 'landscape'}
// p\init : pt unit: 'in', format: 'letter', orientation: 'landscape'
};
html2pdf().from(invoice).set(opt).save();
})
}
</script>
that is screenshot from pdf for more clarification
https://i.stack.imgur.com/eSdId.png

Uncaught invalid image, images dictionary should contain dataURL entries (or local file paths in node.js)

When i do export cloned html to PDF, I'm getting bellow error.
Uncaught invalid image, images dictionary should contain dataURL entries (or local file paths in node.js)
here is my code:
var clonedHTML = $('#ASPxScheduler1').clone();
html2canvas(clonedHTML[0], {
letterRendering: 1, allowTaint: false, logging: true, useCORS: true,
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 1100,
height: 450
}],
pageSize: 'A3',
pageOrientation: 'landscape'
};
pdfMake.createPdf(docDefinition).download("My-Calendar.pdf");
}
});

Qztray HTML file printing issue, html print left side of the page

I am trying to print the HTML file using QZtray 2.0. File is printing on the left side of the page. I have set the height and width too, but same issue.
function printHTML()
{
var printData = [
{
type: 'html',
format: 'file',
data: test.html
}];
return qz.print(config, printData);
}
I have set the options,
`colorType: 'Color',
copies: 1,
density: 600,
duplex: '',
interpolation: '',
jobName: null,
legacy: '',
margins: 0,
orientation: 'Portrait',
paperThickness: '',
printerTray: '',
rasterize: true,
rotation: 0,
scaleContent: true,
size: null,
units: 'in'`
I have resolved the issue, by installing the beta version of qztraty 2.1, set the proper width and checked the printed document which looks proper.

jsPlumb Endpoint offset

First of all let me say I'm kind of new to jQuery and I'm definately new to jsPlumb altough I have checked the official documentation I've not been able to get a solution to this problem.
I have 2 draggable div elements that each have an endpoint so I can connect them to each other. The problem is when I make the connection and then drag any of the div elements around the arrow image I'm using isn't properly placed where it should be (I'm using ["RightMiddle", "LeftMiddle"] for the anchors).
Is there a way to make the images stick at the middle-right (or left) side of the div elements and not get out of place?
Here's the jsFiddle link for what I have so far, and here's the code:
$(document).ready(function () {
jsPlumb.draggable($('.table'), {
containment: '#schema'
});
var endpointOptions = {
isSource: true,
isTarget: true,
endpoint: ["Image", {
url: "http://i43.tinypic.com/1z31ac2.gif"
}],
style: {
fillStyle: 'gray'
},
maxConnections: -1,
connector: ["Flowchart", {
curviness: 5
}],
connectorStyle: {
lineWidth: 3,
strokeStyle: 'gray'
},
anchors: ["RightMiddle", "LeftMiddle"],
scope: "gray"
};
var ep01 = jsPlumb.addEndpoint("container0", endpointOptions);
var ep02 = jsPlumb.addEndpoint("container1", endpointOptions);
jsPlumb.connect({
source: ep01,
target: ep02
});
});
To make the images stick at the middle-right (or left) side of the div elements, instead of specifying both RightMiddle and LeftMiddle you can simply specify any one.
anchors: "RightMiddle", // For your image Right position suits the best

Categories