7/10/2026

วิธีฝังตัวดูเอกสารแบบไม่มีปลั๊กอินใน ASP.NET

คู่มือแบบขั้นตอนสำหรับวิศวกร .NET ที่ต้องการฝังตัวดูเอกสารที่ปลอดภัยและไม่มีปลั๊กอินของ Doconut App ลงในโครงการ ASP.NET Core, MVC หรือ WebForms

ใช่—คุณสามารถฝังตัวดูไฟล์ออนไลน์ที่ปลอดภัยและไม่มีปลั๊กอินลงในแอปพลิเคชัน 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 ขั้นตอนการเตรียมจะเหมือนกันทั้งหมด:

  1. เพิ่มชุดสคริปต์ Doconut
    Doconut โฮสต์สคริปต์ตัวดูที่มีน้ำหนักเบาบน CDN ของมัน เพิ่มบรรทัดต่อไปนี้ลงในหน้าเลย์เอาต์ของคุณ (เช่น _Layout.cshtml หรือ Site.Master):

    <script src="https://doconut.app/viewer.min.js"></script>
    
  2. สร้างองค์ประกอบตัวแทน
    ตัวดูจะฉีด canvas เข้าไปใน <div> ใด ๆ ที่คุณกำหนด ตัวอย่างสำหรับ Razor:

    <div id="docViewer" style="width:100%; height:800px;"></div>
    

    สำหรับ WebForms ให้วาง <asp:Panel> ที่มี runat="server" และตั้งค่า ID="docViewer"

  3. อ้างอิง CSS ของ Doconut (ไม่บังคับ)
    หากคุณต้องการแถบเครื่องมือและธีมเริ่มต้น ให้รวมไฟล์ CSS นี้:

    <link rel="stylesheet" href="https://doconut.app/viewer.min.css" />
    

นั่นคือทั้งหมดของทรัพยากรสถิตที่คุณต้องการ งานที่เหลือจะทำในโค้ดฝั่งเซิร์ฟเวอร์ของคุณ (การอัปโหลด, การเข้ารหัส, การสร้างโทเคน) และสคริปต์การเริ่มต้นฝั่งไคลเอนต์ขนาดเล็ก

3. สร้างจุดสิ้นสุดการอัปโหลดที่ปลอดภัย – AES‑256, SSL, และการลบอัตโนมัติ

ตัวดูจะไม่เข้าถึงไฟล์โดยตรงบนระบบไฟล์ของคุณ แทนที่จะเป็นเช่นนั้น คุณจะอัปโหลดเอกสารไปยัง ตำแหน่งจัดเก็บชั่วคราวที่เข้ารหัส ที่ Doconut จะอ่านตามความต้องการ ด้านล่างเป็นคำอธิบายระดับสูงของขั้นตอนที่จำเป็นสำหรับ ASP.NET Core; แนวคิดเดียวกันใช้กับ MVC และ WebForms.

ขั้นตอนการทำงานฝั่งเซิร์ฟเวอร์

  1. รับไฟล์ที่อัปโหลด – ใช้ IFormFile มาตรฐาน (หรือ HttpPostedFile ใน WebForms) เพื่อรับเอกสารจากไคลเอนต์
  2. เข้ารหัสไฟล์ด้วย AES‑256 – ก่อนบันทึกสตรีม ให้เข้ารหัสโดยใช้ไลบรารีที่เชื่อถือได้ เช่น System.Security.Cryptography.Aes. เก็บ blob ที่เข้ารหัสในตำแหน่งที่ปลอดภัย (เช่น Azure Blob Storage ที่เปิดการเข้ารหัสฝั่งเซิร์ฟเวอร์, หรือ S3 bucket ที่ใช้ SSE‑AES256)
  3. สร้าง URL ที่ลงนามแบบสั้น – สร้าง URL ที่ใช้ได้เพียงไม่กี่นาที (เช่น 5 นาที). URL ควรเป็น HTTPS และรวมโทเคนเข้ารหัสที่ Doconut สามารถตรวจสอบได้ ผู้ให้บริการคลาวด์ส่วนใหญ่มีฟีเจอร์ “pre‑signed URL” ที่เหมาะกับความต้องการนี้
  4. ส่ง URL ที่ลงนามกลับไปยังไคลเอนต์ – ส่งการตอบสนอง JSON ที่มี URL อยู่ในนั้น ไคลเอนต์จะส่ง URL นี้ให้ตัวดูของ Doconut
  5. กำหนดการลบอัตโนมัติ – หลังจาก 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, และหลายสิบรูปแบบอื่นอย่างปลอดภัยและทันที.