I am doing following code to produce big size of line width.
doc.setLineWidth(400);
but not happen anything and the line still thin size after that.
This is my complete code
var doc = new jsPDF('p','pt','a4');
doc.line(30, 30, 560, 30); // horizontal line
doc.setLineWidth(400);
How to set a line width correctly?
Because you have to understand that at first you have to set the width value and then you can use it. And you do it on the wrong way: you set it after using.
Correct example
function generatePDF()
{
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.setLineWidth(5.0);
pdf.line(30, 30, 560, 30);
pdf.save('test.pdf');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js" crossorigin="anonymous"></script>
<button onclick="generatePDF()">Generate PDF</button>
Related
I'm using the jspdf library and I'm facing some problems in the content position, suppose I have this pdf:
var doc = new jsPDF();
doc.setFontSize(12);
doc.text("some text", 15, 14); //<- vertical height is 14
as you can see I placed the text to x = 15 and y = 14, how can I calculate the used height (y) for add the next content? eg:
doc.addImage(someImage, 'JPEG', 15, 10, 60, 10);
as you can see I have an image that is:
x: 15
y: 10
width: 60
height: 10
but how can I know the used vertical height to add the new content? Because in the example above the image will overlay the text (y = 10).
I'm looking for a function that calculate the used height in the document, so I can know where to place the new content in the (vertical y) height.
Maybe there is another and simple solution to do this?
Thanks in advance.
You can use a work around for this as follows.
Crete a variable var y=14 and use this variable in your text part.
doc.text("some text", 15, y);
You can reuse the same variable in order to place image after it. or may be if you need space, you can reuse this variable as
var img_y=y+10;
doc.addImage(someImage, 'JPEG', 15, img_y, 60, 10);
How to change the color of line, produced by using line(x1, y1, x2, y2) method?
Looks like it is possible to accomplish this using setDrawColor() function.
var doc = new jsPDF();
doc.setDrawColor(255, 0, 0);
doc.line(35, 30, 100, 30);
doc.save('line.pdf');
JSFiddle
UPD: if you add new page to document, you need to run setDrawColor() function again. Otherwise the color on the new page will be default black.
You must call the setDrawColor function before the line function. For example:
var doc = new jsPDF();
doc.setDrawColor(255,0,0); // draw red lines
doc.line(100, 20, 100, 60);
doc.save('Red_line.pdf');
You have to call the setDrawColor function from the jsPDF.
This example definitely helps you
var pdf = new jsPDF();
pdf.setDrawColor("#096dd9");
//horizontal line
pdf.setLineWidth(0.2)
pdf.line(2, 25, 555, 25);
//vertical line
pdf.line(30, 2, 30, 100);
I am using jspdf and html2canvas combination to save html page as pdf. A pdf copy of current page is saved the moment you click a button. The problem is, if you zoom in the page, and then click the button, the saved pdf contains incomplete portion of the current page. Most of the part not visible on page due to zooming, gets cut off in the saved pdf page. What is the solution?
Below is the js code being invoked upon click of save button-
var pdf = new jsPDF('l', 'pt', 'a4');
var source = $('#someId')[0];
var options = {
background : '#eee'
};
pdf.addHTML(source, options, function(){
pdf.save('abcd.pdf');
});
EDIT
Taking idea from Saurabh's approach, I tried quite a similar thing, but without writing code for any extra div element. Before saving to pdf I made the screen size of a fixed width, and after printing I brought back the width back to default normal. It is working fine for, if it fails, we can always fix the height of the screen too, so that it appears fine in generated pdf despite zooming. Below is the code used by me:-
var pdf = new jsPDF('l', 'pt', 'a4');
var source = $('#someId')[0];
var options = {
background : '#eee'
};
var width = source.clientWidth;
source.style.width = '1700px';
pdf.addHTML(source, options,
function(){
pdf.save('abcd.pdf');
source.style.width = width+'px';
});
Here is how I managed to get the full page pdf while the page is zoomed in using jsPDF's new .html() method. First, I force the page zoom level back to 100% before converting it to pdf. It's important to reset the scale in html2canvas option after that, otherwise it'll returns a blank page.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"
integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<!-- html2canvas 1.0.0-alpha.11 or higher version is needed -->
<script>
function download() {
// Bring the page zoom level back to 100%
const scale = window.innerWidth / window.outerWidth;
if (scale != 1) {
document.body.style.zoom = scale;
}
let pdf = new jsPDF('p', 'pt', 'a4');
pdf.html(document.getElementById('idName'), {
html2canvas: {
scale: 1 // default is window.devicePixelRatio
},
callback: function () {
// pdf.save('test.pdf');
window.open(pdf.output('bloburl')); // to debug
}
});
}
</script>
Update: A better way is to adjust the html2canvas.scale according to the scale factor.
function download() {
let pWidth = pdf.internal.pageSize.width; // 595.28 is the width of a4
let srcWidth = document.getElementById('idName').scrollWidth;
let margin = 18; // narrow margin - 1.27 cm (36);
let scale = (pWidth - margin * 2) / srcWidth;
let pdf = new jsPDF('p', 'pt', 'a4');
pdf.html(document.getElementById('idName'), {
x: margin,
y: margin,
html2canvas: {
scale: scale,
},
callback: function () {
window.open(pdf.output('bloburl'));
}
});
}
I was going through the same problem,
To do this what I did is I made a copy of printing div and while clicking print button I attached div copy to my dom with margin-top:500px
After I got its image then I hide this copy of the div, and set margin-top:0px
I hope this will work for you.
I want to convert a web page to PDF including all the styles I've added.
I've used jspdf.js and html2Canvas. But I got only a blur picture in PDF form.
I've searched for many JavaScript codes but didn't find a correct one.
Script I have written is:
function getPDF() {
html2canvas(document.body, {
onrendered: function(canvas) {
var img = canvas.toDataURL("Image/jpeg");
//window.open(img);
var doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(img, 'JPEG', 0, 0, 440, 627);
doc.save("download");
}
});
}
Thank You!
There may be a few things that are contributing.
Your encoder options for the canvas.toDataURL are missing, so you're getting the defaults. The defaults may be creating a low quality image. Try this for the highest quality JPEG image:
var img = canvas.toDataURL("Image/jpeg", 1.0);
You might also try creating your jsPDF object with measurements, rather than pixels:
var pdf = new jsPDF("p", "mm", "a4"); // jsPDF(orientation, units, format)
And when you add the image, scale it to the dimensions of the page:
pdf.addImage(imgData, 'JPEG', 10, 10, 190, 277); // 190x277 mm # (10,10)mm
See if that gives you a better image quality.
How to break words in Headers in PDF file, while generating PDF using jsPDF(i.e. I want to break the headers like "Hello World" into two lines) and how to set font size in jsPDF.
I have tried with pdf.setFontSize(12); , but it does not work for me.
Any help would be appreciated. Thanks.
code:
var pdf = new jsPDF('l', 'pt', 'a3')
, source = $('#TableId')[0]
, specialElementHandlers = {
}
, margins = { top: 20, bottom: 20, left: 30, width: 922 };
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) {
pdf.save('Test.pdf');
},
margins
)
If you want to split hello and world on two different lines, add a newline \n between hello and world: "hello\nworld"
Example:
var pdf = new jsPDF();
pdf.setFontSize(12);
pdf.text(10, 10, "Hello\nWorld");
Or add two text fields:
doc.text(10, 10, "Hello");
doc.text(10, 25, "World");
ps. It would even more help if you could post all your code.
If You use FromHtml and your Text spent more than one Page, so you can add after the Text :
<!-- ADD_PAGE -->
But you should use the Jspdf from Mrrio libary
Link : Download the Jspdf