วิธีนักพัฒนาฝังการดู 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 และต้องการเพียงการลงทะเบียนบริการสองสามรายการสำหรับแคชและบริบทของคำขอ
การลงทะเบียน 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 อยู่แล้ว แต่ทีมส่วนใหญ่มักชอบใช้คอนโทรลเลอร์ห่อบางที่เพิ่มการตรวจสอบสิทธิ์, การบันทึก, และการใส่น้ำหนักโลโก้แบบเลือก
หน้าที่ทั่วไปของคอนโทรลเลอร์
- Endpoint สำหรับเปิดเอกสาร – รับตัวระบุเอกสาร, แก้ไขเส้นทางไฟล์จริง, เรียก Doconut เพื่อเปิดเอกสาร, และคืน token ที่สร้างขึ้น
- Endpoint สำหรับรูปย่อ – คืนค่า PNG ขนาดเล็กสำหรับหน้าที่ระบุ, มีประโยชน์สำหรับแถบนำทาง คอนโทรลเลอร์สามารถรีไดเรกต์ไปยังตัวจัดการแผ่นภาพของ Doconut พร้อม query string ที่เหมาะสม
ข้อควรพิจารณาด้านความปลอดภัย
เก็บ token ในเซสชันของผู้ใช้หรือฝังไว้ใน claim ของ JWT ที่มีอายุสั้น เนื่องจาก token เพียงอย่างเดียวไม่สามารถดึงไฟล์ต้นฉบับได้โดยไม่มีแคชด้านเซิร์ฟเวอร์ เอกสารจึงยังคงได้รับการปกป้อง API REST เดียวกันนี้สนับสนุนรูปแบบการผสานรวมของ React, Angular, และ Vue ที่อธิบายในคู่มือนี้
4. การฝังตัวดูในแอปพลิเคชัน React
นักพัฒนา React สามารถสร้างคอมโพเนนต์แบบฟังก์ชันที่:
- เรียก endpoint
/openเพื่อดึง token สำหรับเอกสารที่ร้องขอ - สร้างอาร์เรย์ของ URL ภาพที่ชี้ไปยังตัวจัดการแผ่นภาพของ Doconut สำหรับแต่ละหน้า (คุณสามารถเริ่มจากสิบหน้แรกและโหลดเพิ่มตามความต้องการ)
- เรนเดอร์หน้าต่างเป็นองค์ประกอบ
<img>โดยจัดการเหตุการณ์สครอลหรือซูมโดยอัปเดตพารามิเตอร์ของ URL
การโต้ตอบกับจุดรวม JavaScript ของ Doconut
Doconut แทรกตัวช่วย JavaScript ที่เบาเข้าไปในหน้า ผ่านตัวช่วยนี้คุณสามารถส่งคำสั่งเช่น:
- ไฮไลท์คำที่ค้นหา – ขอการค้นหาข้อความเต็มรูปแบบทั่วเอกสารและทำไฮไลท์คำที่ตรงกัน
- เพิ่มโน้ต – วางโน้ตติด, ตราประทับ, หรือการวาดบนหน้าที่ระบุโดยส่ง payload แบบ JSON ที่รวมเลขหน้า, ประเภทโน้ต, พิกัด, และข้อมูลเพิ่มเติมใดๆ
เนื่องจากงานเรนเดอร์หนักอยู่บนเซิร์ฟเวอร์ แพ็คเกจ React จึงเล็กและ UI ยังคงตอบสนองได้ดี
5. การฝังตัวดูใน Angular และ Vue – แพทเทิร์นคอมโพเนนต์ที่ใช้ซ้ำได้
Angular
สร้างบริการ Angular ที่สะท้อน API .NET เล็กๆ (เปิดเอกสาร, ดึงรูปย่อ) บริการใช้ HttpClient เพื่อเรียก endpoint ของแบ็ก‑เอนด์และคืน token เป็น observable
จากนั้นสร้างคอมโพเนนต์ที่เมื่อเริ่มต้นจะร้องขอ token, สร้าง URL ภาพของหน้า, และแสดงด้วย *ngFor คอมโพเนนต์สามารถเปิดเผยปุ่มที่เรียกตัวช่วย JavaScript ของ Doconut เพื่อทำโน้ตและค้นหา คล้ายกับตัวอย่าง React
Vue
ใน Vue ให้กำหนดคอมโพเนนต์ที่ใช้ hook ชีวิต created เพื่อร้องขอ token ผ่าน fetch หรือ axios เก็บ token และ URL ของหน้าที่สร้างไว้ในอ็อบเจ็กต์ data ของคอมโพเนนต์ เรนเดอร์หน้าด้วยลูป v-for ความเป็น reactive ของ Vue ทำให้การอัปเดตมุมมองเมื่อผู้ใช้สครอล, ซูม, หรือเรียกการทำโน้ตผ่านการรวม JavaScript ของ Doconut เป็นเรื่องง่าย
ทั้งสามเฟรมเวิร์กใช้สัญญาแบ็ก‑เอนด์เดียวกัน ดังนั้นคุณสามารถใช้คอนโทรลเลอร์ ASP.NET Core เดิมซ้ำได้โดยไม่ต้องแก้ไข
สรุป
การฝังตัวดูเอกสารแบบเต็มคุณลักษณะไม่ต้องการการผสมผสานของปลั๊กอินของบุคคลที่สามหรือบริการคลาวด์ที่มีค่าใช้จ่ายสูงอีกต่อไป ด้วย Doconut นักพัฒนาจะได้ไลบรารีเซิร์ฟเวอร์‑ไซด์เดียวที่เรนเดอร์ไฟล์ PDF, Office และ CAD, ให้การทำโน้ต, การค้นหาที่ขับเคลื่อนด้วย OCR, และการพิมพ์ที่ควบคุมได้ — ทั้งหมดนี้ในขณะที่เอกสารยังคงปลอดภัยและสามารถขยายได้
พร้อมที่จะยกระดับประสบการณ์เอกสารในแอปพลิเคชัน .NET, React, Angular หรือ Vue ของคุณหรือยัง? ลอง Doconut วันนี้ และดูว่าคุณสามารถส่งมอบตัวดูระดับองค์กรที่ขัดเกลาแล้วซึ่งผู้ใช้ของคุณจะรักได้เร็วแค่ไหน