เริ่มต้นอย่างเร็ว

แสดงเอกสารแรกของคุณใน MVC 5 หรือ Web Forms

บทแนะนำนี้จะนำแอปพลิเคชัน ASP.NET บน .NET Framework 4.7.2 จากแพ็คเกจที่ติดตั้งไปสู่เอกสารที่แสดงในเบราว์เซอร์: Global.asax, จุดเปิด, สินทรัพย์ของตัวดู, วิดเจ็ต, และโทเค็นที่เชื่อมต่อพวกมัน. สมมติว่าการลงทะเบียนใน Web.config จาก การติดตั้ง ถูกตั้งค่าไว้ — หากไม่มีตัวจัดการ DocImage.axd และโมดูลทรัพยากร, สิ่งต่อไปนี้จะไม่สามารถเข้าถึงเซิร์ฟเวอร์ได้.

ประกอบ Doconut ใน Global.asax

ตัวอย่าง Application_Start ที่สมบูรณ์สำหรับแอปพลิเคชัน MVC 5:

csharp
// Global.asax.cs - compose once per worker process, release on shutdown.
protected void Application_Start()
{
    Encoding.RegisterProvider(CodePagesEncodingProvider.Instance);

    Doconut.DoconutHost.Initialize(options =>
    {
        options.LicensePath = HostingEnvironment.MapPath("~/wwwroot/Doconut.Viewer.lic");
        options.UnsafeMode  = false; // a page is served only to the session that opened the document
    });

    // MVC only: keep the two Doconut endpoints out of routing.
    RouteTable.Routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
    RouteTable.Routes.IgnoreRoute("doconut-res/{*pathInfo}");
}

protected void Application_End()
{
    Doconut.DoconutHost.Shutdown();
}
  • Encoding.RegisterProvider ทำให้หน้าโค้ดเก่าที่บางรูปแบบเอกสารใช้สามารถเข้าถึงได้โดยกระบวนการ. เรียกใช้ครั้งเดียว, ก่อนที่เอกสารแรกจะเปิด.
  • UnsafeMode = false เป็นค่าเริ่มต้น, ถูกระบุไว้เพื่อให้ไม่มีใครเปลี่ยนโดยบังเอิญ: DocImage.axd ให้บริการหน้าเฉพาะกับเซสชัน ASP.NET ที่เปิดเอกสารนั้น.
  • การเรียก IgnoreRoute สองครั้ง ทำให้การกำหนดเส้นทางของ MVC ไม่ไปที่ DocImage.axd และ /doconut-res/*, ซึ่งตัวจัดการและโมดูลให้บริการ. แอปพลิเคชัน Web Forms ไม่มีเส้นทาง MVC จึงไม่จำเป็นต้องมีบรรทัดเหล่านี้.
  • DoconutHost.Shutdown หยุดการทำงานเบื้องหลังของ Doconut และปล่อยบริการเมื่อพูลแอปพลิเคชันรีไซเคิล. สามารถเรียกใช้ได้อย่างปลอดภัยแม้ว่า Initialize จะไม่เคยทำงาน.

เปิดเอกสาร

การเปิดเอกสารจะคืนค่าโทเค็นที่ไม่เปิดเผย. วิดเจ็ตจะส่งโทเค็นนั้นพร้อมกับทุกคำขอหน้า.

ใน MVC 5, การกระทำของคอนโทรลเลอร์จะดึงบริการ Viewer จาก DoconutHost.Services — MVC 5 ไม่มีการฉีดคอนสตรัคเตอร์สำหรับมัน:

csharp
// POST /Document/Open
[HttpPost]
public async Task<ActionResult> Open()
{
    var viewer = Doconut.DoconutHost.Services.GetRequiredService<Viewer>();

    // The token is opaque - hand it to the viewer, never log or persist it.
    string token = await viewer.OpenDocumentAsync(Server.MapPath("~/files/Sample.pdf"));
    return Json(new { token });
}

เอกสารต้องถูกเปิด ภายในคำขอที่มีสถานะเซสชัน, เนื่องจากการเปิดเป็นการให้สิทธิ์เซสชัน ASP.NET ปัจจุบันเข้าถึงหน้าของมัน. คอนโทรลเลอร์ MVC และหน้า Web Forms มีสถานะเซสชันโดยค่าเริ่มต้น. IHttpHandler ที่กำหนดเองจะไม่มี, เว้นแต่จะทำการ implement System.Web.SessionState.IRequiresSessionState. หากเปิดเอกสารจาก handler โดยไม่มีสถานะเซสชัน, ตัวดูจะแสดงข้อความ "You Are Not Authorized To View This Page." ในทุกหน้า.

ใน Web Forms, หน้าเองสามารถเปิดเอกสารใน code-behind ของมันได้. OpenDocument เป็นรูปแบบ synchronous ของ OpenDocumentAsync, ใช้สำหรับ code-behind ที่ไม่ใช้หน้าแบบ asynchronous:

csharp
// Default.aspx.cs
protected string Token;

protected void Page_Load(object sender, EventArgs e)
{
    var viewer = Doconut.DoconutHost.Services.GetRequiredService<Viewer>();
    Token = viewer.OpenDocument(Server.MapPath("~/files/Sample.pdf"));
}

ปฏิบัติโทเค็นเหมือนข้อมูลประจำตัวแบบ bearer: อย่าบันทึกหรือเก็บไว้; ให้เฉพาะกับวิดเจ็ตเท่านั้น. มันจะหยุดทำงานเมื่อเซสชันของเอกสารหมดอายุ — เปิดเอกสารใหม่เพื่อรับโทเค็นใหม่.

อ้างอิงทรัพยากรของ viewer

Viewer.ReferenceCss และ Viewer.ReferenceScripts จะสร้างแท็ก <link> และ <script> สำหรับทรัพยากรที่ฝังอยู่ตามลำดับการขึ้นต่อกัน โดยชี้ไปที่ /doconut-res/ วิดเจ็ตเป็นปลั๊กอิน jQuery ดังนั้น jQuery จะต้องโหลดก่อน

MVC 5. Views ไม่มี @inject ดังนั้นให้สร้างแท็กเหล่านั้นใน controller แล้วส่งผ่านไปยัง ViewBag:

csharp
public ActionResult Index()
{
    var viewer = Doconut.DoconutHost.Services.GetRequiredService<Viewer>();
    ViewBag.ViewerCss = viewer.ReferenceCss(new CssConfig
    {
        IncludeBootstrapCss = true,
        IncludeViewerCss    = true
    });
    ViewBag.ViewerScripts = viewer.ReferenceScripts(new ScriptConfig
    {
        IncludeJQuery        = true,
        IncludeBootstrap     = true,
        IncludeViewerScripts = true
    });
    return View();
}
html
@Html.Raw(ViewBag.ViewerCss)
...
@Html.Raw(ViewBag.ViewerScripts)

ให้ทำงานนี้อยู่ใน controller เท่านั้น MVC 5 จะคอมไพล์ view เมื่อมีการเรียกครั้งแรก และหากไม่มีแพคเกจคอมไพเลอร์เพิ่มเติม คอมไพเลอร์นั้นจะเข้าใจเฉพาะ C# 5 เท่านั้น — ไม่รองรับ ?. ไม่รองรับ $"..." ไม่รองรับ nameof view ที่ใช้คุณลักษณะเหล่านี้จะคอมไพล์ได้อย่างสะอาดใน Visual Studio แต่ในเบราว์เซอร์จะตอบกลับเป็น 500 ว่างเปล่า

Web Forms. เปิดเผยสตริงเดียวกันจาก code‑behind แล้วเขียนออกด้วย <%= %>:

html
<head>
    <%= ViewerCss %>
</head>
<body>
    ...
    <%= ViewerScripts %>
</body>

IncludeViewerCss และ IncludeViewerScripts เป็นส่วนสำคัญที่ต้องมี หากต้องการเพิ่มริบบิ้น Search และ Annotation ให้ตั้งค่า IncludeSearchCss, IncludeAnnotationCss, IncludeSearchScripts, IncludeSearchBar, IncludeAnnotationScripts และ IncludeAnnotationBar ด้วย ทั้งสองวิธีจะละเว้นไฟล์ของริบบิ้นเมื่อใบอนุญาตไม่ได้ให้สิทธิ์นั้น; viewer เองยังคงทำงานต่อไป

เพิ่ม viewer ลงในหน้า

พื้นผิวการเรนเดอร์ประกอบด้วย div ซ้อนกันสองชั้น:

html
<div id="divDocViewer">
    <div id="div_ctlDoc"></div>
</div>

กำหนดความสูงที่แท้จริงให้กับ div ชั้นนอก — viewer จะเติมเต็มคอนเทนเนอร์และวัดขนาดเมื่อเริ่มทำงาน viewer ไม่ได้วาดแถบเครื่องมือของตนเอง: GotoPage, Next, Zoom, FitType และอื่น ๆ เป็นเมธอดที่หน้าของคุณต้องผูกกับปุ่มของคุณเอง ซึ่งวางอยู่ข้าง ๆ viewer:

html
<nav id="toolbar" aria-label="Document viewer controls">
    <button type="button" onclick="objViewer.GotoPage(1)">First</button>
    <button type="button" onclick="objViewer.Next(false)">Previous</button>
    <button type="button" onclick="objViewer.Next(true)">Next</button>
    <button type="button" onclick="objViewer.Zoom(false)">Zoom out</button>
    <button type="button" onclick="objViewer.Zoom(true)">Zoom in</button>
    <button type="button" onclick="objViewer.FitType('width')">Fit width</button>
</nav>

เริ่มต้น viewer และแสดงเอกสาร

หลังจากโหลดสคริปต์ของ viewer แล้ว ให้สร้างวิดเจ็ตและส่ง token ให้มัน:

javascript
var objViewer = $('#div_ctlDoc').docViewer({
    showThumbs: true,
    autoLoad:   false,
    pageZoom:   100,
    FitType:    'width',
    BasePath:   '/',                   // '/' หมายถึง DocImage.axd ที่รูทของไซต์
    ResPath:    'doconut-res/images',  // ไม่มี '/' ข้างหน้า
    onViewerReady: function () {
        // หน้าแสดงผลแล้ว; ซ่อนตัวบ่งชี้การโหลดที่นี่
    },
    onError: function (message) {
        console.error('Doconut viewer error:', message);
    }
});

fetch('/Document/Open', { method: 'POST' })
    .then(function (resp) { return resp.json(); })
    .then(function (data) { objViewer.View(data.token); });

ใน Web Forms ที่หน้าต่างเปิดเอกสารเอง บรรทัดสุดท้ายสามบรรทัดจะเปลี่ยนเป็น objViewer.View('<%= Token %>');.

รายละเอียดสี่ประการต่อไปนี้จะทำให้เกิดความล้มเหลวโดยไม่มีข้อความแสดงข้อผิดพลาด:

  • BasePath: '/' ชี้ไปที่ DocImage.axd ที่รูทของไซต์ หากแอปพลิเคชันอยู่ในไดเรกทอรีเสมือน ให้ใช้ชื่อไดเรกทอรีโดยไม่มีเครื่องหมายสแลช ('myapp' จะทำให้ร้องขอ /myapp/DocImage.axd) เครื่องหมายสแลชนำหน้า ('/myapp') จะทำให้ได้ //myapp/DocImage.axd ซึ่งเบราว์เซอร์จะตีความเป็นการร้องขอไปยังโฮสต์อื่น
  • ResPath: 'doconut-res/images' — ไอคอนอยู่หนึ่งโฟลเดอร์ใต้รูทของทรัพยากร หากใช้ 'doconut-res' ทุกไอคอนจะคืนค่า 404: ไม่มีไอคอนบนแถบเครื่องมือและไม่มีสปินเนอร์โหลด แม้ว่าเอกสารเองจะยังคงแสดงผลได้ การใส่สแลชนำหน้าจะทำให้เกิดปัญหาเดียวกับ BasePath
  • Callbacks เป็น options onViewerReady, onError และอื่น ๆ ต้องอยู่ในอ็อบเจกต์ที่ส่งให้ docViewer(...) ฟังก์ชันระดับโลกที่มีชื่อเดียวกับ viewer เช่น ctlDoc_ViewerReady จะไม่ถูกเรียก
  • เก็บ viewer ไว้ก่อน แล้วเรียก View แยกต่างหาก docViewer(...) คืนอ็อบเจกต์ที่มี Zoom, Next และ FitType; View(...) คืนค่าอื่น ๆ การเขียนเป็น var objViewer = $('#div_ctlDoc').docViewer({...}).View(token) จะทำให้เอกสารถูกเรนเดอร์แล้วแต่จะล้มเหลวด้วยข้อผิดพลาด objViewer.Zoom is not a function เมื่อคลิกแถบเครื่องมือเป็นครั้งแรก

ชื่อ option ผสมระหว่าง camelCase (showThumbs, autoLoad, pageZoom) กับ PascalCase (FitType, BasePath, ResPath) หากสะกด option ผิดจะถูกละเว้นและวิดเจ็ตจะใช้ค่าเริ่มต้นของมันเอง.

ตัวเลือกบรรทัดเดียว

สำหรับหน้าที่ต้องการแสดงเอกสารเท่านั้น โดยไม่มีแถบเครื่องมือของคุณเอง Viewer.RenderViewer จะเขียนสคริปต์การเริ่มต้นทั้งหมด — docViewer(...) พร้อม BasePath: '/' และ ResPath: 'doconut-res/images' จากนั้น .View(token) มันมีอยู่เฉพาะในแพ็กเกจนี้:

csharp
// Web Forms code-behind, after opening the document
ViewerInit = viewer.RenderViewer("div_ctlDoc", Token);
html
<div id="div_ctlDoc" style="height: 100vh"></div>
<%= ViewerScripts %>
<%= ViewerInit %>

ส่ง ViewerConfig เป็นอาร์กิวเมนต์ที่สามเพื่อเปลี่ยนการซูม, การปรับให้พอดี, หรือแผงรูปย่อ เนื่องจากสคริปต์ที่สร้างขึ้นไม่มีการอ้างอิงถึง viewer, ให้ใช้การเริ่มต้นที่เขียนด้วยมือข้างต้นเมื่อหน้าของคุณต้องการแถบเครื่องมือของตนเอง.

ปิดเอกสาร

เรียก objViewer.Close(true) เมื่อผู้ใช้ออกจาก viewer หรือเปิดเอกสารทดแทน: มันจะล้างวิดเจ็ตและส่งคำขอปิดไปยัง DocImage.axd. objViewer.Close() โดยไม่มีอาร์กิวเมนต์จะล้างเฉพาะวิดเจ็ตเท่านั้น. บนเซิร์ฟเวอร์, viewer.CloseDocument(token) จะลบเซสชันเอกสารทันที, ปล่อยทรัพยากรการเรนเดอร์, และถอนการเข้าถึงหน้าต่างๆ ของเซสชัน. การหมดอายุแบบเลื่อนจะทำเช่นเดียวกันในที่สุด, แต่การปิดเอกสารขนาดใหญ่โดยชัดเจนจะปลดปล่อยหน่วยความจำเร็วขึ้น.

รันมัน

วางไฟล์ PDF ที่ ~/files/Sample.pdf, เริ่มเว็บไซต์ใน IIS Express (F5 ใน Visual Studio), แล้วเปิดหน้าที่โฮสต์วิดเจ็ต. หน้าแรกจะถูกเรนเดอร์พร้อมรูปย่อทางด้านซ้าย. หากไม่เป็นเช่นนั้น, ดูที่ การแก้ไขปัญหา.

สิ่งที่คุณจะได้รับโดยไม่มีใบอนุญาต

การไม่มีใบอนุญาตจะไม่ทำให้เกิดข้อผิดพลาด. viewer จะเรนเดอร์ตามปกติ, แต่ทุกหน้าจะมีลายน้ำการประเมินผล. ดูที่ การตั้งค่าใบอนุญาต เพื่อดูว่าที่ไหน Doconut มองหาใบอนุญาตของคุณ.

หน้านี้เป็นประโยชน์หรือไม่?