前言

在Web應(yīng)用開(kāi)發(fā)中，經(jīng)常需要實(shí)現(xiàn)PDF文件的加載和顯示功能。本文小編將為您介紹如何在ASP.NET Core中實(shí)現(xiàn)這一功能，以便用戶(hù)可以在Web應(yīng)用中查看和瀏覽PDF文件。

實(shí)現(xiàn)步驟

1）在服務(wù)器端創(chuàng)建PDF

1. 打開(kāi) Visual Studio 并創(chuàng)建新的 ASP. NET Core Web 應(yīng)用程序，小編這里項(xiàng)目名稱(chēng)為CreatePDF。

2. 選擇 .NET Core 6.0 作為項(xiàng)目的目標(biāo)框架。

3. 安裝依賴(lài)包：在“Solution Explorer中右鍵單擊該項(xiàng)目，然后選擇“Manage NuGet Packages”。在右上角的“Package source”中，進(jìn)行選擇。單擊左上角的“Browse ”選項(xiàng)卡并搜索“GrapeCity.Documents”，從左側(cè)面板中選擇 GrapeCity.Documents.Pdf，最后通過(guò)單擊右側(cè)面板中的“install”按鈕進(jìn)行安裝。

4. 打開(kāi)項(xiàng)目文件夾中“Pages”文件夾下的“ Index.cshtml.cs ”頁(yè)面。并在此文件中定義服務(wù)器端代碼以生成 PDF 文件，代碼如下所示：

//Define Environment variable to access web root folder
private IWebHostEnvironment Environment;

public IndexModel(ILogger<IndexModel> logger, IWebHostEnvironment _environment)
{
    _logger = logger;
    Environment = _environment;
    CreatePDF();
}

5. 接下來(lái)，對(duì)第4步的 CreatePDF()方法進(jìn)行詳細(xì)地編寫(xiě)：

public void CreatePDF()
{
   const int FontSize = 12;

   //Define an instance of GcPdfDocument
   var doc = new GcPdfDocument();

   //Add a new page 
   var page = doc.Pages.Add();
   var g = page.Graphics;

   //Initialize TextLayout to render text
   var tl = g.CreateTextLayout();
            
   //Add an image to PDF document
   var img = Image.FromFile(Path.Combine("Resources", "ImagesBis", "2020-website-gcdocs-headers_tall.png"));
   var rc = page.Bounds;
   rc.Height *= 0.65f;
   g.DrawImage(img, rc, null, ImageAlign.StretchImage);

   //Define text format settings
   var ip = new PointF(48, 72);

   var font = Font.FromFile(Path.Combine("Resources", "Fonts", "OpenSans-Regular.ttf"));            
   var tfCap = new TextFormat() { Font = font, FontSize = FontSize * 1.6f, ForeColor = Color.White };
   var tf = new TextFormat() { Font = font, FontSize = FontSize, ForeColor = Color.White };
   tl.MaxWidth = 72 * 5;

   // Add Header:
   tl.AppendLine("Fast, Efficient Document APIs for .NET 5 and Java Applications", tfCap);
   tl.AppendLine(tfCap);
   tl.AppendLine("Take total control of your documents with ultra-fast, low-footprint APIs for enterprise apps.", tf);
   tl.AppendLine(tf);
   g.DrawTextLayout(tl, ip);

   // Add Bullet list:
   ip.Y += tl.ContentHeight;
   tl.Clear();
   const string bullet = "\x2022\x2003";
   tl.FirstLineIndent = -g.MeasureString(bullet, tf).Width;
   tl.ParagraphSpacing += 4;

   tl.Append(bullet, tf);
   tl.AppendLine("Generate, load, edit, save XLSX spreadsheets, PDF, Images, and DOCX files using C# .NET, VB.NET, or Java", tf);
   tl.Append(bullet, tf);
   tl.AppendLine("View, edit, print, fill and submit documents in JavaScript PDF Viewer and PDF Editor.", tf);
   tl.Append(bullet, tf);
   tl.AppendLine("Compatible on Windows, macOS, and Linux", tf);
   tl.Append(bullet, tf);
   tl.AppendLine("No dependencies on Excel, Word, or Acrobat", tf);
   tl.Append(bullet, tf);
   tl.AppendLine("Deploy to a variety of cloud-based services, including Azure, AWS, and AWS Lambda", tf);
   tl.Append(bullet, tf);
   tl.AppendLine("Product available individually or as a bundle", tf);

   //Render text
   g.DrawTextLayout(tl, ip);

   //Save the document to web root folder
   doc.Save(Path.Combine(Environment.WebRootPath, "sample.pdf"));
}

實(shí)現(xiàn)效果如下所示（用Adobe打開(kāi)）：

2）加載和查看PDF

在實(shí)現(xiàn)步驟1）中，小編實(shí)現(xiàn)了如何新建一個(gè)PDF的過(guò)程，但是新建的PDF需要在Adobe中打開(kāi)，那么有沒(méi)有一種可以直接在瀏覽器中編輯和修改PDF的編輯器呢？答案是肯定的。接下來(lái)小編就將繼續(xù)為大家介紹一下如何使用JavaScript實(shí)現(xiàn)一個(gè)加載和修改PDF的編輯器的步驟：

1. 打開(kāi) Visual Studio 的“Package Manager Console”，選擇“Tools”→“NuGet Package Manager”→“Package Manager Console”，然后輸入以下指令：

npm install @grapecity/gcpdfviewer

2. 在Index.cshtml 文件中添加以下代碼：

<div id="root" style="height:600px;"></div>
<script src="~/node_modules/@@grapecity/gcpdfviewer/gcpdfviewer.js"></script>
<script>
    window.onload = function () {
        var viewer = new GcPdfViewer("#root", { /* Specify options here */ }
        );
        viewer.addDefaultPanels();
        viewer.open("sample.pdf");
    }
</script>

3. 實(shí)現(xiàn)效果：

4. 使用注釋編輯器添加注釋

在第3步實(shí)現(xiàn)的PDF編輯器中提供了一個(gè)注釋編輯器功能，用于在文檔中添加或刪除不同類(lèi)型的注釋?zhuān)缥谋咀⑨專(zhuān)瑘A圈注釋?zhuān)瑘D章注釋?zhuān)庉嬜⑨尩取Ｏ旅娴腉IF就是一個(gè)圓圈注釋的例子：

總結(jié)

上文小編總結(jié)了如何在服務(wù)器端創(chuàng)建 PDF 文件并在客戶(hù)端加載和編輯它。如果您想了解更多的資料，歡迎參考這篇技術(shù)文檔。

擴(kuò)展鏈接：

Redis從入門(mén)到實(shí)踐

一節(jié)課帶你搞懂?dāng)?shù)據(jù)庫(kù)事務(wù)！

Chrome開(kāi)發(fā)者工具使用教程

從表單驅(qū)動(dòng)到模型驅(qū)動(dòng)，解讀低代碼開(kāi)發(fā)平臺(tái)的發(fā)展趨勢(shì)

低代碼開(kāi)發(fā)平臺(tái)是什么？

基于分支的版本管理，幫助低代碼從項(xiàng)目交付走向定制化產(chǎn)品開(kāi)發(fā)