Merge pull request #1959 from amin-dev-tech/fix-pdf

TusharKesarwani · web-flow · commit 9aa2bfc3740c · 2024-01-04T16:56:42.000+05:30
fix the corrupted pdf export on Save Text as File project
diff --git a/Projects/Save Text as File/index.html b/Projects/Save Text as File/index.html
@@ -1,12 +1,15 @@
 <!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>Save Text As File</title>
     <link rel="stylesheet" href="style.css">
+    <script src="https://unpkg.com/pdf-lib@1.4.0/dist/pdf-lib.min.js"></script>
 </head>
+
 <body>
     <div class="wrapper">
         <textarea required placeholder="Enter your text here"></textarea>
@@ -35,4 +38,5 @@
     </div>
     <script src="script.js"></script>
 </body>
+
 </html>
diff --git a/Projects/Save Text as File/script.js b/Projects/Save Text as File/script.js
@@ -1,19 +1,42 @@
 const textarea = document.querySelector("textarea"),
-fileNameInput = document.querySelector(".file-name input"),
-selectMenu = document.querySelector(".save-as select"),
-saveBtn = document.querySelector(".save-btn");
+  fileNameInput = document.querySelector(".file-name input"),
+  selectMenu = document.querySelector(".save-as select"),
+  saveBtn = document.querySelector(".save-btn");
 
 selectMenu.addEventListener("change", () => {
-    let selectOption = selectMenu.options[selectMenu.selectedIndex].text;
-    saveBtn.innerText = `Save as ${selectOption.split(" ")[0]} File`;
-})
+  let selectOption = selectMenu.options[selectMenu.selectedIndex].text;
+  saveBtn.innerText = `Save as ${selectOption.split(" ")[0]} File`;
+});
 
-saveBtn.addEventListener("click", () => {
-    const blob = new Blob([textarea.value], {type: selectMenu.value});
+saveBtn.addEventListener("click", async () => {
+  const content = textarea.value;
+  const contentType = selectMenu.value;
+  const fileName = fileNameInput.value;
+  const link = document.createElement("a");
+  link.download = fileName;
+
+  // if the format is .pdf use the pdf-lib package otherwise use the default code
+  if (selectMenu.value === "application/pdf") {
+    const pdfDoc = await PDFLib.PDFDocument.create();
+    const page = pdfDoc.addPage();
+    const { width, height } = page.getSize();
+
+    page.drawText(content, {
+      x: width - 540,
+      y: height - 55,
+      size: 12,
+    });
+    // console.log(width);
+    // console.log(height);
+    const pdfBytes = await pdfDoc.save();
+    const blob = new Blob([pdfBytes], { type: contentType });
+    const fileUrl = URL.createObjectURL(blob);
+    link.href = fileUrl;
+    link.click();
+  } else {
+    const blob = new Blob([content], { type: contentType });
     const fileUrl = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.download = fileNameInput.value;
     link.href = fileUrl;
     link.click();
-    // console.log(blob)
-})
+  }
+});
