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

在Web应用开发中,经常需要实现PDF文件的加载和显示功能。本文将为您介绍如何在ASP.NET Core中实现这一功能,以便用户可以在Web应用中查看和浏览PDF文件。

发布于 2023/12/22 17:01

前言

在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 文件并在客户端加载和编辑它。如果您想了解更多的资料,欢迎参考这篇技术文档

关于葡萄城

葡萄城是专业的软件开发技术和低代码平台提供商,以“赋能开发者”为使命,致力于通过表格控件、低代码和BI等各类软件开发工具和服务,一站式满足开发者需求,帮助企业提升开发效率并创新开发模式。葡萄城开发技术始于1980年,40余年来始终聚焦软件开发技术,有深厚的技术积累和丰富的产品线。是业界能够同时赋能软件开发和低代码开发的企业。凭借过硬的产品能力、活跃的用户社区和丰富的伙伴生态,与超过3000家合作伙伴紧密合作,产品广泛应用于信息和软件服务、制造、交通运输、建筑、金融、能源、教育、公共管理等支柱产业。

推荐相关案例
推荐相关资源
关注微信
葡萄城社区二维码

关注“葡萄城社区”

活字格低代码二维码

关注“活字格低代码”

想了解更多信息,请联系我们, 随时掌握技术资源和产品动态