前言
在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 = "\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"));
}
实现效果如下所示（用Adobe打开）：
2）加载和查看PDF
在实现步骤1）中，实现了如何新建一个PDF的过程，但是新建的PDF需要在Adobe中打开，那么有没有一种可以直接在浏览器中编辑和修改PDF的编辑器呢？答案是肯定的。接下来就将继续为大家介绍一下如何使用JavaScript实现一个加载和修改PDF的编辑器的步骤：
打开 Visual Studio 的“Terminal”，选择“views”→“Terminal”，然后输入以下指令：
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>
实现效果：
使用注释编辑器添加注释
在前面实现的PDF编辑器中提供了一个注释编辑器功能，用于在文档中添加或删除不同类型的注释，例如文本注释，圆圈注释，图章注释，编辑注释等。下面的GIF就是一个圆圈注释的例子：
总结
上文总结了如何在服务器端创建 PDF 文件并在客户端加载和编辑它。如果您想了解更多的资料，欢迎参考这篇技术文档。
关于葡萄城
赋能开发者！葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商，为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年，希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务，帮助开发者快速响应复杂多变的业务需求，最大程度地发挥开发者的才智和潜能，让开发者的 IT 人生更从容更美好。
了解详情，请访问葡萄城官网。
