ใช่—คุณสามารถฝังตัวดูไฟล์ออนไลน์ที่ปลอดภัยและไม่มีปลั๊กอินลงในแอปพลิเคชัน ASP.NET Core, MVC หรือ WebForms ใดก็ได้ภายในไม่กี่นาที และ Doconut App ทำงานหนักทั้งหมดให้คุณ
องค์กรที่ให้บริการสัญญา, แผนภาพ หรือสินทรัพย์การออกแบบต้องการตัวดูที่เคารพนโยบายความปลอดภัยขององค์กร ทำงานบนทุกเบราว์เซอร์ และไม่บังคับให้ผู้ใช้ติดตั้งปลั๊กอินของบุคคลที่สาม Doconut App มอบสิ่งนั้นอย่างตรงจุด: ตัวดูบนเบราว์เซอร์ที่รองรับ PDF, Office, CAD และรูปแบบอื่นกว่า 50 รูปแบบ พร้อมการเข้ารหัส AES‑256, การอัปโหลดแบบ SSL‑only, และ UI ที่ปรับแต่งได้เต็มที่ บทความนี้จะพาคุณผ่านขั้นตอนทั้งหมด—ตั้งแต่การรักษาความปลอดภัยของการอัปโหลดไฟล์จนถึงการแสดงผลตัวดู—เพื่อให้คุณสามารถส่งมอบโซลูชันระดับองค์กรที่สมบูรณ์แบบโดยไม่ต้องเขียนเครื่องยนต์การแสดงผลจากศูนย์
1. ทำไมความปลอดภัยและการแสดงผลแบบไม่มีปลั๊กอินถึงสำคัญสำหรับเว็บแอป .NET
องค์กรสมัยใหม่ถือเอกสารทุกฉบับว่าเป็นความเสี่ยงต่อการรั่วไหลของข้อมูล เมื่อคุณฝังตัวดูที่พึ่งพา ActiveX, Flash หรือไคลเอนต์เนทีฟ คุณจะรับมือตามความเสี่ยงสามประการ:
| ความเสี่ยง | ผลกระทบต่อแอปพลิเคชัน .NET ของคุณ | วิธีที่ Doconut App ขจัดปัญหา |
|---|---|---|
| การพึ่งพาปลั๊กอิน | ผู้ใช้ต้องติดตั้งหรือเปิดใช้งานปลั๊กอินในเบราว์เซอร์ ทำให้เกิดตั๋วสนับสนุนและปัญหาการปฏิบัติตามกฎระเบียบ | Doconut ทำงานทั้งหมดใน HTML5/Canvas ไม่ต้องใช้ ไม่มีปลั๊กอิน |
| การส่งข้อมูลที่ไม่ได้เข้ารหัส | ไฟล์ถูกส่งผ่าน HTTP หรือเก็บเป็นข้อความธรรมดา ซึ่งละเมิด GDPR, HIPAA หรือ นโยบายภายใน | การอัปโหลดทั้งหมดผ่าน SSL และเก็บด้วย AES‑256 encryption |
| วงจรชีวิตที่ไม่ควบคุม | ไฟล์อาจค้างอยู่บนเซิร์ฟเวอร์ ทำให้พื้นที่เสี่ยงต่อการละเมิดเพิ่มขึ้น | Doconut จะ ลบไฟล์หลังการดู อัตโนมัติ เพื่อให้ระยะเวลาการเก็บสั้นลง |
เนื่องจากตัวดูถูกส่งมอบเป็นคอมโพเนนต์ JavaScript ที่สื่อสารกับบริการการเรนเดอร์ที่ปลอดภัยของ Doconut ทำให้สแตก .NET ของคุณสะอาด—ไม่มีไลบรารีเนทีฟเพิ่มเติม, ไม่มีไบนารีของบุคคลที่สาม, และไม่มีการตรวจสอบความสอดคล้องเพิ่มเติม
2. การเตรียมโครงการ .NET ของคุณ – การตั้งค่าขั้นต่ำสำหรับ ASP.NET Core, MVC, และ WebForms
ไม่ว่าคุณจะใช้ ASP.NET Core, MVC 5, หรือ WebForms ขั้นตอนการเตรียมจะเหมือนกันทั้งหมด:
-
เพิ่มชุดสคริปต์ Doconut
Doconut โฮสต์สคริปต์ตัวดูที่มีน้ำหนักเบาบน CDN ของมัน เพิ่มบรรทัดต่อไปนี้ลงในหน้าเลย์เอาต์ของคุณ (เช่น_Layout.cshtmlหรือSite.Master):<script src="https://doconut.app/viewer.min.js"></script> -
สร้างองค์ประกอบตัวแทน
ตัวดูจะฉีด canvas เข้าไปใน<div>ใด ๆ ที่คุณกำหนด ตัวอย่างสำหรับ Razor:<div id="docViewer" style="width:100%; height:800px;"></div>สำหรับ WebForms ให้วาง
<asp:Panel>ที่มีrunat="server"และตั้งค่าID="docViewer" -
อ้างอิง CSS ของ Doconut (ไม่บังคับ)
หากคุณต้องการแถบเครื่องมือและธีมเริ่มต้น ให้รวมไฟล์ CSS นี้:<link rel="stylesheet" href="https://doconut.app/viewer.min.css" />
นั่นคือทั้งหมดของทรัพยากรสถิตที่คุณต้องการ งานที่เหลือจะทำในโค้ดฝั่งเซิร์ฟเวอร์ของคุณ (การอัปโหลด, การเข้ารหัส, การสร้างโทเคน) และสคริปต์การเริ่มต้นฝั่งไคลเอนต์ขนาดเล็ก
3. สร้างจุดสิ้นสุดการอัปโหลดที่ปลอดภัย – AES‑256, SSL, และการลบอัตโนมัติ
ตัวดูจะไม่เข้าถึงไฟล์โดยตรงบนระบบไฟล์ของคุณ แทนที่จะเป็นเช่นนั้น คุณจะอัปโหลดเอกสารไปยัง ตำแหน่งจัดเก็บชั่วคราวที่เข้ารหัส ที่ Doconut จะอ่านตามความต้องการ ด้านล่างเป็นคำอธิบายระดับสูงของขั้นตอนที่จำเป็นสำหรับ ASP.NET Core; แนวคิดเดียวกันใช้กับ MVC และ WebForms.
ขั้นตอนการทำงานฝั่งเซิร์ฟเวอร์
- รับไฟล์ที่อัปโหลด – ใช้
IFormFileมาตรฐาน (หรือHttpPostedFileใน WebForms) เพื่อรับเอกสารจากไคลเอนต์ - เข้ารหัสไฟล์ด้วย AES‑256 – ก่อนบันทึกสตรีม ให้เข้ารหัสโดยใช้ไลบรารีที่เชื่อถือได้ เช่น
System.Security.Cryptography.Aes. เก็บ blob ที่เข้ารหัสในตำแหน่งที่ปลอดภัย (เช่น Azure Blob Storage ที่เปิดการเข้ารหัสฝั่งเซิร์ฟเวอร์, หรือ S3 bucket ที่ใช้ SSE‑AES256) - สร้าง URL ที่ลงนามแบบสั้น – สร้าง URL ที่ใช้ได้เพียงไม่กี่นาที (เช่น 5 นาที). URL ควรเป็น HTTPS และรวมโทเคนเข้ารหัสที่ Doconut สามารถตรวจสอบได้ ผู้ให้บริการคลาวด์ส่วนใหญ่มีฟีเจอร์ “pre‑signed URL” ที่เหมาะกับความต้องการนี้
- ส่ง URL ที่ลงนามกลับไปยังไคลเอนต์ – ส่งการตอบสนอง JSON ที่มี URL อยู่ในนั้น ไคลเอนต์จะส่ง URL นี้ให้ตัวดูของ Doconut
- กำหนดการลบอัตโนมัติ – หลังจาก URL ที่ลงนามหมดอายุ งานพื้นหลัง (Hangfire, Azure Functions ฯลฯ) จะลบ blob ที่เข้ารหัส, รับประกันว่าไฟล์จะไม่คงอยู่บนเซิร์ฟเวอร์
ทางเลือกสำหรับ MVC / WebForms
- MVC – วางตรรกะเดียวกันในแอคชันของคอนโทรลเลอร์ปกติและคืนค่า
JsonResult - WebForms – สร้างตัวจัดการ
.ashxหรือเมธอดหน้า (page method) ที่ทำตามขั้นตอนเดียวกัน: รับRequest.Files[0], เข้ารหัส, สร้าง pre‑signed URL, และเขียนการตอบสนอง JSON
ความแตกต่างเดียวคือไวยากรณ์การกำหนดเส้นทาง; ขั้นตอนความปลอดภัยยังคงเหมือนเดิม
4. การแสดงผลตัวดู Doconut – จาก URL ไปยัง canvas ในเบราว์เซอร์
เมื่อไคลเอนต์ได้รับ URL ที่ลงนามแล้ว ตัวดูสามารถเปิดได้ด้วยการเรียก JavaScript เพียงครั้งเดียว SDK ของ Doconut จะจัดการการสตรีม, การเรนเดอร์, และการโต้ตอบ UI โดยอัตโนมัติ
<script>
// Assume `response.viewerUrl` contains the signed URL returned from the upload endpoint
function launchViewer(viewerUrl) {
// Initialise the Doconut viewer. The global object provided by the script is `DoconutViewer`.
DoconutViewer.init({
containerId: "docViewer", // The <div> we placed earlier
fileUrl: viewerUrl, // Signed, HTTPS URL to the encrypted file
toolbar: true, // Show the built‑in toolbar
theme: "light" // Optional visual theme
});
}
// Example: after a successful upload
fetch("/api/document/upload", {
method: "POST",
body: myFormData,
credentials: "include"
})
.then(r => r.json())
.then(data => launchViewer(data.viewerUrl));
</script>
ทำไมวิธีนี้จึงทำงานกับ .NET ทุกแบบ
- ASP.NET Core Razor – สคริปต์อยู่ในวิวเดียวกับฟอร์มอัปโหลด ทำให้การไหลของข้อมูลราบรื่น.
- MVC – ใช้
@section Scriptsเพื่อแทรกสคริปต์เดียวกัน; คอนโทรลเลอร์คืนค่า JSON ที่$.ajaxของ MVC สามารถใช้ได้. - WebForms – ลงทะเบียนสคริปต์ด้วย
ClientScript.RegisterStartupScriptหลังจากอัปโหลดเสร็จ, จากนั้นเรียกlaunchViewerแบบเดียวกัน.
เนื่องจาก Doconut สตรีมเอกสารโดยตรงจาก URL ที่ลงนาม เซิร์ฟเวอร์จะไม่สัมผัสไฟล์อีกหลังจากขั้นตอนอัปโหลด ตัวดูจะเรนเดอร์ PDF, ไฟล์ Word, แผนภาพ CAD, และรูปแบบอื่น ๆ ที่ระบุในข้อมูลผลิตภัณฑ์—โดยไม่มีการแปลงฝั่งเซิร์ฟเวอร์เพิ่มเติม.
5. ปรับแต่งตัวดูให้ตรงกับแบรนด์ของคุณ – ปรับละเอียดตัวดูไฟล์ออนไลน์
องค์กรมักต้องการให้ตัวดูดูเหมือนเป็นส่วนหนึ่งของพอร์ทัลที่เป็นเนทีฟ UI ของ Doconut App ที่ปรับแต่งได้เต็มที่ ให้คุณ:
| การปรับแต่ง | วิธีใช้ใน .NET |
|---|---|
| การจัดวางแถบเครื่องมือ | ส่งค่า toolbar: false แล้วสร้างปุ่มของคุณเองที่เรียก API JavaScript ของตัวดู (เช่น zoomIn(), print()). |
| โทนสี | ตั้งค่า theme: "dark" หรือให้ไฟล์ CSS ที่กำหนดเองเพื่อทับคลาสเริ่มต้น. |
| ภาษาและการเข้าถึง | Doconut เคารพแอตทริบิวต์ lang บนคอนเทนเนอร์; คุณยังสามารถแทรกป้าย ARIA ผ่านตัวเลือก accessibility. |
| ฮุคเหตุการณ์ | คอลแบ็กเช่น onPageChange, onError, และ onDownload ให้คุณบันทึกเมตริกการใช้งานในระบบ telemetry ที่มีอยู่ของคุณ. |
ฮุคทั้งหมดนี้กำหนดค่าในอ็อบเจ็กต์ JavaScript เดียวกันที่แสดงในส่วนก่อนหน้า เนื่องจากตัวดูทำงานทั้งหมดบนไคลเอนต์ จึงไม่มี ภาระเซิร์ฟเวอร์เพิ่มเติม—แบ็กเอนด์ .NET ของคุณยังคงมุ่งเน้นที่การตรวจสอบสิทธิ์, การเข้ารหัส, และตรรกะธุรกิจ
6. ประสิทธิภาพและการขยายขนาด – รักษาประสบการณ์ให้รวดเร็ว
การฝังตัวดูในพอร์ทัลที่มีการเข้าชมสูงทำให้เกิดข้อกังวลสองประการ: เวลาโหลด และ การเรนเดอร์พร้อมกัน Doconut App จัดการทั้งสองอย่างพร้อมใช้งาน แต่คุณสามารถเสริมประสิทธิภาพด้วยเทคนิคเฉพาะของ .NET บางอย่าง
| ข้อกังวล | ข้อได้เปรียบในตัวของ Doconut | เคล็ดลับ .NET เพิ่มเติม |
|---|---|---|
| การดาวน์โหลดเริ่มต้น | สคริปต์ตัวดูมีขนาดเพียง ~150 KB, บีบอัด gzip. | เปิดใช้ การบีบอัดไฟล์สถิต (app.UseResponseCompression()) และ การแคช (Cache‑Control: public, max‑age=31536000). |
| การสตรีมไฟล์ | Doconut สตรีมเฉพาะหน้าที่ต้องการโดยใช้ HTTP range requests. | เก็บ blob ที่เข้ารหัสใน CDN ภูมิภาค (Azure Front Door, Amazon CloudFront) เพื่อลดความหน่วง. |
| ผู้ใช้พร้อมกัน | การเรนเดอร์เกิดขึ้นบนไคลเอนต์; เซิร์ฟเวอร์ให้ไฟล์ที่เข้ารหัสเพียงครั้งเดียวต่อการดู. | จำกัดอัตรา จุดอัปโหลด ด้วย IApplicationRateLimiter เพื่อป้องกันการพุ่งสูง. |
| การใช้หน่วยความจำ | ไม่มีไลบรารีการแปลง PDF ฝั่งเซิร์ฟเวอร์ ทำให้กระบวนการ ASP.NET มีขนาดเล็ก. | รันบริการอัปโหลดใน ไมโครเซอร์วิสแยก หากคุณมีคิวงานพื้นหลังที่หนักอยู่แล้ว. |
ตามแนวทางเหล่านี้ คุณสามารถรองรับผู้ชมพร้อมกันหลายพันคนโดยไม่ต้องขยายชั้นเว็บ .NET มากกว่าที่คุณมีอยู่แล้ว
สรุปประเด็นสำคัญ
- Doconut App ให้ตัวดูที่ ไม่มีปลั๊กอิน, ปลอดภัย 100 % ซึ่งทำงานกับ ASP.NET Core, MVC, และ WebForms.
- การอัปโหลดเป็น SSL‑only, เก็บด้วย AES‑256 encryption, และจะ ลบไฟล์หลังการดู อัตโนมัติ.
- การบูรณาการต้องการเพียงสคริปต์ CDN, คอนเทนเนอร์
<div>, และจุดสิ้นสุดฝั่งเซิร์ฟเวอร์ขนาดเล็กที่คืนค่า URL ที่ลงนาม. - ตัวดูรองรับ PDF, Office, CAD, และรูปแบบภาพกว่า 50—ไม่ต้องการการแปลงฝั่งเซิร์ฟเวอร์.
- UI สามารถ ปรับแต่งได้เต็มที่ ให้ตรงกับแบรนด์ขององค์กร, และตัวดูมีเครื่องมือซูม, การวัด, และเลเยอร์ในตัวสำหรับไฟล์ CAD.
- ประสิทธิภาพจัดการบนฝั่งไคลเอนต์; นักพัฒนา .NET เพียงต้องแน่ใจว่ามีการบีบอัดไฟล์สถิติและการแคช CDN ตามต้องการ.
- กระบวนการทั้งหมด—ตั้งแต่การอัปโหลดที่ปลอดภัยจนถึงการเรนเดอร์ในเบราว์เซอร์—เข้ากันได้อย่างลงตัวกับ pipeline การตรวจสอบสิทธิ์และการให้สิทธิ์ของ .NET ที่มีอยู่
คำถามที่พบบ่อย
Q1: ฉันต้องติดตั้งแพ็กเกจ NuGet ใด ๆ เพื่อใช้ Doconut หรือไม่?
A: ไม่ต้อง. ตัวดูถูกส่งมอบเป็นบันเดิล JavaScript ฝั่งไคลเอนต์จาก CDN ของ Doconut. เซิร์ฟเวอร์ของคุณต้องการเพียงมิดเดิลแวร์ ASP.NET Core ปกติสำหรับการอัปโหลดไฟล์และการเข้ารหัส, ซึ่งคุณน่าจะมีอยู่แล้ว.
Q2: Doconut ทำอย่างไรให้แน่ใจว่าไฟล์จะถูกลบหลังการดู?
A: Doconut สร้าง URL ที่ลงนามแบบสั้นซึ่งหมดอายุหลังจากระยะเวลาที่กำหนด (โดยทั่วไป 5 นาที). หลังจาก URL หมดอายุ, คุณ (หรืองานทำความสะอาดพื้นหลัง) จะลบ blob ที่เข้ารหัส. สิ่งนี้รับประกันว่าเอกสารจะไม่ถูกเก็บไว้เกินกว่าที่จำเป็น, ตรงตามนโยบายการเก็บข้อมูลที่เข้มงวด.
Q3: ฉันสามารถใช้ตัวดูเพื่อพิมพ์หรือส่งออกเอกสารได้หรือไม่?
A: ได้. แถบเครื่องมือในตัวของ Doconut มีตัวเลือกการพิมพ์และการส่งออกที่รักษาคุณภาพและการจัดวางต้นฉบับของไฟล์ไว้.
พร้อมที่จะฝังตัวดูเอกสารที่ปลอดภัยและไม่มีปลั๊กอินในแอปพลิเคชัน .NET ของคุณหรือยัง? เริ่มต้นกับ Doconut App วันนี้และส่งมอบ PDF, Office, CAD, และหลายสิบรูปแบบอื่นอย่างปลอดภัยและทันที.