Search This Blog

Convert HTML CSS to PDF with JavaScript | HTML to PDF

Convert HTML CSS to PDF with JavaScript | HTML to PDF Hello, in this video i will show you how to convert HTML, CSS to PDF using JavaScript and HTML2PDF.js library.

Source Code to Convert HTML to PDF


<!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>HTML to PDF</title>
    <style>
        .elem {
            background-color: darkCyan;
            color: white;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>
    <div class="elem">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi illo cumque ea velit, earum explicabo commodi ipsa voluptatem quidem dolores laborum eaque itaque nihil at eveniet similique fugit enim consequuntur, officia nostrum nemo! Nam voluptate corporis
        error aut nobis repellendus illo pariatur accusantium non quas dolores nihil dignissimos quam quisquam natus nostrum nesciunt officia temporibus doloremque, dolor iste! Aspernatur ad ratione perspiciatis sequi consequuntur aut nulla itaque consequatur.
        Aliquam fugit distinctio debitis deleniti, nisi nemo eius a, facilis dolorem tempora iusto laboriosam dicta beatae. Nisi, quisquam. Ducimus facere rerum veniam, reprehenderit labore expedita! Amet fuga, quia dicta excepturi iusto cumque.
    </div>
    <button class="download">Download PDF</button>
    <script>
        let div = document.querySelector(".elem");
        let btn = document.querySelector(".download");
        btn.addEventListener('click', () => {
            html2pdf().from(div).save()
        })
    </script>
</body>

</html>

Create a Working Contact Form Using HTML - CSS - JavaScript And AppScript | HTML Form to Email

Create a Working Contact Form Using HTML - CSS - JavaScript And AppScript. Hello, in today's video i will show you how to create a working contact form using HTML, CSS, JavaScript and AppScript.

HTML, CSS , JavaScript Code


<!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>Contact Form</title>
    <style>
        form {
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        
        form * {
            width: 100%;
            margin-top: 2px;
        }
    </style>
</head>

<body>
    <form>
        <h2>Contact Us</h2>
        <span class="message"></span>
        <input type="text" name="name" placeholder='Name..'>
        <input type="email" name="email" placeholder='Email..'>
        <textarea name="message" cols="30" rows="10" placeholder='Message..'></textarea>
        <input type="submit" class="submit">
    </form>
    <script>
        let url = "Api End point url";
        let form = document.querySelector("form");
        let submit = document.querySelector(".submit");
        let message = document.querySelector(".message");
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            submit.value = "submitting.."
            fetch(url, {
                    method: "POST",
                    body: new FormData(form)
                })
                .then(res => res.text())
                .then(data => {
                    message.innerHTML = data;
                    submit.value = "submit"

                })
                .catch(err => {
                    message.innerHTML = err;
                    submit.value = "submit"
                })
        })
    </script>
</body>

</html>

AppsScript Code


let sheet = SpreadsheetApp.openByUrl("YOUR_SPREADSHEET_URL")
function doPost(e){
  MailApp.sendEmail("receipent email address",`${e.parameters.name} from new contact form!`,`${e.parameters.message}\n${e.parameters.email}`)
  return ContentService.createTextOutput("Message has been Sent!")
}