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="\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>

实现效果：

使用注释编辑器添加注释

在第3步实现的PDF编辑器中提供了一个注释编辑器功能，用于在文档中添加或删除不同类型的注释，例如文本注释，圆圈注释，图章注释，编辑注释等。下面的GIF就是一个圆圈注释的例子：

总结

上文小编总结了如何在服务器端创建 PDF 文件并在客户端加载和编辑它。

绍

和往常一样，jsPDF是一个开源的客户端的PDF解决方案，在之前的文章中已经介绍过几个Web端和PDF相关的库，jsPDF同样是一个不错的客户端PDF引 SDK，你可以通过jsPDF在客户端完成相关操作，它包含了非常丰富的API，帮助你完成一系列的复杂操作！可以说它是相当领先的HTML5客户端解决方案了！

Github

https://github.com/MrRio/jsPDF

Github star数17k+,可以说相当受欢迎了！

安装使用

一般情况下我们会考虑使用包管理，常见的就是npm了，因此安装非常简单

npm install jspdf --save

或者也可以使用yarn

yarn add jspdf

接下来就是制作你的文件的时候了

默认导出为a4纸张，纵向，使用毫米表示单位

var doc=new jsPDF()
doc.text('Hello world!', 10, 10)
doc.save('a4.pdf')

如果要更改纸张尺寸，方向或单位，可以执行以下操作：

var doc=new jsPDF({
 orientation: 'landscape',
 unit: 'in',
 format: [4, 2]
})
doc.text('Hello world!', 1, 1)
doc.save('two-by-four.pdf')

使用UTF-8 / TTF

PDF中的14种标准字体仅限于ASCII代码页。如果要使用UTF-8，则必须集成自定义字体，该字体提供所需的字形。jsPDF支持.ttf文件。因此，如果你希望在pdf中使用中文文本，则您的字体必须具有必要的中文字形。因此，请检查您的字体是否支持所需的字形，否则它将显示空白而不是文本。

要将字体添加到jsPDF，在/fontconverter/fontconverter.html中使用官网提供的fontconverter。fontconverter将创建一个js文件，其中包含提供的ttf文件的内容作为base64编码的字符串和jsPDF的附加代码。你只需将生成的js-File添加到项目中即可。然后，就可以在代码中使用setFont-method并编写UTF-8编码文本。

Angular/Webpack/React等配置

常规操作

import * as jsPDF from 'jspdf'

有些框架，必须像下面这样

import jsPDF from 'jspdf';

API

jsPDF的api非常丰富，在这里就不提供相关地址了，在Github必然找的到，本文重点不在于介绍jsPDF的用法，将部分API截图展示，通过名称大致能猜到一些意思，具体用法需要参考官网文档：

从截图来看，其文档特别的详细，具体到每一个API在js文件的行数，便于阅读源代码，包括参数以及返回值都非常明确：

在线DEMO

官方提供了一个在线demo，可以直接运行代码，感兴趣的可以先尝试一下：

总结

jsPDF是笔者见过类似产品中较为突出的，几乎涵盖了所有PDF相关操作，非常详细的文档也让开发者，轻松上手，在线demo还能快速学习，如果你的项目对PDF的操作比较多，不妨尝试下jsPDF，唯一需要注意的就是解决字体问题，但是上文也提到过解决方案，感兴趣的可以进行体验！

言

PDF文件现在在许多企业中常用 - 无论您是要生成销售报告，交付合同还是发送发票，PDF都是首选的文件类型。PDF.js是由Mozilla编写的JavaScript库。由于它使用vanilla JavaScript实现PDF渲染，因此它具有跨浏览器兼容性，并且不需要安装其他插件。在使用PDFJS之前你也可以先了解下原生的PDF<object>对象，本文仅介绍PDFJS。

官网地址

https://mozilla.github.io/pdf.js/

下载和安装

官网提供了下载入口,有稳定版和Beta版,我们要在生产环境下使用建议使用稳定版,官网给我们提供了三种获取PDF.js的方式

使用说明

我们可以直接使用cdn服务，也可以将下载的文件引入，我们看一下示例代码，这里我提供了两种写法，在项目运行之前，请确保你的同级目录下有一个test.pdf文件

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.min.js"></script>
 <script src='./index.js'></script>
 <title>PDF</title>
</head>
<body>
 <canvas id="pdf"></canvas>
</body>
</html>
//index.js
// var loadingTask=pdfjsLib.getDocument("test.pdf");
// loadingTask.promise.then(
// function(pdf) {
// // 加载第一页
// pdf.getPage(1).then(function(page) {
// var scale=1;
// var viewport=page.getViewport(scale);
// //应用到页面的canvas上.
// var canvas=document.getElementById("pdf");
// var context=canvas.getContext("2d");
// canvas.height=viewport.height;
// canvas.width=viewport.width;
// // 渲染canvas.
// var renderContext={
// canvasContext: context,
// viewport: viewport
// };
// page.render(renderContext).then(function() {
// console.log("Page rendered!");
// });
// });
// },
// function(reason) {
// console.error(reason);
// }
// );
// index.js
(async ()=> {
 const loadingTask=pdfjsLib.getDocument("test.pdf");
 const pdf=await loadingTask.promise;
 // 加载第一页.
 const page=await pdf.getPage(1);
 const scale=1;
 const viewport=page.getViewport(scale);
 // 应用到页面的canvas上.
 const canvas=document.getElementById("pdf");
 const context=canvas.getContext("2d");
 canvas.height=viewport.height;
 canvas.width=viewport.width;
 // 渲染canvas.
 const renderContext={
 canvasContext: context,
 viewport: viewport
 };
 await page.render(renderContext);
})();

当我们运行项目之后，打开浏览器查看，它已经将pdf的内容渲染到了浏览器中，且显示了第一页，如下图所示：

如果就这样的话远远是无法满足我们使用的，因此我们来看一下它比较高级的用法，或者说简单的用法，高级的功能。

使用iframe

首先我们将我们下载的js包加压，复制里面的web文件夹，粘贴到你的项目目录

然后修改你的index.html代码，首先注释掉之前引入的js代码，然后修改body，如下

<body>
 <iframe src="test.pdf" style="border: none;" width="100%" height='1000px'></iframe>
</body>

随后打开我们的浏览器，你会发现一个预览的窗口

它继承了我们常用的功能，比如旋转、下载、打印、自适应缩放、放大、缩小等，我们只需要使用iframe引入我们的pdf文件即可，其余的全部交给pdf来完成，即可获得一个实现一个完整的pdf预览功能。

PDF.js三个不同层

核心 - PDF的二进制格式在此层中进行解释。直接使用该层被认为是高级用法。
显示 - 该层构建在核心层之上，为大多数日常工作提供易于使用的界面。
Viewer - 除了提供编程API之外，PDF.js还附带一个现成的用户界面，其中包括对搜索，旋转，缩略图侧边栏和许多其他内容的支持。

PDFJS的这三层分开，让我们很好的来根据业务需求来实现我们想要的部分，其简单的api让我们得心应手，总而言之，PDFJS是一个绝佳的PDF预览解决方案。

总结

PDFJS不仅仅支持pdf的二进制文件，同样还支持base64编码的pdf，如果在你的项目中需要用到pdf的预览等功能，无疑它是一种良好的解决方案，当然想要实现相同的功能有许多办法，我们可以选择最适合我们需求的，官方还提供了一个完整的演示Demo，如下截图，如果你觉得本文对你有帮助，请麻烦转发、点赞加关注吧，后续会分享更多实用有趣的技术！

在线咨询

上一篇：PC端和移动端的图片滑动切换插件，你有用过吗？
下一篇：JavaScript 返回顶部实例

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商