简便实用：在 ASP.NET Core 中实现 PDF 的加载与显示

前言

在Web运用开发中，常常需求完成PDF文件的加载和显现功用。本文小编将为您介绍如安在ASP.NET Core中完成这一功用，以便用户能够在Web运用中检查和浏览PDF文件。

完成进程

1）在服务器端创立PDF

翻开 Visual Studio 并创立新的 ASP. NET Core Web 运用程序，小编这儿项目名称为CreatePDF。

挑选 .NET Core 6.0 作为项目的方针结构。

装置依靠包：在“Solution Explorer中右键单击该项目，然后挑选“Manage NuGet Packages”。在右上角的“Package source”中，进行挑选。单击左上角的“Browse ”选项卡并搜索“GrapeCity.Documents”，从左边面板中挑选 **GrapeCity.Documents.Pdf，**最终通过单击右侧面板中的“install”按钮进行装置。

翻开项目文件夹中“**Pages”**文件夹下的“ Index.cshtml.cs ”页面。并在此文件中定义服务器端代码以生成 PDF 文件，代码如下所示：

//Define Environment variable to access web root folder
private IWebHostEnvironment Environment;
public IndexModel(ILogger<IndexModel> logger, IWebHostEnvironment _environment)
{
    _logger = logger;
    Environment = _environment;
    CreatePDF();
}

接下来，对第4步的 CreatePDF()办法进行具体地编写：

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 = "x2022x2003";
   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"));
}

完成作用如下所示（用Adobe翻开）：

2）加载和检查PDF

在完成进程1）中，小编完成了怎么新建一个PDF的进程，但是新建的PDF需求在Adobe中翻开，那么有没有一种能够直接在浏览器中编辑和修正PDF的编辑器呢？答案是肯定的。接下来小编就将持续为大家介绍一下怎么运用JavaScript完成一个加载和修正PDF的编辑器的进程：

翻开 Visual Studio 的“Package Manager Console”，挑选“Tools”→“NuGet Package Manager”→“Package Manager Console”，然后输入以下指令：

npm install @grapecity/gcpdfviewer

在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>