JavaScript에서 인증서 생성기 웹 사이트를 만드는 방법

9115 단어 beginners html javascript css

인증서를 받으려면 https://certificate-generator.netlify.app/에 있습니다. 이 인증서 생성기를 생성하면 pdf 형식의 인증서를 다운로드할 수 있습니다. 이제 어떻게 만들어야 하는지 살펴보겠습니다. 우리는 그것을 Html, CSS 및 JavaScript로 만들었습니다. 이것은 매우 쉬울 것입니다.
먼저 템플릿이 필요하고 PDF 형식의 템플릿이 필요합니다. 여기서는 Canva 웹사이트를 사용했습니다. 먼저 Canva.com으로 이동하여 계정을 만든 다음 인증서를 검색하세요.

거기에서 많은 인증서를 얻을 수 있습니다. 원하는 것을 선택하고 다운로드하십시오. 그리고 귀하에 따라 해당 템플릿을 사용자 정의하십시오. 여기에서 이 템플릿을 사용했습니다.

여기에서 코드 편집기를 엽니다. 여기서 index.html, style.css 및 index.js 파일을 만듭니다. 먼저 프런트 엔드를 만듭니다.
*index.html
*

<!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Certificate Generator using javascript</title>  
   <link rel="stylesheet" href="style.css">  
   <link href="https://fonts.googleapis.com/css2?family=Archivo+Narrow&display=swap" rel="stylesheet">  
   <link rel="icon" type="image/png" href="favicon.png"/>  
 </head>  
 <body>  
   <header>  
     <div class="heading_text">  
       <h1>Create Certificates for Free in Minutes</h1>  
       <h2>Make unique certificates in minutes. No design skills needed.</h2>  
     </div>  
   </header>  
   <main>  
     <div>  
       <input type="text" name="Name" class="question" id="name" required autocomplete="off" />  
       <label for="name"><span>What's your name?</span></label>  
       <input type="submit" id="submitBtn" value="Get Certificate"/>  
     </div>  
   </main>  
   <script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>  
   <script src="https://unpkg.com/@pdf-lib/[email protected]"></script>  
   <script src="filesaver.js"></script>  
   <script src="index.js"></script>  
 </body>  
 </html>

이제 style.css

*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;

    /* font-size: 1.5em; */
}

header{
    padding: 150px;
    background-image: url('bg_header.jfif');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;

    text-align: center;
    position: relative;
}
 .heading_text h1{
    text-align: center;
    font-size: 54px;
    margin-bottom:10px
    /* font-weight: 900; */
} 
main {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  main form button{
      margin-top:25px ;
  }
  button {
    background: #8bc34a;
    color: #fff;
    border: none;
    font-size: 0.8em;
    padding: 15px 15px;
    /* margin: 20px; */
    border-radius: 5px;
    cursor: pointer;
  }
input,
span,
label{
  font-family: 'Ubuntu', sans-serif;
  display: block;
  margin: 10px;
  padding: 5px;
  border: none;
  font-size: 22px;
}
input:focus {
    outline: 0;
  }
input.question{
  font-size: 48px;
  font-weight: 300;
  border-radius: 2px;
  margin: 0;
  border: none;
  width: 80%;
  background: rgba(0, 0, 0, 0);
  transition: padding-top 0.2s ease, margin-top 0.2s ease;
  overflow-x: hidden;
}
input.question + label{
  display: block;
  position: relative;
  white-space: nowrap;
  padding: 0;
  margin: 0;
  width: 10%;
  border-top: 1px solid red;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
  height: 0px;
}
input.question:focus + label{
  width: 80%;
}
input.question:focus,
input.question:valid {
  padding-top: 35px;
}

input.question:focus + label > span,
input.question:valid + label > span {
  top: -100px;
  font-size: 22px;
  color: #333;
}



input.question:valid + label {
  border-color: green;
}

input.question:invalid{
  box-shadow: none;
}

input.question + label > span{
  font-weight: 300;
  margin: 0;
  position: absolute;
  color: #8F8F8F;
  font-size: 48px;
  top: -66px;
  left: 0px;
  z-index: -1;
  -webkit-transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}

input[type="submit"] {
    background: #8bc34a;
    color: #fff;
    border: none;
    font-size: 0.8em;
    padding: 15px 15px;
    /* margin: 20px; */
    border-radius: 5px;
    cursor: pointer;
}

이제 index.js에 코드를 작성합니다. 우선 여기에서 라이브러리를 사용할 것입니다. 이름은 pdf lib– pdf-lib.js.org입니다. 이 라이브러리에서 PDF를 가져오고 JavaScript, 우리는 거기에 텍스트를 넣을 것입니다. 여기에 넣을 텍스트는 여기에서 글꼴을 다운로드하겠습니다. https://fonts.google.com/로 이동하여 Sanchez 글꼴을 검색하여 다운로드하십시오.

먼저 pdf를 가져와야 합니다.

const generatePDF = async (name) => {
    const existingPdfBytes = await fetch("Certificate.pdf").then((res) =>
      res.arrayBuffer()
    );

    // Load a PDFDocument from the existing PDF bytes
    const pdfDoc = await PDFDocument.load(existingPdfBytes);
    pdfDoc.registerFontkit(fontkit);

이제 사용자 지정 글꼴에 대한 코드를 작성했습니다.

const generatePDF = async (name) => {
    const existingPdfBytes = await fetch("Certificate.pdf").then((res) =>
      res.arrayBuffer()
    );

    // Load a PDFDocument from the existing PDF bytes
    const pdfDoc = await PDFDocument.load(existingPdfBytes);
    pdfDoc.registerFontkit(fontkit);


  //get font
  const fontBytes = await fetch("Sanchez-Regular.ttf").then((res) =>
  res.arrayBuffer()
);

첫 번째 줄에 대각선으로 텍스트 문자열을 그립니다.

// Embed our custom font in the document
  const SanChezFont  = await pdfDoc.embedFont(fontBytes);
   // Get the first page of the document
   const pages = pdfDoc.getPages();
   const firstPage = pages[0];

   // Draw a string of text diagonally across the first page
   firstPage.drawText(name, {
     x: 300,
     y: 270,
     size: 58,
     font: SanChezFont ,
     color: rgb(0.2, 0.84, 0.67),
   });

인증서에 이름을 입력한 후 이제 인증서를 다운로드해야 합니다. 인증서를 다운로드하기 위해 filesaver.js 라이브러리를 사용할 것입니다.

Goto 링크https://github.com/eligrey/FileSaver.js 링크를 연 후 dist로 이동합니다. 폴더 및 FileSaver.js 파일 다운로드

이제 인증서 다운로드를 위한 코드 작성

// Serialize the PDFDocument to bytes (a Uint8Array)
  const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true });
  saveAs(pdfDataUri,"newcertificate.pdf")

모든 index.js 코드는 여기

console.log("hello")
const userName = document.getElementById("name");
const submitBtn = document.getElementById("submitBtn");
const { PDFDocument, rgb, degrees } = PDFLib;


submitBtn.addEventListener("click", () => {
    const val =userName.value;
    if (val.trim() !== "" && userName.checkValidity()) {
        // console.log(val);
        generatePDF(val);
      } else {
        userName.reportValidity();
      }
});
const generatePDF = async (name) => {
    const existingPdfBytes = await fetch("Certificate.pdf").then((res) =>
      res.arrayBuffer()
    );

    // Load a PDFDocument from the existing PDF bytes
    const pdfDoc = await PDFDocument.load(existingPdfBytes);
    pdfDoc.registerFontkit(fontkit);


  //get font
  const fontBytes = await fetch("Sanchez-Regular.ttf").then((res) =>
  res.arrayBuffer()
);
  // Embed our custom font in the document
  const SanChezFont  = await pdfDoc.embedFont(fontBytes);
   // Get the first page of the document
   const pages = pdfDoc.getPages();
   const firstPage = pages[0];

   // Draw a string of text diagonally across the first page
   firstPage.drawText(name, {
     x: 300,
     y: 270,
     size: 58,
     font: SanChezFont ,
     color: rgb(0.2, 0.84, 0.67),
   });

  // Serialize the PDFDocument to bytes (a Uint8Array)
  const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true });
  saveAs(pdfDataUri,"newcertificate.pdf")
};

이제 인증서 생성기 웹 사이트를 준비하십시오.

전체 소스 코드를 보려면 Rocoderes을 방문하십시오.

Reference

이 문제에 관하여(JavaScript에서 인증서 생성기 웹 사이트를 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/patelrohan750/how-to-create-a-certificate-generator-website-in-javascript-1eg5

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

다트에서 가장 긴 공통 접두사 솔루션

만들고 배우기 bash 탭 보완, mix 명령을 보완

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다