Shweta Shinde
Reputation: 115
How to convert html do docx and handle bullets points
I have this index.html page there is getting bullets points in experience, skills and so on every time my data of candidateResumeData is different
I tried multiple of code to convert html to docx but not getting proper bullet points in docx file
please give me solution
below i have attached html page below
note that i want same design in docx of html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Resume</title>
<style>
ul {
margin-bottom: 0px !important;
}
.template-body {
background-color: #fff;
color: #111;
padding: 20px;
}
.template-name {
font-size: 24px;
font-family: "Calibri";
font-weight: 800;
}
.template-experience {
font-size: 10px;
}
</style>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</head>
<body class="m-3">
<section id="header-section"></section>
<section id="profile-section" class="mb-2"></section>
<section id="experience-section"></section>
<section id="certifications-section" class="mb-2"></section>
<section id="education-section" class="mb-2"></section>
<section id="skills-section" class="mb-2"></section>
<section id="additional-section" class="mb-2"></section>
<script>
const candidateResumeData = {
"name": "Joseph Iaconis",
"location": "446 East 86th Street, New York, NY 10028",
"current_designation": "Finance Senior Billing Coordinator",
"email": "[email protected]",
"phone": "(917) 773-5882",
"summary": "",
"work_experience": [
{
"title": "Finance Senior Billing Coordinator",
"company": "IPC Systems, Inc.",
"location": "Jersey City, NJ",
"time_period": "October 2018 – Present",
"responsibilities": [
"Conduct Network Services monthly invoicing process consisting of 1,200 invoices for $10mm using NSB internal billing system",
"Execute daily bookings in Salesforce by analyzing and ensuring compliance",
"Process daily transactions/invoices in Oracle Cloud consisting of 8 million dollars per month",
"Trained coordinators in the U.K., Madrid, and Malaysia on billing, accounts receivable, and collections tasks",
"Collaborated with Sales, Operations, and IT on various cost/process improvements projects to represent the Finance department with ERP, Portal, and Salesforce system upgrades and enhancements"
],
"remaining_related_data": ""
},
{
"title": "Business Process Outsourcing Financial Analyst",
"company": "Vestmark, Inc.",
"location": "Jersey City, NJ",
"time_period": "January 2017 – October 2018",
"responsibilities": [
"Managed the new outsourcing billing service for the firm and clients utilizing Revport and provide subject matter expertise for the Revport implementation project",
"Communicated on an ongoing basis with executive-level clients and internal operations/technology teams to coordinate synergies",
"Reconciled client invoices pertaining to their Assets Under Management (AUM) and investment portfolios",
"Presented project and client status updates in weekly meetings to Senior Management and staff"
],
"remaining_related_data": ""
},
{
"title": "Accounts Receivable/Collections/Financial Specialist",
"company": "Operative Media/Sintec Media",
"location": "New York, NY",
"time_period": "November 2016 – January 2017",
"responsibilities": [
"Oversaw multiple banking websites (J.P. Morgan, Citibank) for payment processing and other transactions",
"Utilized the GreatPlains application for the A/R and Collection processes and analyzed monthly Google ADX billing",
"Compiled reports of daily international cash flow for the CFO and further strategized the Collection process for increasing cash flow"
],
"remaining_related_data": ""
},
{
"title": "Business System Analyst/Legal Operations Division",
"company": "American International Group",
"location": "New York, NY",
"time_period": "April 2016 – November 2016",
"responsibilities": [
"Administrated all legal Matter Based Agreement Requests and timekeeper updates received through the Onit application",
"Maintained, updated, and approved requests in the TeamConnect application",
"Reported and presented biweekly to executives and departments on the status of transactions"
],
"remaining_related_data": ""
},
{
"title": "Billing, Accounts Receivable & Collections Financial Specialist",
"company": "Midea America & Canada Corporation",
"location": "Parsippany, NJ",
"time_period": "June 2015 – April 2016",
"responsibilities": [
"Enhanced the E-Billing, Accounts Receivables, and Collections processes for MACC and led the MACC Sales Representatives' Monthly Commissions process",
"Liaised with Midea IT for needed improvements for Oracle Business System (OBS)/JD Edwards",
"Processed daily average of 50 cash receipts and wire payments"
],
"remaining_related_data": ""
},
{
"title": "Billing System Administrator/Billing Specialist",
"company": "DTCC",
"location": "New York, NY",
"time_period": "September 2002 – August 2014",
"responsibilities": [
"Governed distribution of the DTC and Omgeo monthly invoices of $50mm a month as the e-billing Team's subject matter expert",
"Coordinated data files transfers between Metranet Billing System JD Edwards accounting system",
"Established the 'End-to-End' billing project resulting in more transparency from source systems to customer invoices"
],
"remaining_related_data": ""
}
],
"education": [
{
"degree": "Pre-MBA Courses",
"university": "Fordham University",
"location": "New York, NY",
"time_period": "September 2012",
"remaining_related_data": ""
},
{
"degree": "IASSC Certified Lean Six Sigma Green Belt, IASSC Certified Lean Six Sigma Yellow Belt",
"university": "BMGI – Six Sigma Certifications",
"location": "New York, NY",
"time_period": "September 2010",
"remaining_related_data": ""
},
{
"degree": "Bachelor of Business Administration, Business",
"university": "CUNY Baruch College",
"location": "New York, NY",
"time_period": "September 2002",
"remaining_related_data": ""
}
],
"skills": [
{
"heading": "Languages",
"related_data": [
"English Fluent",
"Italian Intermediate",
"Spanish Basic"
]
},
{
"heading": "Community Involvement",
"related_data": [
"Chase Corporate Challenges",
"America SCORES New York",
"Habitat for Humanity"
]
},
{
"heading": "Applications",
"related_data": [
"Oracle Cloud",
"Microsoft Office Suite",
"Microsoft Visio",
"JD Edwards",
"Metranet",
"TeamConnect",
"ONIT",
"SAP Business Objects",
"Google ADX",
"J.P. Morgan Receivables Edge",
"GreatPlains",
"Salesforce",
"Jira",
"RevPort",
"Fidelity WealthScape",
"Charles Schwab",
"Ariba",
"Coupa"
]
}
],
"certifications": [
{
"certification_details": "",
"date": "",
"remaining_related_data": ""
}
],
"additional": ""
};
// Function to check if a key is empty
function isKeyEmpty(obj, key) {
return !obj.hasOwnProperty(key) || isEmpty(obj[key]);
}
// Function to check if a value is empty
function isEmpty(value) {
return (
value === null ||
value === undefined ||
(typeof value === "string" && value.trim() === "") ||
(Array.isArray(value) && value.length === 0) ||
(typeof value === "object" && Object.keys(value).length === 0)
);
}
// Helper function to capitalize and replace underscores with spaces
function capitalizeAndReplace(str) {
return str.charAt(0).toUpperCase() + str.slice(1).replace(/_/g, " ");
}
// Helper function to render value based on its type
function renderValue(value) {
if (typeof value === "string" || typeof value === "number") {
return value;
} else if (Array.isArray(value)) {
return `<ul>${value
.map((item) => `<li>${renderValue(item)}</li>`)
.join("")}</ul>`;
} else if (typeof value === "object") {
return `<ul>${Object.entries(value)
.map(
([key, val]) =>
`<li><span class='fw-bold'>${capitalizeAndReplace(
key
)}: </span>${renderValue(val)}</li>`
)
.join("")}</ul>`;
}
return "";
}
// Function to render the header section
function renderHeaderSection() {
const headerSection = document.getElementById("header-section");
const headerContent = `
<div class='d-flex justify-content-between'>
<p class='template-name'>${candidateResumeData.name}</p>
<img src="/forum_logo.png" alt="" height="70px" />
</div>
`;
headerSection.innerHTML = headerContent;
}
// Function to render profile section
function renderProfileSection() {
const profileSection = document.getElementById("profile-section");
if (!isKeyEmpty(candidateResumeData, "summary")) {
profileSection.innerHTML = `
<section>
<div class='row mb-0'>
<p class='fw-bold text-decoration-underline mb-0 pb-0'>PROFILE:</p>
</div>
${renderValue(candidateResumeData.summary)}
<br>
</section>
`;
} else {
profileSection.innerHTML = "";
}
}
// Function to render additional data for each work experience item
function renderAdditionalExperienceData(experience) {
return Object.entries(experience)
.map(([key, value]) => {
if (
![
"title",
"location",
"time_period",
"company",
"responsibilities",
"remaining_related_data",
].includes(key)
) {
return `
<div>
<p class='p-0 m-0 fw-bold'>${key}: </p>
${renderValue(value)}
</div>
`;
}
return "";
})
.join("");
}
// Function to render work experience section
function renderExperienceSection() {
const experienceSection = document.getElementById("experience-section");
if (!isKeyEmpty(candidateResumeData, "work_experience")) {
const workExperienceHTML = candidateResumeData.work_experience
.map(renderWorkExperience)
.join("");
experienceSection.innerHTML = `
<div class='row'>
<p class='fw-bold text-decoration-underline mb-0 pb-0'>EXPERIENCE:</p>
</div>
${workExperienceHTML}
`;
} else {
experienceSection.innerHTML = "";
}
}
// Function to render each work experience item
function renderWorkExperience(experience, index) {
return `
<div key=${index} class='col-12 mb-4'>
<div class='d-flex justify-content-between'>
${
!experience.company && !experience.location
? `<p class='p-0 m-0 fw-bold fst-italic'>${experience.title}</p>`
: `<p class='p-0 m-0 fw-bold'>${
experience.company
} ${
experience.location
? `, ${experience.location}`
: ""
}</p>`
}
<p class='p-0 m-0 fw-bold'>${experience.time_period}</p>
</div>
<p class='p-0 m-0 fw-bold fst-italic'>${
!(!experience.company && !experience.location) &&
experience.title
}</p>
${renderValue(experience.responsibilities)}
${renderValue(experience.remaining_related_data)}
${renderAdditionalExperienceData(experience)}
</div>
`;
}
// Function to render certifications section
function renderCertificationsSection() {
const certificationsSection = document.getElementById(
"certifications-section"
);
if (!isKeyEmpty(candidateResumeData, "certifications")) {
const certifications = candidateResumeData.certifications;
if (
Array.isArray(certifications) &&
certifications.some(
(certification) =>
certification.certification_details.trim() !== ""
)
) {
const certificationsHTML = certifications
.map(renderCertification)
.join("");
certificationsSection.innerHTML = `
<section>
<div class='row'>
<p class='fw-bold text-decoration-underline mb-0 pb-0'>CERTIFICATIONS:</p>
</div>
<ul>
${certificationsHTML}
</ul>
</section>
`;
} else if (
!Array.isArray(certifications) &&
certifications.certification_details.trim() !== ""
) {
certificationsSection.innerHTML = `
<section>
<div class='row'>
<p class='fw-bold text-decoration-underline mb-0 pb-0'>CERTIFICATIONS:</p>
</div>
<ul>
<li>
<p class='p-0 m-0'>${
certifications.certification_details
} ${
certifications.date ? `● ${certifications.date}` : ""
}</p>
</li>
</ul>
</section>
`;
}
} else {
certificationsSection.innerHTML = "";
}
}
// Function to render each certification item
function renderCertification(certification, index) {
return `
<li key=${index}>
<p class='p-0 m-0'>${certification.certification_details} ${
certification.date ? `● ${certification.date}` : ""
}</p>
</li>
`;
}
// Function to render education section
function renderEducationSection() {
const educationSection = document.getElementById("education-section");
if (!isKeyEmpty(candidateResumeData, "education")) {
const { education } = candidateResumeData;
if (Array.isArray(education)) {
if (education.every((edu) => isEmptyEducation(edu))) {
educationSection.innerHTML = "";
return;
}
const educationHTML = education
.map(renderEducationDetails)
.join("");
educationSection.innerHTML = `
<section>
${renderEducationHeader()}
${educationHTML}
</section>
`;
} else if (typeof education === "object") {
const {
university,
location,
time_period,
degree,
remaining_related_data,
...additionalData
} = education;
if (
isEmptyEducation({
university,
location,
time_period,
degree,
remaining_related_data,
...additionalData,
})
) {
educationSection.innerHTML = "";
return;
}
educationSection.innerHTML = `
<section>
${renderEducationHeader()}
<div>
${renderEducationDetails({
university,
location,
time_period,
degree,
remaining_related_data,
...additionalData,
})}
</div>
</section>
`;
}
} else {
educationSection.innerHTML = "";
}
}
// Function to render education header
function renderEducationHeader() {
return `
<div class='row'>
<p class='fw-bold text-decoration-underline'>EDUCATION:</p>
</div>
`;
}
// Function to render each education item
function renderEducationDetails(edu) {
const {
university,
location,
time_period,
degree,
remaining_related_data,
...additionalData
} = edu;
return `
<div>
<p class='p-0 m-0 fw-bold'>${university} ${
location ? `● ${location}` : ""
} ${time_period ? `● ${time_period}` : ""}</p>
<p class='p-0 m-0 fw-bold fst-italic'>${degree}</p>
${renderValue(remaining_related_data)}
${renderAdditionalEducationData(additionalData)}
<br />
</div>
`;
}
// Function to render additional data for each education item
function renderAdditionalEducationData(edu) {
return Object.entries(edu)
.map(([key, value]) => {
if (
![
"university",
"location",
"time_period",
"degree",
"remaining_related_data",
].includes(key)
) {
return `
<div>
<p class='p-0 m-0 fw-bold'>${key}: </p>
${renderValue(value)}
</div>
`;
}
return "";
})
.join("");
}
// Function to check if an education item is empty
function isEmptyEducation(edu) {
const {
university,
location,
time_period,
degree,
remaining_related_data,
...additionalData
} = edu;
const additionalDataValues = Object.values(additionalData);
if (
typeof university === "string" &&
university.trim() === "" &&
typeof location === "string" &&
location.trim() === "" &&
typeof degree === "string" &&
degree.trim() === "" &&
typeof time_period === "string" &&
time_period.trim() === "" &&
typeof remaining_related_data === "string" &&
remaining_related_data.trim() === "" &&
additionalDataValues.every(
(value) => typeof value === "string" && value.trim() === ""
)
) {
return true;
}
return false;
}
// Function to render skills section
function renderSkillsSection() {
const skillsSection = document.getElementById("skills-section");
if (!isKeyEmpty(candidateResumeData, "skills")) {
const { skills } = candidateResumeData;
if (Array.isArray(skills)) {
if (skills.every((skill) => isEmptySkill(skill))) {
skillsSection.innerHTML = "";
return;
}
const skillsHTML = skills.map(renderSkill).join("");
skillsSection.innerHTML = `
<section>
${renderSkillsHeader()}
${skillsHTML}
</section>
`;
} else if (typeof skills === "object") {
const { heading, related_data } = skills;
if (isEmptySkill({ heading, related_data })) {
skillsSection.innerHTML = "";
return;
}
skillsSection.innerHTML = `
<section>
${renderSkillsHeader()}
<div>
${renderSkill({ heading, related_data })}
</div>
</section>
`;
}
} else {
skillsSection.innerHTML = "";
}
}
// Function to render skills header
function renderSkillsHeader() {
return `
<div class='row'>
<p class='fw-bold text-decoration-underline mb-0 pb-0'>SKILLS:</p>
</div>
`;
}
// Function to render a skill
function renderSkill(skill) {
const { heading, related_data } = skill;
if (related_data === "") {
return `
<ul>
<li>
${renderValue(heading)}
</li>
</ul>
`;
} else if (heading === "") {
return renderValue(related_data);
} else {
return `
${renderValue(heading)}
${
Array.isArray(related_data)
? renderValue(related_data)
: `<ul>${renderValue(related_data)}</ul>`
}
`;
}
}
// Function to check if a skill is empty
function isEmptySkill(skill) {
const { heading, related_data } = skill;
if (
typeof heading === "string" &&
heading.trim() === "" &&
typeof related_data === "string" &&
related_data.trim() === ""
) {
return true;
}
return false;
}
// Function to render additional section
function renderAdditionalSection() {
const additionalSection = document.getElementById("additional-section");
if (!isKeyEmpty(candidateResumeData, "additional")) {
additionalSection.innerHTML = `
<section>
<div class='row'>
<p class='fw-bold text-decoration-underline mb-0 pb-0'>ADDITIONAL:</p>
</div>
${renderValue(candidateResumeData.additional)}
</section>
`;
} else {
additionalSection.innerHTML = "";
}
}
// Initial rendering
renderHeaderSection();
renderProfileSection();
renderExperienceSection();
renderCertificationsSection();
renderEducationSection();
renderSkillsSection();
renderAdditionalSection();
</script>
</body>
</html>Upvotes: 0
Views: 139
Answers (0)
Related Questions
- How to display Base64 images in HTML
- How can I set the default value for an HTML <select> element?
- How to align checkboxes and their labels consistently cross-browsers
- How do you parse and process HTML/XML in PHP?
- How do I create an HTML button that acts like a link?
- How to redirect one HTML page to another on load
- How do I retrieve an HTML element's actual width and height?
- How do I make function decorators and chain them together?
- How do I create a directory, and any missing parent directories?