使用 FileSaver.js 和 PDF-Lib.js 的认证生成器

如何解决使用 FileSaver.js 和 PDF-Lib.js 的认证生成器

所以我正在尝试构建一个您可以填写的表格，并将生成一个证书，然后您可以将其打印出来。

我只能让它与 1 个输入字段一起工作。当我尝试添加另一个字段时，它不再下载输入了详细信息的 pdf。

<!-- form -->
                        <form class="myForm">
                            <div class="form-group row">
                                <label for="name" class="col-sm-2 col-form-label">Full Name:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="name" id="name"
                                        placeholder="Full Name" required>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="date" class="col-sm-2 col-form-label">Completion:</label>
                                <div class="col-sm-10">
                                    <input type="date" class="form-control" name="date" id="date" required>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="userid" class="col-sm-2 col-form-label">Student ID:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="userid" id="userid" required>
                                </div>
                            </div>

                            <button type="submit" id="submitBtn"
                                class="btn btn-lg btn-block btn-primary">Submit</button>
                        </form>
                        <!-- end form -->

const userDate = document.getElementById("date");
const userID = document.getElementById("userid");
const submitBtn = document.getElementById("submitBtn");
const myForm = document.getElementById("myForm");

const { PDFDocument,rgb,degrees } = PDFLib;

const capitalize = (str,lower = false) =>
  (lower ? str.toLowerCase() : str).replace(/(?:^|\s|["'([{])+\S/g,(match) =>
    match.toupperCase()
  );

submitBtn.addEventListener("click",() => {
  const val = capitalize(userName.value);

  //check if the text is empty or not
  if (val.trim() !== "" && userName.checkValidity()) {
    // console.log(val);
    generatePDF(val);
  } else {
    userName.reportValidity();
  }
});

submitBtn.addEventListener("click",() => {
  const val = capitalize(userDate.value);

  //check if the text is empty or not
  if (val.trim() !== "" && userDate.checkValidity()) {
    // console.log(val);
    generatePDF(val);
  } else {
    userDate.reportValidity();
  }
});

submitBtn.addEventListener("click",() => {
  const val = capitalize(userID.value);

  //check if the text is empty or not
  if (val.trim() !== "" && userID.checkValidity()) {
    // console.log(val);
    generatePDF(val);
  } else {
    userID.reportValidity();
  }
});

const generatePDF = async (name,date,userid) => {
  const existingPdfBytes = await fetch("./ecdl_cert.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];

  // Draws the string name onto the certificate
  firstPage.drawText(name,{
    x: 480,y: 1180,size: 158,font: SanChezFont,color: rgb(0.0,0.0,0.0),});

  // Draws the string name onto the certificate
  firstPage.drawText(date,});

  // Draws the string name onto the certificate
  firstPage.drawText(userid,});

  // Save the PDFDocument and write it to a file
  const pdfBytes = await pdfDoc.save();

  // Done! ?
  console.log("Done creating");

  var file = new File([pdfBytes],"certification_of_completion_ecdl.pdf",{
    type: "application/pdf;charset=utf-8",});
  saveAs(file);
};

如果我删除：

// Draws the string name onto the certificate
  firstPage.drawText(date,});

并只填写全名字段，然后点击提交，它将下载添加了全名的 PDF...

这里还有一个指向我上传的 github 项目的链接：https://github.com/JackHeeney/cert_cernerator_master