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

作者：快乐非自愿限量之名

2024-01-09
福建
本文字数：2240 字
阅读完需：约 7 分钟

前言

在 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 folderprivate 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 的“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>

复制代码

实现效果：