anurag-roy/customer-json-to-jspdf.html

## customer-json-to-jspdf.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Json to PDF</title>
    <script src="https://unpkg.com/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
  </head>
  <body></body>
  <script type="module">
    function getData() {
      const data = [
        {
          name: 'John Doe',
          profilePic:
            'https://img.freepik.com/free-photo/young-bearded-man-with-striped-shirt_273609-5677.jpg',
          email: 'johndoe@example.com',
          phone: '555-1234',
          country: 'USA',
          age: 35,
          sex: 'Male',
          rowNum: 2,
        },
        {
          name: 'Jane Smith',
          profilePic:
            'https://img.freepik.com/free-photo/young-woman-with-round-glasses-yellow-sweater_273609-7091.jpg',
          email: 'janesmith@example.com',
          phone: '555-5678',
          country: 'Canada',
          age: 27,
          sex: 'Female',
          rowNum: 3,
        },
        {
          name: 'Mark Johnson',
          profilePic:
            'https://img.freepik.com/free-photo/cheerful-curly-business-girl-wearing-glasses_176420-206.jpg',
          email: 'catherinechen@example.com',
          phone: '555-9012',
          country: 'USA',
          age: 42,
          sex: 'Female',
          rowNum: 4,
        },
        {
          name: 'Emily Brown',
          profilePic:
            'https://img.freepik.com/free-photo/pretty-smiling-joyfully-female-with-fair-hair-dressed-casually-looking-with-satisfaction_176420-15187.jpg',
          email: 'emilybrown@example.com',
          phone: '555-3456',
          country: 'UK',
          age: 19,
          sex: 'Female',
          rowNum: 5,
        },
        {
          name: 'David Lee',
          profilePic:
            'https://img.freepik.com/free-photo/handsome-confident-smiling-man-with-hands-crossed-chest_176420-18743.jpg',
          email: 'davidlee@example.com',
          phone: '555-7890',
          country: 'USA',
          age: 56,
          sex: 'Male',
          rowNum: 6,
        },
        {
          name: 'Sarah Kim',
          profilePic:
            'https://img.freepik.com/free-photo/waist-up-portrait-handsome-serious-unshaven-male-keeps-hands-together-dressed-dark-blue-shirt-has-talk-with-interlocutor-stands-against-white-wall-self-confident-man-freelancer_273609-16320.jpg?size=626&ext=jpg',
          email: 'sarahkim@example.com',
          phone: '555-2345',
          country: 'Canada',
          age: 31,
          sex: 'Female',
          rowNum: 7,
        },
        {
          name: 'Michael Smith',
          profilePic:
            'https://img.freepik.com/free-photo/young-beautiful-woman-pink-warm-sweater-natural-look-smiling-portrait-isolated-long-hair_285396-896.jpg',
          email: 'michaelsmith@example.com',
          phone: '555-6789',
          country: 'USA',
          age: 24,
          sex: 'Female',
          rowNum: 8,
        },
        {
          name: 'Catherine Chen',
          profilePic:
            'https://img.freepik.com/free-photo/positive-young-caucasian-male-with-pleasant-friendly-smile-shows-white-teeth-rejoices-new-stage-life-wears-casual-striped-sweater-round-spectacles-stands-alone-against-pink-wall_273609-14966.jpg',
          email: 'markjohnson@example.com',
          phone: '555-0123',
          country: 'Canada',
          age: 38,
          sex: 'Male',
          rowNum: 9,
        },
        {
          name: 'Peter Wang',
          profilePic:
            'https://img.freepik.com/free-photo/pleasant-looking-serious-man-stands-profile-has-confident-expression-wears-casual-white-t-shirt_273609-16959.jpg',
          email: 'peterwang@example.com',
          phone: '555-4567',
          country: 'USA',
          age: 43,
          sex: 'Male',
          rowNum: 10,
        },
        {
          name: 'Amy Lee',
          profilePic:
            'https://img.freepik.com/premium-photo/young-handsome-man-with-beard-isolated-keeping-arms-crossed-frontal-position_1368-132662.jpg',
          email: 'amylee@example.com',
          phone: '555-8901',
          country: 'UK',
          age: 29,
          sex: 'Male',
          rowNum: 11,
        },
      ];

      return data;
    }

    function generatePdf(data) {}

    const PROXY_URL_PREFIX = 'https://cors-anywhere.herokuapp.com';
    const FILE_NAME = 'Customers.pdf';

    const data = getData();
    // Default export is a4 paper, portrait, using milimeters for units
    const doc = new jspdf.jsPDF({
      unit: 'px',
    });

    for (let person of data) {
      doc.setFont('helvetica', 'bold');
      doc.setFontSize(24);
      doc.text(`${person.rowNum - 1}. ${person.name}`, 20, 40);

      const img = new Image(300, 300);
      img.src = PROXY_URL_PREFIX + '/' + person.profilePic;
      doc.addImage(img, 'jpg', 20, 60, 300, 300);

      // Email Label
      doc.setFontSize(12);
      doc.text('Email:', 20, 400);

      // Email Value
      doc.setFont('helvetica', 'normal');
      doc.setTextColor('blue');
      doc.textWithLink(person.email, 80, 400, {
        url: `mailto:${person.email}`,
      });
      doc.setTextColor('black');

      const keys = ['phone', 'age', 'sex', 'country'];
      for (let i = 0; i < keys.length; i++) {
        const key = keys[i];

        let label = key.charAt(0).toUpperCase() + key.slice(1) + ':';
        let value = person[key].toString();
        let yDelta = 20;

        // Label
        doc.setFont('helvetica', 'bold');
        doc.setFontSize(12);
        doc.text(label, 20, 420 + yDelta * i);

        // Value
        doc.setFont('helvetica', 'normal');
        doc.text(value, 80, 420 + yDelta * i);
      }

      doc.addPage();
    }

    doc.save(FILE_NAME);
    // generatePdf(data);
  </script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Json to PDF</title>
	<script src="https://unpkg.com/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
	</head>
	<body></body>
	<script type="module">
	function getData() {
	const data = [
	{
	name: 'John Doe',
	profilePic:
	'https://img.freepik.com/free-photo/young-bearded-man-with-striped-shirt_273609-5677.jpg',
	email: 'johndoe@example.com',
	phone: '555-1234',
	country: 'USA',
	age: 35,
	sex: 'Male',
	rowNum: 2,
	},
	{
	name: 'Jane Smith',
	profilePic:
	'https://img.freepik.com/free-photo/young-woman-with-round-glasses-yellow-sweater_273609-7091.jpg',
	email: 'janesmith@example.com',
	phone: '555-5678',
	country: 'Canada',
	age: 27,
	sex: 'Female',
	rowNum: 3,
	},
	{
	name: 'Mark Johnson',
	profilePic:
	'https://img.freepik.com/free-photo/cheerful-curly-business-girl-wearing-glasses_176420-206.jpg',
	email: 'catherinechen@example.com',
	phone: '555-9012',
	country: 'USA',
	age: 42,
	sex: 'Female',
	rowNum: 4,
	},
	{
	name: 'Emily Brown',
	profilePic:
	'https://img.freepik.com/free-photo/pretty-smiling-joyfully-female-with-fair-hair-dressed-casually-looking-with-satisfaction_176420-15187.jpg',
	email: 'emilybrown@example.com',
	phone: '555-3456',
	country: 'UK',
	age: 19,
	sex: 'Female',
	rowNum: 5,
	},
	{
	name: 'David Lee',
	profilePic:
	'https://img.freepik.com/free-photo/handsome-confident-smiling-man-with-hands-crossed-chest_176420-18743.jpg',
	email: 'davidlee@example.com',
	phone: '555-7890',
	country: 'USA',
	age: 56,
	sex: 'Male',
	rowNum: 6,
	},
	{
	name: 'Sarah Kim',
	profilePic:
	'https://img.freepik.com/free-photo/waist-up-portrait-handsome-serious-unshaven-male-keeps-hands-together-dressed-dark-blue-shirt-has-talk-with-interlocutor-stands-against-white-wall-self-confident-man-freelancer_273609-16320.jpg?size=626&ext=jpg',
	email: 'sarahkim@example.com',
	phone: '555-2345',
	country: 'Canada',
	age: 31,
	sex: 'Female',
	rowNum: 7,
	},
	{
	name: 'Michael Smith',
	profilePic:
	'https://img.freepik.com/free-photo/young-beautiful-woman-pink-warm-sweater-natural-look-smiling-portrait-isolated-long-hair_285396-896.jpg',
	email: 'michaelsmith@example.com',
	phone: '555-6789',
	country: 'USA',
	age: 24,
	sex: 'Female',
	rowNum: 8,
	},
	{
	name: 'Catherine Chen',
	profilePic:
	'https://img.freepik.com/free-photo/positive-young-caucasian-male-with-pleasant-friendly-smile-shows-white-teeth-rejoices-new-stage-life-wears-casual-striped-sweater-round-spectacles-stands-alone-against-pink-wall_273609-14966.jpg',
	email: 'markjohnson@example.com',
	phone: '555-0123',
	country: 'Canada',
	age: 38,
	sex: 'Male',
	rowNum: 9,
	},
	{
	name: 'Peter Wang',
	profilePic:
	'https://img.freepik.com/free-photo/pleasant-looking-serious-man-stands-profile-has-confident-expression-wears-casual-white-t-shirt_273609-16959.jpg',
	email: 'peterwang@example.com',
	phone: '555-4567',
	country: 'USA',
	age: 43,
	sex: 'Male',
	rowNum: 10,
	},
	{
	name: 'Amy Lee',
	profilePic:
	'https://img.freepik.com/premium-photo/young-handsome-man-with-beard-isolated-keeping-arms-crossed-frontal-position_1368-132662.jpg',
	email: 'amylee@example.com',
	phone: '555-8901',
	country: 'UK',
	age: 29,
	sex: 'Male',
	rowNum: 11,
	},
	];

	return data;
	}

	function generatePdf(data) {}

	const PROXY_URL_PREFIX = 'https://cors-anywhere.herokuapp.com';
	const FILE_NAME = 'Customers.pdf';

	const data = getData();
	// Default export is a4 paper, portrait, using milimeters for units
	const doc = new jspdf.jsPDF({
	unit: 'px',
	});

	for (let person of data) {
	doc.setFont('helvetica', 'bold');
	doc.setFontSize(24);
	doc.text(`${person.rowNum - 1}. ${person.name}`, 20, 40);

	const img = new Image(300, 300);
	img.src = PROXY_URL_PREFIX + '/' + person.profilePic;
	doc.addImage(img, 'jpg', 20, 60, 300, 300);

	// Email Label
	doc.setFontSize(12);
	doc.text('Email:', 20, 400);

	// Email Value
	doc.setFont('helvetica', 'normal');
	doc.setTextColor('blue');
	doc.textWithLink(person.email, 80, 400, {
	url: `mailto:${person.email}`,
	});
	doc.setTextColor('black');

	const keys = ['phone', 'age', 'sex', 'country'];
	for (let i = 0; i < keys.length; i++) {
	const key = keys[i];

	let label = key.charAt(0).toUpperCase() + key.slice(1) + ':';
	let value = person[key].toString();
	let yDelta = 20;

	// Label
	doc.setFont('helvetica', 'bold');
	doc.setFontSize(12);
	doc.text(label, 20, 420 + yDelta * i);

	// Value
	doc.setFont('helvetica', 'normal');
	doc.text(value, 80, 420 + yDelta * i);
	}

	doc.addPage();
	}

	doc.save(FILE_NAME);
	// generatePdf(data);
	</script>
	</html>