เพิ่มประสิทธิภาพ PDF ใน JavaScript

ไฟล์ PDF เป็นรูปแบบที่แพร่หลายสำหรับการแชร์เอกสาร แต่บางครั้งอาจมีขนาดใหญ่ ส่งผลให้โหลดช้าลงและความต้องการพื้นที่จัดเก็บเพิ่มขึ้น การเพิ่มประสิทธิภาพไฟล์ PDF ถือเป็นสิ่งสำคัญเพื่อให้แน่ใจว่าผู้ใช้จะได้รับประสบการณ์ที่ราบรื่น โดยเฉพาะอย่างยิ่งในเว็บแอปพลิเคชัน ดังนั้น ในบล็อกโพสต์นี้ เราจะมาดูวิธีเพิ่มประสิทธิภาพไฟล์ PDF โดยใช้ JavaScript

ไลบรารี JavaScript เพื่อเพิ่มประสิทธิภาพ PDF

สำหรับการเพิ่มประสิทธิภาพ PDF ในแอปพลิเคชัน JavaScript เราจะใช้ Aspose.PDF for JavaScript เป็นไลบรารีอันทรงพลังที่ช่วยให้นักพัฒนาสามารถประมวลผล จัดการ และเพิ่มประสิทธิภาพไฟล์ PDF โดยใช้ JavaScript เรามาเริ่มกันด้วยการติดตั้งไลบรารี่ก่อน

ดาวน์โหลด ไลบรารีและปฏิบัติตามคำแนะนำในการติดตั้งที่ให้ไว้ที่นี่: วิธีติดตั้ง Aspose.PDF for JavaScript

ปรับ PDF ให้เหมาะสมใน JavaScript

ก่อนที่จะเจาะลึกกระบวนการเพิ่มประสิทธิภาพ PDF มาทำความเข้าใจว่าทำไมการปรับไฟล์ PDF ให้เหมาะสมจึงมีความสำคัญ:

  • เวลาโหลดเร็วขึ้น: PDF ที่ได้รับการปรับปรุงให้โหลดได้เร็วยิ่งขึ้น ปรับปรุงประสบการณ์ผู้ใช้โดยลดเวลารอคอย
  • ประสิทธิภาพแบนด์วิธ: ขนาดไฟล์ที่เล็กลงส่งผลให้การใช้แบนด์วิธลดลง ทำให้แชร์และดาวน์โหลดไฟล์ PDF ได้ง่ายขึ้น
  • พื้นที่จัดเก็บข้อมูล: PDF ที่ปรับให้เหมาะสมจะใช้พื้นที่จัดเก็บน้อยลง ซึ่งมีความสำคัญอย่างยิ่งเมื่อต้องจัดการกับเอกสารจำนวนมาก

ตอนนี้มาเขียนสคริปต์เพื่อเพิ่มประสิทธิภาพไฟล์ PDF โดยทำตามขั้นตอนด้านล่าง

  • ขั้นแรก เลือกไฟล์ PDF ที่คุณต้องการปรับให้เหมาะสม
  • จากนั้นสร้างวัตถุ FileReader เพื่ออ่านไฟล์
  • หลังจากนั้น ให้เรียกใช้ฟังก์ชัน AsposePdfOptimize เพื่อปรับ PDF ให้เหมาะสม พารามิเตอร์ของฟังก์ชันนี้รวมถึงชื่อไฟล์ PDF ที่เป็นผลลัพธ์
  • ฟังก์ชัน AsposePdfOptimize ส่งคืนออบเจ็กต์ JSON และใช้ json.errorCode คุณสามารถตรวจสอบได้ว่าไฟล์ PDF ได้รับการปรับให้เหมาะสมหรือไม่ หากรหัสข้อผิดพลาดเป็น 0 แสดงว่า PDF ได้รับการปรับให้เหมาะสมโดยไม่มีปัญหาใดๆ มิฉะนั้น อาจเกิดข้อผิดพลาดที่คุณสามารถอ่านได้จาก json.errorText
  • สุดท้าย ให้เรียกใช้ฟังก์ชัน DownloadFile เพื่อสร้างลิงก์ไปยังไฟล์ PDF ที่ปรับให้เหมาะสม

ข้อมูลโค้ดต่อไปนี้แสดงวิธีเพิ่มประสิทธิภาพไฟล์ PDF ใน JavaScript

var ffileOptimize = function (e) {
  const file_reader = new FileReader();
  file_reader.onload = (event) => {
    
    /*optimize a PDF-file and save the "ResultOptimize.pdf"*/
    const json = AsposePdfOptimize(event.target.result, e.target.files[0].name, "ResultOptimize.pdf");
    if (json.errorCode == 0) document.getElementById('output').textContent = json.fileNameResult;
    else document.getElementById('output').textContent = json.errorText;
    
    /*make a link to download the result file*/
    DownloadFile(json.fileNameResult, "application/pdf");
  };
  file_reader.readAsArrayBuffer(e.target.files[0]);
};

การใช้ Web Worker ในการเพิ่มประสิทธิภาพ PDF

ในส่วนก่อนหน้านี้ เราเพียงแค่โหลด PDF ปรับให้เหมาะสม และดาวน์โหลดไฟล์ PDF ที่เป็นผลลัพธ์ ตอนนี้ ลองใช้ Web Worker เพื่อทำให้กระบวนการเพิ่มประสิทธิภาพราบรื่นขึ้น และป้องกันไม่ให้เธรด UI ถูกบล็อก สคริปต์ต่อไปนี้แสดงวิธีการเขียน Web Worker ที่ใช้ฟังก์ชันการเพิ่มประสิทธิภาพ PDF ซึ่งเราได้เขียนไว้ในส่วนที่แล้ว

/*Create Web Worker*/
const AsposePDFWebWorker = new Worker("AsposePDFforJS.js");
AsposePDFWebWorker.onerror = evt => console.log(`Error from Web Worker: ${evt.message}`);
AsposePDFWebWorker.onmessage = evt => document.getElementById('output').textContent = 
  (evt.data == 'ready') ? 'loaded!' :
    (evt.data.json.errorCode == 0) ?
      `Result:\n${DownloadFile(evt.data.json.fileNameResult, "application/pdf", evt.data.params[0])}` :
      `Error: ${evt.data.json.errorText}`;

/*Event handler*/
const ffileOptimize = e => {
  const file_reader = new FileReader();
  file_reader.onload = event => {
    
    /*Optimize a PDF-file and save the "ResultOptimize.pdf" - Ask Web Worker*/
    AsposePDFWebWorker.postMessage(
      { "operation": 'AsposePdfOptimize', "params": [event.target.result, e.target.files[0].name, "ResultOptimize.pdf"] },
      [event.target.result]
    );
  };
  file_reader.readAsArrayBuffer(e.target.files[0]);
};

/*Make a link to download the result file*/
const DownloadFile = (filename, mime, content) => {
    mime = mime || "application/octet-stream";
    var link = document.createElement("a"); 
    link.href = URL.createObjectURL(new Blob([content], {type: mime}));
    link.download = filename;
    link.innerHTML = "Click here to download the file " + filename;
    document.body.appendChild(link); 
    document.body.appendChild(document.createElement("br"));
    return filename;
  }

เพิ่มประสิทธิภาพทรัพยากร PDF ใน JavaScript

อีกวิธีหนึ่งในการปรับไฟล์ PDF ให้เหมาะสมคือการลบทรัพยากรที่ไม่ได้ใช้และรวมทรัพยากรทั่วไปไว้ในวัตถุเดียว เพื่อเพิ่มประสิทธิภาพทรัพยากร PDF Aspose.PDF มีฟังก์ชัน AsposePdfOptimizeResource ข้อมูลโค้ดต่อไปนี้สาธิตวิธีการเพิ่มประสิทธิภาพทรัพยากร PDF ใน JavaScript

var ffilePdfOptimizeResource = function (e) {
  const file_reader = new FileReader();
  file_reader.onload = (event) => {
    
    /*Optimize resources a PDF-file and save the "ResultPdfOptimizeResource.pdf"*/
    const json = AsposePdfOptimizeResource(event.target.result, e.target.files[0].name, "ResultPdfOptimizeResource.pdf");
    if (json.errorCode == 0) document.getElementById('output').textContent = json.fileNameResult;
    else document.getElementById('output').textContent = json.errorText;
    
    /*Make a link to download the result file*/
    DownloadFile(json.fileNameResult, "application/pdf");
  };
  file_reader.readAsArrayBuffer(e.target.files[0]);
};

รับไลบรารี PDF JavaScript ฟรี

รับใบอนุญาตชั่วคราวฟรี และใช้ไลบรารีการเพิ่มประสิทธิภาพ JavaScript PDF ของเราโดยไม่มีข้อจำกัดใดๆ

บทสรุป

การเพิ่มประสิทธิภาพไฟล์ PDF เป็นสิ่งสำคัญเพื่อให้มั่นใจถึงประสิทธิภาพสูงสุดและประสบการณ์ผู้ใช้ในเว็บแอปพลิเคชัน Aspose.PDF for JavaScript มอบชุดเครื่องมืออันทรงพลังเพื่อเพิ่มประสิทธิภาพเอกสาร PDF อย่างมีประสิทธิภาพ ในบล็อกโพสต์นี้ เราได้จัดเตรียมวิธีการเพิ่มประสิทธิภาพไฟล์ PDF โดยใช้ JavaScript ที่ใช้งานง่ายให้กับคุณ ด้วยการใช้วิธีการเพิ่มประสิทธิภาพ PDF นี้ คุณสามารถปรับปรุงการจัดการเอกสารโดยรวมในเว็บแอปพลิเคชันของคุณได้อย่างมาก

สำรวจเพิ่มเติมเกี่ยวกับไลบรารี JavaScript PDF ของเราใน เอกสารประกอบ ในกรณีที่คุณมีคำถามใด ๆ โปรดแบ่งปันกับเราผ่านทาง ฟอรั่ม ของเรา

ดูสิ่งนี้ด้วย