วิธีนักพัฒนาฝังการดู PDF, Office และ CAD ลงในแอปเว็บ .NET, React, Angular หรือ Vue เพื่อเพิ่มความเป็นมิตรต่อผู้ใช้และประสิทธิภาพ: ขั้นตอนโดยละเอียด
ถ้าคุณกำลังพยายามเปลี่ยนแอป .NET ที่เต็มไปด้วยเอกสารให้กลายเป็นสิ่งที่ผู้ใช้จริง ๆ รักใช้งาน คุณต้องการตัวดูที่รองรับ PDF, ไฟล์ Word, แผ่น Excel, สไลด์ PowerPoint และ แบบร่าง CAD — ทั้งหมดโดยไม่บังคับให้ผู้ใช้ดาวน์โหลดแอปเดสก์ท็อปหรือพึ่งพาบริการคลาวด์ภายนอก นั่นคือจุดที่ Doconut เข้ามาช่วย มันเป็นตัวดูเอกสารแบบเซิร์ฟเวอร์‑ไซด์ที่สตรีมหน้าที่เรนเดอร์ไปยังเบราว์เซอร์ที่รองรับและให้ฟีเจอร์การทำโน้ต, การค้นหาเต็มข้อความ (รวม OCR) และการพิมพ์ที่ควบคุมได้โดยอัตโนมัติ ในคู่มือนี้เราจะเดินผ่านขั้นตอนทั้งหมด: ตั้งแต่การกำหนดค่าเอนจินการแปลงของ Doconut ในแบ็ก‑เอนด์ ASP.NET Core ไปจนถึงการฝังตัวดูในฟรอนต์‑เอนด์ React, Angular และ Vue พร้อมหรือยังที่จะส่งมอบประสบการณ์เอกสารที่ราบรื่นและมีประสิทธิภาพ? ไปดูกันเลย
1. ทำไมตัวดูเฉพาะสำหรับเว็บแอประดับองค์กรถึงสำคัญ
ต้นทุนแฝงของ “ดาวน์โหลด‑แล้ว‑เปิด”
พอร์ทัลรุ่นเก่าส่วนใหญ่เพียงแค่วางลิงก์ไปยังไฟล์บนแชร์ การคลิกจะทำให้ไฟล์ดาวน์โหลดหรือเปิดด้วยโปรแกรมที่ติดตั้งไว้ในเครื่อง ในทางปฏิบัตินี้สร้างปัญหาหลายอย่าง:
- สูญเสียบริบท – ผู้ใช้ออกจากพอร์ทัล, เปิดเอกสารในหน้าต่างแยก, แล้วต้องจำว่าตัวเองอยู่ที่ไหน
- การเรนเดอร์ไม่สอดคล้อง – ตัวดู Word, Excel และ CAD ที่ติดตั้งในเครื่องอาจตีความไฟล์ต่างกัน ทำให้เกิดข้อบกพร่องของเลย์เอาต์ที่อาจส่งผลต่อการตัดสินใจทางกฎหมายหรือวิศวกรรม
- ความเสี่ยงด้านความปลอดภัย – ไฟล์หลุดออกนอกขอบเขตขององค์กร ทำให้การตรวจสอบและนโยบายป้องกันการสูญเสียข้อมูลเป็นเรื่องยาก
- ประสิทธิภาพการทำงานต่ำ – ผู้ตรวจสอบต้องสลับใช้เครื่องมือหลายตัวเพื่อทำโน้ต, ค้นหา, หรือพิมพ์ ทำให้กระบวนการอนุมัติช้าลง
สิ่งที่นักพัฒนาต้องการจริง ๆ
โซลูชันสมัยใหม่ควร:
- เรนเดอร์รูปแบบที่รองรับทั้งหมดในเบราว์เซอร์ (PDF, DOCX, XLSX, PPTX, DWG, DXF, …)
- เปิด API ที่สะอาด สำหรับแบ็ก‑เอนด์ .NET และฟรอนต์‑เอนด์ React, Angular หรือ Vue
- รวมฟีเจอร์การทำโน้ต, การค้นหาเต็มข้อความ (รวม OCR) และการพิมพ์ที่ควบคุมได้ โดยไม่ต้องดึงไลบรารีเพิ่มเติม
- สเกลอย่างปลอดภัย — ประมวลผลเอกสารบนเซิร์ฟเวอร์, สตรีมเป็นภาพแท일, และไม่เปิดไฟล์ดิบให้กับไคลเอนท์
Doconut ตอบโจทย์ทั้งหมดเหล่านี้ ไลบรารีตัวดูทำงานบนเซิร์ฟเวอร์ .NET, แปลงเอกสารต้นฉบับเป็นหน้าราสเตอร์ตามความต้องการ, และให้บริการหน้าดังกล่าวผ่าน endpoint HTTP น้ำหนักเบาที่ฟรอนต์‑เอนด์ที่รองรับสามารถเรียกใช้ได้
2. การกำหนดค่า Middleware ของ Doconut สำหรับการแปลง PDF ในแอป ASP.NET Core
ขั้นตอนแรกคือการลงทะเบียน Middleware ของ Doconut เพื่อให้แบ็ก‑เอนด์สามารถให้บริการไทล์เอกสาร, รูปย่อ, และข้อมูลโน้ตได้ สิ่งนี้ทำใน pipeline ของ ASP.NET Core และต้องการเพียงการลงทะเบียนบริการสองอย่างสำหรับแคชและบริบท HTTP
การลงทะเบียน Middleware
เพิ่มบริการที่จำเป็น (distributed memory cache และ HTTP context accessor) ใน ConfigureServices จากนั้นใน Configure ทำการแมป endpoint ของ Doconut (โดยทั่วไปคือ DocImage.axd) ไปยัง Middleware ของ Doconut ตัวเลือกของ Middleware ให้คุณบังคับใช้การเรนเดอร์ที่ปลอดภัยและซ่อนการวินิจฉัยภายในจากผู้ใช้ปลายทาง
การเริ่มต้นไลเซนส์
Doconut ต้องการไฟล์ไลเซนส์เมื่อเริ่มทำงาน วิธีทั่วไปคือฝังไลเซนส์เป็น resource แล้วโหลดเป็น stream เมื่อแอปเริ่มทำงาน เมื่อ stream ของไลเซนส์ถูกส่งให้กับอินสแตนซ์ตัวดูของ Doconut SDK จะทำงานเต็มที่และพร้อมประมวลผลเอกสาร
การเปิดเอกสารและรับ token
เมื่อผู้ใช้ร้องขอเอกสาร, แบ็ก‑เอนด์จะเปิดไฟล์ผ่าน API ของ Doconut พร้อมส่งพารามิเตอร์เสริมเช่น การป้องกันด้วยรหัสผ่าน, ความละเอียดของภาพ, และ timeout Doconut จะคืน token สั้น ๆ (โดยปกติเป็น GUID) ที่เป็นตัวแทนเอกสารที่เปิดอยู่อย่างเฉพาะเจาะจง ฟรอนต์‑เอนด์จะใส่ token นี้ในทุกคำขอไทล์ เช่น /DocImage.axd?token=abcd1234&page=1&zoom=100
3. การเปิดเผย API สตรีมเอกสารแบบปลอดภัยสำหรับเฟรมเวิร์ก JavaScript
แม้ Doconut จะมีตัวจัดการไทล์ระดับต่ำผ่าน Middleware อยู่แล้ว แต่ทีมส่วนใหญ่มักชอบสร้าง controller แบบบาง ๆ ที่เพิ่มการตรวจสอบสิทธิ์, การบันทึก, และการใส่ลายน้ำแบบเลือกได้
ความรับผิดชอบทั่วไปของ controller
- Endpoint เปิดเอกสาร – รับตัวระบุเอกสาร, แก้ไขเส้นทางไฟล์จริง, เรียก Doconut เพื่อเปิดเอกสาร, แล้วคืน token ที่สร้างขึ้น
- Endpoint รูปย่อ – คืน PNG ขนาดเล็กสำหรับหน้าที่ระบุ, ใช้สำหรับแถบนำทาง. controller สามารถทำการรีไดเรกต์ไปยังตัวจัดการไทล์ของ Doconut พร้อม query string ที่เหมาะสมได้เลย
ข้อพิจารณาด้านความปลอดภัย
เก็บ token ในเซสชันของผู้ใช้หรือฝังไว้ใน claim ของ JWT ที่มีอายุสั้น เนื่องจาก token เพียงอย่างเดียวไม่สามารถดึงไฟล์ต้นฉบับได้หากไม่มีแคชฝั่งเซิร์ฟเวอร์ เอกสารจึงยังคงได้รับการปกป้อง API เดียวกันนี้สนับสนุนรูปแบบการผสานรวมของ React, Angular, และ Vue ที่อธิบายไว้ในคู่มือนี้
4. การฝังตัวดูในแอป React
นักพัฒนา React สามารถสร้าง functional component ที่:
- เรียก endpoint
/openเพื่อรับ token สำหรับเอกสารที่ต้องการ - สร้างอาร์เรย์ของ URL รูปภาพที่ชี้ไปยังตัวจัดการไทล์ของ Doconut สำหรับแต่ละหน้า (คุณอาจเริ่มจากสิบหน้แรกและโหลดเพิ่มตามความต้องการ)
- แสดงหน้าด้วย
<img>elements, จัดการเหตุการณ์ scroll หรือ zoom โดยอัปเดตพารามิเตอร์ของ URL
การโต้ตอบกับจุดเชื่อมต่อ JavaScript ของ Doconut
Doconut จะฉีด JavaScript helper ขนาดเล็กลงในหน้า ผ่าน helper นี้คุณสามารถส่งคำสั่งเช่น:
- ไฮไลท์คำค้น – ทำการค้นหาเต็มข้อความในเอกสารและไฮไลท์คำที่ตรงกัน
- เพิ่มโน้ต – วาง sticky note, stamp, หรือการวาดบนหน้าที่ระบุโดยส่ง JSON payload ที่รวมเลขหน้า, ประเภทโน้ต, พิกัด, และข้อมูลเพิ่มเติมอื่น ๆ
เนื่องจากการเรนเดอร์หนักอยู่บนเซิร์ฟเวอร์ แพคเกจ React จึงเล็กและ UI ยังคงตอบสนองได้อย่างรวดเร็ว
5. การฝังตัวดูใน Angular และ Vue – แพทเทิร์นคอมโพเนนต์ที่ใช้ซ้ำได้
Angular
สร้าง Angular service ที่สะท้อน API .NET เล็ก ๆ (เปิดเอกสาร, ดึงรูปย่อ) Service นี้ใช้ HttpClient เพื่อเรียก endpoint ของแบ็ก‑เอนด์และคืน token เป็น observable
จากนั้นสร้าง component ที่ในขั้นตอนการเริ่มต้น (ngOnInit) จะร้องขอ token, สร้าง URL รูปหน้า, และแสดงด้วย *ngFor Component สามารถเปิดปุ่มที่เรียก JavaScript helper ของ Doconut เพื่อทำโน้ตและค้นหาได้ เหมือนตัวอย่าง React
Vue
ใน Vue ให้กำหนด component ที่ใช้ lifecycle hook created เพื่อร้องขอ token ผ่าน fetch หรือ axios เก็บ token และ URL หน้าใน data ของ component แล้วแสดงหน้าด้วยลูป v-for ความเป็น reactive ของ Vue ทำให้การอัปเดตมุมมองเมื่อผู้ใช้ scroll, zoom, หรือเรียกการทำโน้ตผ่านการเชื่อมต่อ JavaScript ของ Doconut เป็นเรื่องง่าย
ทั้งสามเฟรมเวิร์กใช้สัญญาแบ็ก‑เอนด์เดียวกัน ดังนั้นคุณสามารถใช้ ASP.NET Core controller เดียวกันโดยไม่ต้องแก้ไข
สรุป
การฝังตัวดูเอกสารแบบครบวงจรไม่จำเป็นต้องพึ่งพาปลั๊กอินของบุคคลที่สามหลายตัวหรือบริการคลาวด์ที่มีค่าใช้จ่ายสูง ด้วย Doconut นักพัฒนาจะได้ไลบรารีเซิร์ฟเวอร์‑ไซด์เดียวที่เรนเดอร์ไฟล์ PDF, Office และ CAD, ให้ฟีเจอร์การทำโน้ต, การค้นหาแบบ OCR, และการพิมพ์ที่ควบคุมได้ — ทั้งหมดนี้ในขณะที่รักษาความปลอดภัยและความสามารถในการสเกลของเอกสาร
พร้อมหรือยังที่จะยกระดับประสบการณ์เอกสารในแอป .NET, React, Angular หรือ Vue ของคุณ? ลอง Doconut วันนี้ แล้วคุณจะเห็นว่าการส่งมอบตัวดูระดับองค์กรที่ขัดเกลานั้นเร็วแค่ไหน.