Mã HTML để tạo chứng chỉ

Đây sẽ là tính năng của bảng điều khiển tổ chức/cá nhân. Họ có thể cấp một chứng chỉ tại một thời điểm. Khi nhấp vào nút để tạo một chứng chỉ, họ sẽ được nhắc chọn từ các mẫu có sẵn cho chứng chỉ. Sử dụng HTML và CSS để tạo các thiết kế chứng chỉ hấp dẫn, bao gồm khoảng trống cho các trường bắt buộc [Tên, ngày, mô tả]

Liên kết hữu ích

Truy vấn

Nộp hồ sơ

• PR cho việc tạo chứng chỉ duy nhất
• Đảm bảo tuân theo Nguyên tắc đóng góp

• html
• góc cạnh
• trình tạo chứng chỉ
• css

kiến15, Maier Ilya, Saba Khukhunashvili, đông đúc. đam mê, HarshHC, Sai Vital B

Bây giờ chúng tôi viết mã trong chỉ mục. js, Trước hết chúng ta sẽ sử dụng một thư viện ở đây, tên của nó là pdf lib– pdf-lib. js. tổ chức. Từ thư viện này, chúng tôi sẽ tìm nạp tệp PDF và với sự trợ giúp của JavaScript, chúng tôi sẽ đặt văn bản ở đó. Văn bản mà chúng tôi sẽ đặt ở đây Chúng tôi sẽ tải xuống một phông chữ ở đây Truy cập https. //phông chữ. Google. com/ Và tìm kiếm phông chữ Sanchez và tải xuống

Đầu tiên chúng ta cần tìm nạp 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);

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ chúng tôi đã viết mã cho phông chữ tùy chỉnh

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()
);

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Vẽ một chuỗi văn bản theo đường chéo trên đầu tiên

// 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),
   });

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Khi sau khi nhập tên vào chứng chỉ, bây giờ chúng tôi phải tải xuống chứng chỉ. Chúng tôi sẽ sử dụng trình bảo vệ tệp. thư viện js để tải xuống chứng chỉ

Truy cập liên kết https. //github. com/eligrey/FileSaver. js Sau khi mở liên kết, đi đến dist. thư mục và tải xuống FileSaver. tập tin js

Chứng chỉ là tài sản quý giá để tạo niềm tin và thể hiện kiến ​​thức với khách hàng, nhà tuyển dụng hiện tại hoặc tương lai của bạn trên thị trường cạnh tranh ngày càng gia tăng

W3Schools được tin tưởng bởi các công ty hàng đầu

W3Schools có hơn hai thập kỷ kinh nghiệm giảng dạy mã hóa trực tuyến

Chứng chỉ của chúng tôi được công nhận và đánh giá cao bởi các công ty muốn tuyển dụng các nhà phát triển lành nghề

Tiết kiệm thời gian và tiền bạc

Cho cả thế giới thấy kỹ năng mã hóa của bạn bằng cách nhận chứng chỉ

Giá chỉ bằng một phần nhỏ so với giá của giáo dục truyền thống

Tài liệu và xác nhận năng lực của bạn bằng cách được chứng nhận

Tổng quan về kỳ thi

Phí. 95USD

Số lượng các câu hỏi. 70

Yêu cầu để vượt qua. 75% câu trả lời đúng

Thời gian giới hạn. 70 phút

Số lần cố gắng để vượt qua. Hai

hạn chót thi. Không có

Hết hạn chứng nhận. Không có

Sự sắp xếp. Trực tuyến, nhiều lựa chọn

Đăng ký ngay »

Thăng tiến nhanh hơn trong sự nghiệp của bạn

Nhận được chứng chỉ chứng tỏ cam kết nâng cao kỹ năng của bạn, mang lại cho bạn sự tín nhiệm cần thiết cho nhiều trách nhiệm hơn, các dự án lớn hơn và mức lương cao hơn

Tạo chứng chỉ bằng HTML, CSS VÀ JSPDF, cho các sự kiện. Logic tương tự có thể được sử dụng để đặt vé

Đặc trưng

• Trang nhập thông tin chi tiết
• Trang hiển thị chứng chỉ (html và css) với tùy chọn tải xuống pdf
• Ghi chú hiển thị Pdf. javascript được viết bên trong html

Giao diện người dùng

• Trang chi tiết

• trang giấy chứng nhận

• Pdf

Làm cách nào để tạo chứng chỉ trong HTML?

Làm cách nào tôi có thể tạo chứng chỉ của riêng mình?

Có chứng nhận HTML không?

Bạn có thể nhận chứng chỉ W3schools miễn phí không?