jsPDF generates empty pdf only - javascript

I am working with jsPDF to create a PDF from my HTML. However, it always generates an empty page doesn't matter which HTML content I enter as the source.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Save HTML TO PDF</title>
</head>
<body>
<div><button id="cmd">download as PDF</button></div>
<div id="content">Hello</div>
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
document.getElementById("cmd").addEventListener("click", function () {
window.html2canvas = html2canvas;
var doc = new jsPDF("p", "pt", "a4");
doc.html(document.getElementById("content"), {
callback: function(pdf) {
pdf.save("cv-a4.pdf");
}
});
});
</script>
</body>
</html>
What am I doing wrong? In my opinion that matches exactly the documentation. However, as stated above, the pdf generated does not show any content and not the "Hello". ( I took some of the code from this StackOverflow question)

#threxx
Try this code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Save HTML TO PDF</title>
</head>
<body>
<div><button id="cmd">download as PDF</button></div>
<div id="content">
<h1 style="color: brown;">Hello, He/She..</h1>
<p style="color: green;">How Are you ??</p>
Thank you.
</div>
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
document.getElementById("cmd").addEventListener("click", function () {
var doc = new jsPDF("p", "pt", "a4");
var source = window.document.getElementById('content').innerHTML;
doc.fromHTML(source, 30, 30);
doc.save("cv-a4.pdf");
});
</script>
</body>
</html>
I hope above code will be useful for you.
Thank you.

So after doing some more research I found this answer which will return a PDF from the HTML. Small problem: still only very poor CSS styles but afaik jspdf doesn't support custom CSS.
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
document.getElementById("cmd").addEventListener("click", function () {
var doc = new jsPDF("p", "pt", "a4");
var source = document.body;
var margin = {
top: 20,
left: 20,
right: 20,
bottom: 20
};
doc.fromHTML(source, 30, 30, {
'width': 80, // max width of content on PDF
},
function(pdf){doc.save('saveInCallback.pdf');},
margin
);
});
</script>

Related

I was not able to see images while converting html page to pdf using javascript

here is my code while i download pdf images attributes of html are missing.
suppose in cases like generating invoices we should print tables containing details along with logo.
but images are not displaying in downloaded pdf using this code.Provide me with possible resolution and reason for this.thanks in advance
$(document).on('click', '#btn', function() {
let pdf = new jsPDF();
let section = $('body');
let page = function() {
pdf.save('pagename.pdf');
};
pdf.addHTML(section, page);
})
html,
body {
overflow-x: hidden;
}
#btn {
padding: 10px;
border: 0px;
margin: 50px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML with Image</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<style type="text/css">
</style>
</head>
<body>
<button id="btn">Convert to PDF</button>
<div id="text">
<h2>HTML Page with Image to PDF</h2>
<img src="http://photojournal.jpl.nasa.gov/jpeg/PIA17555.jpg" width="300px">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="custom.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
all the html elements are working fine except images . kindly help me with resolving this.
jsPdf does not support adding images the way you are trying to add them, because addtHtml function uses the html2canvas module, to convert your Html to canvas, so jsPdf can render it into pdf. Please check this link below.
https://weihui-guo.medium.com/save-html-page-and-online-images-as-a-pdf-attachment-with-one-click-from-client-side-21d65656e764

Calling Playkit-js player not showing in browser

After spending some 12 hours, I think I have successfully built playkit-js player (https://github.com/kaltura/playkit-js), and obtained a new folder "dist" and new "playkit.js".
There's a folder called "src" which also contains "playkit.js".
Can you kindly help me to call/configure the player and what would be the proper javascript code? As per their docs, I need add the following snippet:
<script type="text/javascript" src="/PATH/TO/FILE/playkit.js"></script>
<div id="player-placeholder" style="height:360px;width:640px">
<script type="text/javascript">
var playerContainer = document.querySelector("#player-placeholder");
var config = {...};
var player = playkit.core.loadPlayer(config);
playerContainer.appendChild(player.getView());
player.play();
</script>
I can't make the player visible in the browser. Where should I add it, and also which "playkit.js" file should I use? I have tried both files but it's not working. Please help.
Here is the html I am using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#player-placeholder {
width: 640px;
height: 360px;
background-color: black;
}
</style>
<script src="playkit.js" type="text/javascript"></script>
</head>
<body>
<div id="player-placeholder" style="height:360px;width:640px">
<script type="text/javascript">
var playerContainer = document.querySelector("#player-placeholder");
var config = {...};
var player = playkit.core.loadPlayer(config);
playerContainer.appendChild(player.getView());
player.play();
</script>
</body>
</html>
The play from API sometimes not working due to browser limitations (cant auto play with sound) if you'll add a button it will work.
check out this example:
<script src="https://github.com/kaltura/playkit-js/releases/download/v0.59.9/playkit.js"></script>
<div id="player-placeholder" style="height:360px;width:640px">
<input type="button" onclick="play()" value="Play"/>
<script type="text/javascript">
var playerContainer = document.querySelector("#player-placeholder");
var config = {
sources:{
progressive:[{
mimetype:"video/mp4",
url:"https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
}]
}
}
var player = playkit.core.loadPlayer(config);
playerContainer.appendChild(player.getView());
function play(){
player.play();
}
</script>
https://codepen.io/itaykinnrot/pen/LYVPGEx

Generating pdf from external html file and css

I have an external html file that I would like to print as a PDF but I'm having trouble getting the example code to work as intended and I'm obviously missing something trivial when implementing it.
This is my code so far:
function savePDF(data) {
var parser = new DOMParser();
var htmlDoc = parser.parseFromString(data, 'text/html');
let pdf = new jsPDF('p','pt','a4');
pdf.addHTML(
htmlDoc.body, // HTML DOM element.
);
pdf.save("test.pdf");
}
Where data is a string containing the html of the external webpage I wish to convert to a pdf.
Chrome is generating a TypeError: Cannot read property 'innerWidth' of null
This for example works perfectly (using fromHTML instead of addHTML) but the css/styling is missing:
function savePDF(data) {
var parser = new DOMParser();
var htmlDoc = parser.parseFromString(data, 'text/html');
let pdf = new jsPDF('p','pt','a4');
pdf.fromHTML(htmlDoc.body.innerHTML, 0, 0, {},
function(){pdf.save('test.pdf');
});
}
Sample html that I'm using:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PDF Test</title>
</head>
<body>
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
</div>
</body>
</html>
As the documentation says the addHtml method is deprecated ( http://raw.githack.com/MrRio/jsPDF/master/docs/global.html#addHTML), so i played a bit with your example and if you updated your code like this it works. You still have to work a bit to fix the width of div in the pdf.
<!DOCTYPE html>
<html>
<head>
<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.js"></script>
</head>
<body>
<div id="capture" style="padding: 10px; background: #f5da55;">
<h4 style="color: #000; ">Hello world!</h4>
</div>
</body>
<script type="text/javascript">
function savePDF(data) {
let pdf = new jsPDF('p','pt','a4');
pdf.html(data, {
callback: function (doc) {
doc.save("test.pdf");
}
});
}
savePDF(document.body.innerHTML)
</script>
</html>

Why is document.getElementById returning a null value?

I've debugged my code and realized that a method in my Javascript isn't working properly. Anyone have an idea why?
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tetris</title>
<link rel="stylesheet" href="css/app.css">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<canvas id="tetrisBoard" width="800" height="600">
Your browser does not support HTML 5.
</canvas>
<p>
</p>
</body>
</html>
main.js:
board = document.getElementById("tetrisBoard")
ctx = board.getContext("2d")
ctx.fillStyle = "rgb(200, 0, 0)"
ctx.fillRect 10, 10, 55, 50
The result of document.getElementById("tetrisBoard") is a null value. Why?
Because you're calling your code prior to the elements existing. Put the script right before the closing body tag and you'll be fine.
Another solution is to do something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tetris</title>
<link rel="stylesheet" href="css/app.css">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body onload="setup();">
<canvas id="tetrisBoard" width="800" height="600">
Your browser does not support HTML 5.
</canvas>
<p>
</p>
</body>
</html>
Then, in your main.js use something like this:
function setup() {
// Your code here
}
The good thing about this is that you don't have to put the script tag in an unintuitive and unstandard spot (such as right before the end of the body).
Also you could make the script to wait until all the DOM it is loaded... like this:
using jquery
$(document).ready(function(){
board = document.getElementById("tetrisBoard")
ctx = board.getContext("2d")
ctx.fillStyle = "rgb(200, 0, 0)"
ctx.fillRect 10, 10, 55, 50
});
vanilla JavaScript:
document.addEventListener("DOMContentLoaded", function () {
board = document.getElementById("tetrisBoard")
ctx = board.getContext("2d")
ctx.fillStyle = "rgb(200, 0, 0)"
ctx.fillRect 10, 10, 55, 50
}, false);

JQuery SVG and font coloring

How do I change the color of text using JQuery SVG?
I currently have the following code:
<html>
<!-- jquery imports here -->
<script type="text/javascript" charset="utf-8">
$(function() {
$('#myContainer').svg({});
var svg = $('#myContainer').svg('get');
svg.text(200, 200, "SomeText", {'font-family':"Verdana", 'font-size':20, 'text-anchor':"middle"});
});
window.onload = function () {
// more code
}
</script>
<body>
<div id="myContainer" style="width: 640px; height: 480px;"></div>
</body>
</html>
Try to change fill.
{'text-anchor':"middle", 'fill':"#00ff00"}

Categories

Resources