หลาย ๆ นักพัฒนามักเริ่มต้นด้วยการมองหาห้องสมุดคอมโพเนนท์ UI เมื่อจำเป็นต้องแสดงเอกสารในเว็บแอปพลิเคชัน Doconut Viewer เป็น SDK ของ .NET สำหรับเพิ่มการดูเอกสารในเบราว์เซอร์โดยไม่มีปลั๊กอินให้กับโครงการ ASP.NET Core, MVC หรือ WebForms แบบคลาสสิก ความปลอดภัยยังคงขึ้นอยู่กับสถาปัตยกรรมของแอปพลิเคชันทั้งหมด: การตรวจสอบสิทธิ์, การกำหนดสิทธิ์, การส่งข้อมูล, การจัดเก็บ, การตรวจสอบความถูกต้อง, การทำความสะอาด, การอัปเดต, และการเฝ้าระวัง
1. ติดตั้ง Doconut App SDK และเตรียมโครงการ .NET ของคุณให้รองรับหลายรูปแบบไฟล์
1.1 เพิ่มแพ็กเกจที่รองรับ
ใช้แพ็กเกจล่าสุดและคำแนะนำการตั้งค่าจาก หน้าโหลด Doconut อย่างเป็นทางการ บันทึกเวอร์ชันที่เลือกและตรวจสอบว่ามันรองรับ .NET runtime ที่เป้าหมายหรือไม่
1.2 ตรวจสอบการอ้างอิงแพ็กเกจ
หลังการติดตั้ง ให้ยืนยันการอ้างอิงแพ็กเกจและเวอร์ชันที่แก้ไขในไฟล์โครงการ การระบุเวอร์ชันอย่างชัดเจนช่วยให้การสร้างและการปรับใช้ทำซ้ำได้
1.3 เปิดใช้งาน HTTPS
Doconut App ต้องการ SSL สำหรับการอัปโหลดไฟล์ทั้งหมด ตรวจสอบให้แอปของคุณรับฟังบน HTTPS สำหรับแอปที่โฮสต์ด้วย Kestrel ให้เพิ่มการกำหนดค่า endpoint ใน appsettings.json:
{
"Kestrel": {
"Endpoints": {
"Https": {
"Url": "
}
}
}
}
หากคุณโฮสต์บน IIS ให้ผูกใบรับรอง HTTPS กับไซต์ เมื่อเปิดใช้งาน HTTPS ทุกไฟล์จะเดินทางผ่านช่องทางที่ปลอดภัยก่อนถึงเอนจินการเรนเดอร์ของ Doconut App
ทำไมต้อง Doconut App?
Doconut App เป็นตัวดูที่เป็นเนทีฟของ .NET เพียงตัวเดียวที่รวมการเรนเดอร์แบบไม่มีปลั๊กอินกับการเข้ารหัส AES‑256 แบบ end‑to‑end ทำให้คุณตอบสนองข้อกำหนดการปฏิบัติตามโดยไม่ต้องเพิ่มโครงสร้างพื้นฐานเพิ่มเติม
2. กำหนดค่าการอัปโหลดไฟล์อย่างปลอดภัยและการจัดเก็บสำหรับการจัดการเอกสาร
โมเดลความปลอดภัยของ Doconut App มีพื้นฐานจากสามเสาหลัก: การส่งข้อมูลผ่าน SSL, การเข้ารหัส AES‑256 ที่พักไฟล์, และการลบอัตโนมัติหลังการดู SDK มีบริการสำเร็จรูปที่คุณสามารถลงทะเบียนในแอปของคุณได้
2.1 ลงทะเบียนบริการอัปโหลด
ใน Startup.cs (หรือ Program.cs สำหรับ .NET 6+) ให้เพิ่มบริการของ Doconut ลงในคอนเทนเนอร์ dependency injection กำหนดโฟลเดอร์จัดเก็บชั่วคราว, เปิดใช้งานการเข้ารหัส AES‑256, และตั้งค่าช่วงเวลาการลบอัตโนมัติ (เช่น 10 นาทีหลังจากเอกสารถูกดู)
2.2 สร้าง endpoint สำหรับอัปโหลด
ทำการเขียน controller action ที่รับไฟล์อัปโหลด, ส่งต่อให้บริการของ Doconut เพื่อจัดเก็บอย่างปลอดภัย, และคืน token แบบใช้ครั้งเดียว Token นี้คือสิ่งที่ตัวดูฝั่งไคลเอนต์จะใช้เพื่อดึงและเรนเดอร์เอกสาร
2.3 ปกป้อง endpoint
เนื่องจาก endpoint การอัปโหลดจัดการข้อมูลที่ละเอียดอ่อน จึงต้องปกป้องด้วยการตรวจสอบสิทธิ์และการกำหนดสิทธิ์ตามบทบาท (เช่น ผู้ใช้ที่อยู่ในบทบาท DocumentViewer เท่านั้นที่อัปโหลด) เพื่อให้แน่ใจว่าเฉพาะบุคคลที่ได้รับอนุญาตเท่านั้นที่สามารถจัดเก็บและดูเอกสารที่เป็นความลับได้
ข้อได้เปรียบของ Doconut App: SDK จัดการการเข้ารหัสและการทำความสะอาดให้คุณ ไม่ต้องเขียนโค้ดการเข้ารหัสเองหรือกังวลเกี่ยวกับไฟล์ที่หลงเหลืออยู่
3. ฝังคอมโพเนนท์ Viewer ลงใน ASP.NET Core, MVC หรือ WebForms
เมื่อ backend พร้อมแล้ว ให้เริ่มต้นตัวดูโดยใช้ assets และ API ที่ระบุในเอกสารสำหรับเวอร์ชัน Doconut ที่ติดตั้งไว้
3.1 เพิ่ม JavaScript bundle
ในเลเอาต์ที่ใช้ร่วมกันของคุณ ให้รวมเฉพาะทรัพยากรของตัวดูที่อธิบายไว้ในเอกสารซึ่งตรงกับ SDK ที่ติดตั้ง อย่าสมมติชื่อ bundle หรือที่ตั้งที่คงที่ระหว่างเวอร์ชันต่าง ๆ
3.2 สร้าง Razor view สำหรับ Core/MVC
เพิ่ม view (เช่น Views/Document/View.cshtml) ที่มี input สำหรับไฟล์, container สำหรับตัวดู, และสคริปต์เล็ก ๆ ที่อัปโหลดไฟล์ที่เลือก, รับ token ที่ปลอดภัย, แล้วเริ่มต้นวิดเจ็ต Doconut Viewer
สคริปต์ควรทำดังนี้:
- ดักจับไฟล์ที่เลือกจากองค์ประกอบ
<input type="file"> - ส่งไฟล์ไปยัง endpoint การอัปโหลดโดยใช้
fetchหรือXMLHttpRequest - เมื่อได้รับการตอบกลับที่ได้รับอนุญาตแล้ว ให้เริ่มต้นตัวดูโดยใช้ API ที่รองรับสำหรับเวอร์ชันที่ติดตั้งอยู่
3.3 วิธีทำใน WebForms
ในหน้า WebForms (เช่น DocumentViewer.aspx) ให้วางคอนโทรล asp:FileUpload, ปุ่มเพื่อเรียกการอัปโหลด, และ <div> ที่จะโฮสต์ตัวดู ใน code‑behind ให้เรียกบริการของ Doconut เพื่อจัดเก็บไฟล์ที่อัปโหลด, รับ token, แล้วลงทะเบียนสคริปต์เริ่มต้นที่เรียกฟังก์ชัน JavaScript (initViewer(token)) เพื่อสร้างอินสแตนซ์ของตัวดู
ประโยชน์ของ Doconut App: วิดเจ็ต JavaScript ตัวเดียว, โมเดล UI .NET สามแบบ, ไม่ต้องใช้ไลบรารีเพิ่มเติม ความเรียบง่ายที่ดีที่สุด
4. ปรับแต่ง Viewer สำหรับการจัดการเอกสาร
จากกล่อง Doconut Viewer มีแถบเครื่องมือที่สะอาดตา, ควบคุมการซูม, และสวิตช์โหมดสว่าง/มืด คุณสามารถปรับ UI ให้สอดคล้องกับแบรนด์และประเภทเอกสารเฉพาะได้
4.1 การกำหนดค่าแถบเครื่องมือ
เมื่อเริ่มต้นตัวดู คุณสามารถระบุรายการเครื่องมือในแถบที่ต้องการให้แสดง (เช่น download, print, zoomIn, zoomOut, fullScreen) การลบปุ่ม download จะป้องกันผู้ใช้ไม่ให้บันทึกไฟล์ต้นฉบับได้
4.2 ธีมและสี
ตั้งค่า theme เป็น 'dark' หรือ 'light' และอาจระบุ primaryColor ที่สอดคล้องกับพาเลตขององค์กร ตัวดูจะเคารพตัวแปร CSS ทำให้สามารถสไตล์ลึกได้ผ่านไฟล์สไตล์ชีตที่กำหนดเอง
4.3 เครื่องมือเฉพาะสำหรับ CAD
หากคุณกำลังแสดงไฟล์ DWG, DXF หรือ DGN ให้เปิดใช้งานตัวเลือก CAD enableMeasurement และ enableLayerToggle ซึ่งจะเพิ่มเครื่องมือวัดระยะ, มุม, พื้นที่ รวมถึงพาเนลการแสดง/ซ่อนเลเยอร์ในแถบเครื่องมือโดยตรง
4.4 การแปลภาษา
ส่งค่า locale (เช่น 'fr' สำหรับภาษาฝรั่งเศส) ระหว่างการเริ่มต้น ตัวดูจะเปลี่ยนข้อความ UI, tooltip, และข้อความแสดงข้อผิดพลาดทั้งหมดให้เป็นภาษาที่เลือก
ทำไมต้องปรับแต่ง? Doconut App ให้คุณทำให้ตัวดูดูเหมือนเป็นส่วนต่อขยายธรรมชาติของเว็บไซต์ของคุณ ในขณะเดียวกันยังคงมอบประสบการณ์ที่ปลอดภัยและไม่มีปลั๊กอินเดียวกัน
5. ทดสอบการรวมระบบกับรูปแบบไฟล์ที่รองรับทั้งหมด
ก่อนเปิดใช้งานจริง ให้ทำการตรวจสอบอย่างรวดเร็วสำหรับแต่ละประเภทไฟล์ที่คาดว่าผู้ใช้จะดู โดยใช้ตัวดูของ Doconut App เปิดไฟล์ตัวอย่างของแต่ละรูปแบบและตรวจสอบว่าการเรนเดอร์, การนำทาง, และเครื่องมือพิเศษทำงานตามที่อธิบายไว้หรือไม่
| รูปแบบ | สถานการณ์ทดสอบ | ผลลัพธ์ที่คาดหวัง |
|---|---|---|
| รายงานหลายหน้าใหญ่ที่มีภาพฝังอยู่ | การเลื่อนราบรื่น, ซูมได้, การแสดงสีแม่นยำ | |
| DOCX | เอกสาร Word ที่มีตารางและเชิงอรรถ | ข้อความ, ตาราง, เชิงอรรถทั้งหมดแสดง; ไม่เกิดการเปลี่ยนแปลงเลย์เอาต์ |
| XLSX | สเปรดชีตที่มีแผนภูมิ | แผนภูมิแสดงเป็นกราฟิกเวกเตอร์; ซูมยังคงคมชัด |
| PPTX | สไลด์เด็คที่มีพรีวิวคงที่ | สไลด์แรกแสดงถูกต้อง; ไม่มีทรัพยากรเสียหาย |
| DWG | ภาพวาดเทคนิคที่มีหลายเลเยอร์ | สามารถสลับเลเยอร์, เครื่องมือวัดทำงาน, เส้นคมชัด |
| PSD | ไฟล์ Photoshop ที่มีเลเยอร์ | เลเยอร์แสดง, สีแม่นยำ, ซูมยังคงคมชัด |
| SVG | กราฟิกเวกเตอร์ที่มีไล่สี | ไล่สีแสดงราบรื่น; ซูมยังคงคมชัด |
| TIFF | สแกนความละเอียดสูง | ภาพโหลดเร็ว; ซูมเปิดรายละเอียดได้ |
การตรวจสอบรายการนี้ด้วย Doconut App จะทำให้มั่นใจว่าทุกรูปแบบที่รองรับทำงานอย่างเชื่อถือได้สำหรับผู้ใช้ของคุณ
สรุป
การฝังตัวดูเอกสารที่ปลอดภัยและไม่มีปลั๊กอินตอนนี้ทำได้ง่ายด้วย Doconut App โดยทำตามขั้นตอนข้างต้น—ติดตั้ง SDK, กำหนดค่าการอัปโหลดที่เข้ารหัส, ฝังวิดเจ็ต JavaScript ที่เบา, และปรับแต่ง UI—คุณสามารถส่งมอบการเรนเดอร์เอกสารที่เร็วและคุณภาพสูงในแอปพลิเคชัน ASP.NET Core, MVC, และ WebForms
พร้อมที่จะประเมินหรือยัง? เริ่มต้นด้วย หน้าโหลด Doconut อย่างเป็นทางการและเอกสาร แล้วทดสอบ SDK ภายในกระบวนการตรวจสอบความปลอดภัยเดียวกับที่ใช้กับแอป ASP.NET บน Windows ของคุณ.