pdf-generator
pdf-generator copied to clipboard
cesarvr
Hello,This plugin is not generate base64 correct sometimes ,so i can't generate pdf. any one help me
var data = <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"><!-- <link rel="stylesheet" type="text/css" href="../css/resume.css"> <link rel="stylesheet" type="text/css" href="../css/fontello2.css"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet"> --> <link rel="stylesheet" type="text/css" href="file:///android_asset/www/template_css/resume.css"> <link rel="stylesheet" type="text/css" href="file:///android_asset/www/template_css/font.css"> <link rel="stylesheet" type="text/css" href="file:///android_asset/www/template_css/fontello2.css"> <style>body, .left, #customer{line-height:1.5; color:#545E6C; font-family: 'Roboto', sans-serif !important;font: 16px Droid Sans;}#name{font-family: 'Roboto', sans-serif;}h4{text-transform:uppercase; padding-left:3px; color:#2d7788; margin: 14px 0px !important; font-size: 20px;}table.personal td, table.personal th, table.personal tr{border:none;}.text{padding:8px 4px 8px 0px;}.left i{font-size:18px;}h4 i{background: #2d7788; padding: 8px 7px; border-radius: 50%; margin-right:10px; color:#fff;font-size:17px;}h4 span{font-size: 20px;}#identity{margin-bottom:2px;}#role1, #role2,#role3,#role4,#role5,#role6, .project .text{margin-bottom:8px;}.orgduration, .right{text-decoration:italic;}.time, .project .text , .experience .orgduration, .desc, .edu p, .right{margin-left:0px;}.edu p{padding-bottom:5px;}.edu .desc{margin-bottom:10px;}#objective, .experience, .edu, #skills, .project, #achivements, #foi, #strength, #profile, #reference, #declaration, #loc, #visit, #exactive, #coactive{padding-left:10px;}.left{width:250px; float:right; padding-bottom:50px; color:#fff;}.right{width:600px;}#customer{background:#fff !important; padding:10px 25px 55px 10px; margin-right:0px;}.big{font-size:18px; text-transform:uppercase; font-weight:700;}#page-wrap{background: linear-gradient(to left, rgba(66,169,192,1) 0%, rgba(66,169,192,1) 66%, rgba(255,255,255,1) 78%, rgba(255,255,255,1) 100%); padding-right:0px;}.left li{list-style-type:none;line-height:1.8;}li{list-style-type:none;line-height:1.6;}#logo{border-radius: 50%; border:none; padding:0px;}#image{border-radius: 50%;}#skills{text-align:left;}.right{float: none;}.footer{padding:30px 10px;color: #000;text-align: center;}.footer button{padding: 11px;border-radius: 50%; border: 2px solid #666; margin:3px;}@media print{.footer, .footer button, .modal{display: none !important;}}h4{padding-left:0px !important;}.experience:not(:first-child),#referencedoc li:not(:first-child),.projrowc:not(:first-child){margin-top: 10px;}.intro_left_side ul li{display: table;width: 100%;margin-bottom: 7px;}.intro_left_side ul li .intr_icon{float: left;width: 30px;}.intro_left_side ul li .intr_dsc{float: left;width: calc(100% - 30px);overflow: hidden;}</style> </head> <body> <div id="page-wrap" class="googoose-wrapper"> <div class="left"> <div class="lefttop" style="background-color:#34869a; padding:15px;"> <br><center > <div style="margin:3px; border-radius: 50%;float:none;" id="logo"> <img src="file:///data/user/0/com.qualifiedapps.resumemaker/files/h2sbgavjt.jpg" id="image" class="myphoto" width="120px" height="120px"> </div><br><div id="identity"> <b><span style="font-size:22px;text-transform:uppercase;" id="name">Paras raiyani new</span></b> <br><div id="lastdesignation">Web developer</div><br><br></div></center> </div><div class="leftbottom" style="padding:15px; background-color:#42a8c0;"><!-- <div> <i class="icon-mail-alt"></i> <span id="myemail">[email protected]</span> <br><br><i class="icon-phone"></i> <span id="contact">9724081113</span><br><br><i class="icon-location"></i> <span id="address1">7/16 bhojrajpara,</span><br> <span id="address2">Gondal,</span><br> <span id="address3">India</span><br>--> <div class="intro_left_side"> <ul> <li> <div class="intr_icon"><i class="icon-mail-alt"></i></div><div class="intr_dsc">[email protected]</div></li><li> <div class="intr_icon"><i class="icon-phone"></i></div><div class="intr_dsc">9724081113</div></li><li> <div class="intr_icon"><i class="icon-location"></i></div><div class="intr_dsc"> <span id="address1">7/16 bhojrajpara,</span> <span id="address2">Gondal,</span> <span id="address3">India</span> </div></li></ul> </div><br><br><br><br><span class="skills"><i class="icon-rocket"></i> <span class="big hskills">Skills</span></span><br><br><div id="skills"> <li><span id="university1">Speak English</span></li><li><span id="university2">Reading</span></li></div><br><br><span class="interests"><span class="interests"><i class="icon-interests" class="interests"></i> <span class="big interests hinterest">Interest</span></span></span> <br><br><div id="foi" class="interests"> <li><span id="university12">Cricket</span></li><li><span id="university12">Swimming</span></li></div><br></div></div><div id="customer"> <div id="sortObective" class="sortItems" data-sort='2'> <h4 id="subheader" class="experience"><i class="icon-bulb"></i><span class="hexperience">My Objective</span></h4> <p id="objective">Seeking a rewarding Entry Level Financial Analyst position with ABC company to utilize learnings in financial reporting, forecasting, and planning and knowledge of accounting software..</p></div><div id="sortWork" class="sortItems" data-sort='2'> <h4 id="subheader" class="experience"><i class="icon-briefcase"></i><span class="hexperience">Experiance</span></h4> <div class="experience" id="work1"> <li><b><span class="bold" id="organization1">Wegasoft</span></b></li><div class="desc" id="designation1">Php developer</div><div class="orgduration"><i><span id="orgfrom1">16/07/2019</span> - <span id="orgto1">Present</span></i></div><div class="desc" id="role1">This us a wegasoft company</div></div></div><div id="sortEdu" class="sortItems" data-sort='3'> <h4 id="subheader" class="academics"><i class="icon-education"></i> <span class="heducation">Qualification</span></h4> <div class="edu"> <div id="et1"> <li><b><span id="university1">Sundram</span></b></li><div class="desc"> <span id="course1">H.s.c</span><br><span id="mark1">CGPA 85%</span><br><span class="orgduration"> <span id="year1">2015</span> </span> </div></div></div><div class="edu"> <div id="et1"> <li><b><span id="university1">Saurastra University</span></b></li><div class="desc"> <span id="course1">B.c.a</span><br><span id="mark1">CGPA 9.0</span><br><span class="orgduration"> <span id="year1">2015</span> </span> </div></div></div><div class="edu"> <div id="et1"> <li><b><span id="university1">Gtu</span></b></li><div class="desc"> <span id="course1">M.c.a</span><br><span id="mark1">CGPA 8.0</span><br><span class="orgduration"> <span id="year1">2010</span> </span> </div></div></div></div><div id="sortProject" class="sortItems" data-sort='5'> <h4 id="subheader" class="project" ><i class="icon-plane"></i><span class="hproject">Project</span></h4> <div class="project"> <div id="projrow1" class="projrowc"> <table width="100%"> <tr> <td style="padding-bottom:0px;"> <li> <b><span class="bold" id="project1">New project</span></b> </li></td><td align="right" style="padding-bottom:0px;"> <span style="float:right;"class="projecttime"><i><span id="profrom1">08/07/2019-24/07/2019</span></i></span> </td></tr></table> <div class="desc" id="projectdescr" ><p style="margin: 0 0 0px 0; font-size: 14px; font-weight: 600;">Developer</p>This is my new project.</div></div></div></div><div id="sortAchivements" class="sortItems" data-sort='6'> <h4 id="subheader" class="achivements"><i class="icon-award"></i><span class="hachivement">Achievements</span></h4> <div id="achivements"> <table width="100%"> <tr> <td> <li> <b><span class="bold">Cricket tournament</span></b> </li></td><td align="right"> <span style="float:right;" class="projecttime"><i> <span id="profrom">22-07-2019</span> </td></tr></table> <div class="desc" id="achivementdescr" style="margin-bottom:8px;"> This us a my first Cricket tournaments. </div></div></div><div id="sortReference" class="sortItems"><h4 id="subheader" class="achivements"><i class="icon-handshake"></i><span class="hachivement">Reference</span></h4><div id="reference" class="strength"><li><b>Hiren raiyani</b><span style="display:block;margin-left:0px;"><span style="font-size: 14px;display: inline-block;margin-top:5px; font-weight:normal;">Employee</span><br><span style="display: inline-block;margin-top: 5px;">[email protected]</span><br><span style="display: inline-block;margin-top: 5px;">7405445244</span></span></li></div></div><div id="sortProfile" class="sortItems" data-sort='11'> <h4 id="subheader" class="personal"><i class="icon-user"></i><span class="hprofile">Personal Info</span></h4> <div id="profile"> <table class="personal"> <tr class="mydob"> <td class="pers"> <li class="hdob">Date of Birth</li></td><td>:</td><td><span id="dob">25-07-2019</span> </td></tr><tr class="mstatus"> <td class="pers"> <li class="hmstatus">Marital Status</li></td><td>:</td><td><span id="mstatus"></span>Single</td></tr><tr class="hidenationality"> <td class="pers"> <li class="hnationality">Nationality</li></td><td>:</td><td><span id="nationality">Indian</span> </td></tr><tr> <td class="pers"> <li class="hklanguage">Known language</li></td><td>:</td><td><span id="klanguage">English,Gujarati,Sanskrit</span></td></tr></table> </div></div><div id="sortDeclaration" class="sortItems" data-sort='18'> <h4 class="declaration hdeclaration" id="subheader">Declaration</h4> <p class="declaration" id="declaration">This is declaration .</p></div><div id="sortDate" class="sortItems" data-sort='19'> <br><div id="loc"> <span class="hdate">Date</span> :<span id="resumedate">30-07-2019</span> <br><span class="hplace">Place</span> :<span id="place">Gondal</span> </div></div><div id="page-wrap2"> <div id="sign" align="right"> <div id="signimg"><img src="file:///data/user/0/com.qualifiedapps.resumemaker/files/cuaqnupvw.jpg" style="max-width: 100%;max-height: 125px;" align="right"></div><p id="signname">Paras raiyani new</p><br><br><br></div></div></div></div></body></html>;
pdf.fromData(data, {type: 'base64'}).then(function(base64) { console.log(base64); });
Just tested your HTML and I'm missing local assets like images and CSS, but PDF's getting generated fine.
Your HTML was missing some closing tags though.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8"><!-- <link rel="stylesheet" type="text/css" href="../css/resume.css"> <link rel="stylesheet" type="text/css" href="../css/fontello2.css"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet"> -->
<link rel="stylesheet" type="text/css" href="file:///android_asset/www/template_css/resume.css">
<link rel="stylesheet" type="text/css" href="file:///android_asset/www/template_css/font.css">
<link rel="stylesheet" type="text/css" href="file:///android_asset/www/template_css/fontello2.css">
<style>
body,
.left,
#customer {
line-height: 1.5;
color: #545E6C;
font-family: 'Roboto', sans-serif !important;
font: 16px Droid Sans;
}
#name {
font-family: 'Roboto', sans-serif;
}
h4 {
text-transform: uppercase;
padding-left: 3px;
color: #2d7788;
margin: 14px 0px !important;
font-size: 20px;
}
table.personal td,
table.personal th,
table.personal tr {
border: none;
}
.text {
padding: 8px 4px 8px 0px;
}
.left i {
font-size: 18px;
}
h4 i {
background: #2d7788;
padding: 8px 7px;
border-radius: 50%;
margin-right: 10px;
color: #fff;
font-size: 17px;
}
h4 span {
font-size: 20px;
}
#identity {
margin-bottom: 2px;
}
#role1,
#role2,
#role3,
#role4,
#role5,
#role6,
.project .text {
margin-bottom: 8px;
}
.orgduration,
.right {
text-decoration: italic;
}
.time,
.project .text,
.experience .orgduration,
.desc,
.edu p,
.right {
margin-left: 0px;
}
.edu p {
padding-bottom: 5px;
}
.edu .desc {
margin-bottom: 10px;
}
#objective,
.experience,
.edu,
#skills,
.project,
#achivements,
#foi,
#strength,
#profile,
#reference,
#declaration,
#loc,
#visit,
#exactive,
#coactive {
padding-left: 10px;
}
.left {
width: 250px;
float: right;
padding-bottom: 50px;
color: #fff;
}
.right {
width: 600px;
}
#customer {
background: #fff !important;
padding: 10px 25px 55px 10px;
margin-right: 0px;
}
.big {
font-size: 18px;
text-transform: uppercase;
font-weight: 700;
}
#page-wrap {
background: linear-gradient(to left, rgba(66, 169, 192, 1) 0%, rgba(66, 169, 192, 1) 66%, rgba(255, 255, 255, 1) 78%, rgba(255, 255, 255, 1) 100%);
padding-right: 0px;
}
.left li {
list-style-type: none;
line-height: 1.8;
}
li {
list-style-type: none;
line-height: 1.6;
}
#logo {
border-radius: 50%;
border: none;
padding: 0px;
}
#image {
border-radius: 50%;
}
#skills {
text-align: left;
}
.right {
float: none;
}
.footer {
padding: 30px 10px;
color: #000;
text-align: center;
}
.footer button {
padding: 11px;
border-radius: 50%;
border: 2px solid #666;
margin: 3px;
}
@media print {
.footer,
.footer button,
.modal {
display: none !important;
}
}
h4 {
padding-left: 0px !important;
}
.experience:not(:first-child),
#referencedoc li:not(:first-child),
.projrowc:not(:first-child) {
margin-top: 10px;
}
.intro_left_side ul li {
display: table;
width: 100%;
margin-bottom: 7px;
}
.intro_left_side ul li .intr_icon {
float: left;
width: 30px;
}
.intro_left_side ul li .intr_dsc {
float: left;
width: calc(100% - 30px);
overflow: hidden;
}
</style>
</head>
<body>
<div id="page-wrap" class="googoose-wrapper">
<div class="left">
<div class="lefttop" style="background-color:#34869a; padding:15px;"> <br>
<center>
<div style="margin:3px; border-radius: 50%;float:none;" id="logo"> <img src="file:///data/user/0/com.qualifiedapps.resumemaker/files/h2sbgavjt.jpg" id="image" class="myphoto" width="120px" height="120px"> </div><br>
<div id="identity"> <b><span style="font-size:22px;text-transform:uppercase;" id="name">Paras raiyani new</span></b> <br>
<div id="lastdesignation">Web developer</div><br><br>
</div>
</center>
</div>
<div class="leftbottom" style="padding:15px; background-color:#42a8c0;">
<!-- <div> <i class="icon-mail-alt"></i> <span id="myemail">[email protected]</span> <br><br><i class="icon-phone"></i> <span id="contact">9724081113</span><br><br><i class="icon-location"></i> <span id="address1">7/16 bhojrajpara,</span><br> <span id="address2">Gondal,</span><br> <span id="address3">India</span><br>-->
<div class="intro_left_side">
<ul>
<li>
<div class="intr_icon"><i class="icon-mail-alt"></i></div>
<div class="intr_dsc">[email protected]</div>
</li>
<li>
<div class="intr_icon"><i class="icon-phone"></i></div>
<div class="intr_dsc">9724081113</div>
</li>
<li>
<div class="intr_icon"><i class="icon-location"></i></div>
<div class="intr_dsc"> <span id="address1">7/16 bhojrajpara,</span> <span id="address2">Gondal,</span> <span id="address3">India</span> </div>
</li>
</ul>
</div><br><br><br><br><span class="skills"><i class="icon-rocket"></i> <span class="big hskills">Skills</span></span><br><br>
<div id="skills">
<li><span id="university1">Speak English</span></li>
<li><span id="university2">Reading</span></li>
</div><br><br><span class="interests"><span class="interests"><i class="icon-interests" class="interests"></i> <span class="big interests hinterest">Interest</span></span></span> <br><br>
<div id="foi" class="interests">
<li><span id="university12">Cricket</span></li>
<li><span id="university12">Swimming</span></li>
</div><br>
</div>
</div>
<div id="customer">
<div id="sortObective" class="sortItems" data-sort='2'>
<h4 id="subheader" class="experience"><i class="icon-bulb"></i><span class="hexperience">My Objective</span></h4>
<p id="objective">Seeking a rewarding Entry Level Financial Analyst position with ABC company to utilize learnings in financial reporting, forecasting, and planning and knowledge of accounting software..</p>
</div>
<div id="sortWork" class="sortItems" data-sort='2'>
<h4 id="subheader" class="experience"><i class="icon-briefcase"></i><span class="hexperience">Experiance</span></h4>
<div class="experience" id="work1">
<li><b><span class="bold" id="organization1">Wegasoft</span></b></li>
<div class="desc" id="designation1">Php developer</div>
<div class="orgduration"><i><span id="orgfrom1">16/07/2019</span> - <span id="orgto1">Present</span></i></div>
<div class="desc" id="role1">This us a wegasoft company</div>
</div>
</div>
<div id="sortEdu" class="sortItems" data-sort='3'>
<h4 id="subheader" class="academics"><i class="icon-education"></i> <span class="heducation">Qualification</span></h4>
<div class="edu">
<div id="et1">
<li><b><span id="university1">Sundram</span></b></li>
<div class="desc"> <span id="course1">H.s.c</span><br><span id="mark1">CGPA 85%</span><br><span class="orgduration"> <span id="year1">2015</span> </span> </div>
</div>
</div>
<div class="edu">
<div id="et1">
<li><b><span id="university1">Saurastra University</span></b></li>
<div class="desc"> <span id="course1">B.c.a</span><br><span id="mark1">CGPA 9.0</span><br><span class="orgduration"> <span id="year1">2015</span> </span> </div>
</div>
</div>
<div class="edu">
<div id="et1">
<li><b><span id="university1">Gtu</span></b></li>
<div class="desc"> <span id="course1">M.c.a</span><br><span id="mark1">CGPA 8.0</span><br><span class="orgduration"> <span id="year1">2010</span> </span> </div>
</div>
</div>
</div>
<div id="sortProject" class="sortItems" data-sort='5'>
<h4 id="subheader" class="project"><i class="icon-plane"></i><span class="hproject">Project</span></h4>
<div class="project">
<div id="projrow1" class="projrowc">
<table width="100%">
<tr>
<td style="padding-bottom:0px;">
<li> <b><span class="bold" id="project1">New project</span></b> </li>
</td>
<td align="right" style="padding-bottom:0px;"> <span style="float:right;" class="projecttime"><i><span id="profrom1">08/07/2019-24/07/2019</span></i></span> </td>
</tr>
</table>
<div class="desc" id="projectdescr">
<p style="margin: 0 0 0px 0; font-size: 14px; font-weight: 600;">Developer</p>This is my new project.
</div>
</div>
</div>
</div>
<div id="sortAchivements" class="sortItems" data-sort='6'>
<h4 id="subheader" class="achivements"><i class="icon-award"></i><span class="hachivement">Achievements</span></h4>
<div id="achivements">
<table width="100%">
<tr>
<td>
<li> <b><span class="bold">Cricket tournament</span></b> </li>
</td>
<td align="right"> <span style="float:right;" class="projecttime"><i> <span id="profrom">22-07-2019</span>
</i>
</span>
</td>
</tr>
</table>
<div class="desc" id="achivementdescr" style="margin-bottom:8px;"> This us a my first Cricket tournaments. </div>
</div>
</div>
<div id="sortReference" class="sortItems">
<h4 id="subheader" class="achivements"><i class="icon-handshake"></i><span class="hachivement">Reference</span></h4>
<div id="reference" class="strength">
<li><b>Hiren raiyani</b><span style="display:block;margin-left:0px;"><span style="font-size: 14px;display: inline-block;margin-top:5px; font-weight:normal;">Employee</span><br><span style="display: inline-block;margin-top: 5px;">[email protected]</span><br><span style="display: inline-block;margin-top: 5px;">7405445244</span></span></li>
</div>
</div>
<div id="sortProfile" class="sortItems" data-sort='11'>
<h4 id="subheader" class="personal"><i class="icon-user"></i><span class="hprofile">Personal Info</span></h4>
<div id="profile">
<table class="personal">
<tr class="mydob">
<td class="pers">
<li class="hdob">Date of Birth</li>
</td>
<td>:</td>
<td><span id="dob">25-07-2019</span> </td>
</tr>
<tr class="mstatus">
<td class="pers">
<li class="hmstatus">Marital Status</li>
</td>
<td>:</td>
<td><span id="mstatus"></span>Single</td>
</tr>
<tr class="hidenationality">
<td class="pers">
<li class="hnationality">Nationality</li>
</td>
<td>:</td>
<td><span id="nationality">Indian</span> </td>
</tr>
<tr>
<td class="pers">
<li class="hklanguage">Known language</li>
</td>
<td>:</td>
<td><span id="klanguage">English,Gujarati,Sanskrit</span></td>
</tr>
</table>
</div>
</div>
<div id="sortDeclaration" class="sortItems" data-sort='18'>
<h4 class="declaration hdeclaration" id="subheader">Declaration</h4>
<p class="declaration" id="declaration">This is declaration .</p>
</div>
<div id="sortDate" class="sortItems" data-sort='19'> <br>
<div id="loc"> <span class="hdate">Date</span> :<span id="resumedate">30-07-2019</span> <br><span class="hplace">Place</span> :<span id="place">Gondal</span> </div>
</div>
<div id="page-wrap2">
<div id="sign" align="right">
<div id="signimg"><img src="file:///data/user/0/com.qualifiedapps.resumemaker/files/cuaqnupvw.jpg" style="max-width: 100%;max-height: 125px;" align="right"></div>
<p id="signname">Paras raiyani new</p><br><br><br>
</div>
</div>
</div>
</div>
</body>
</html>
