Aspose.PDF 编辑器

什么是 Aspose.PDF for .NET 的 Html5 PDF 编辑器？

Aspose.PDF for .NET 的 HTML5 PDF 编辑器是一个开源的基于网络的 PDF 编辑器，允许用户在线创建、编辑和转换 PDF 文件，用户可以轻松地将编辑器嵌入到自己的网络应用程序中以查看和编辑 PDF 文件。HTML5 PDF 编辑器是使用 HTML5、jQuery Ajax、ASP.NET、Bootstrap 开发的，后端由 Aspose.PDF for .NET 提供支持。编辑器的用户界面保持非常简单，以便于理解并根据用户需求增强功能。

Image

特性

它支持以下功能：

  • 创建新的 PDF 文件。
  • 加载和查看 PDF 文件。
  • 从 Dropbox 加载 PDF 和图像文件。
  • 将 PDF 文件导出为不同的文件格式。
  • 附加或合并 PDF 文件。
  • 插入新页面。
  • 删除页面。
  • 在 PDF 文件中移动页面。
  • 在 PDF 中插入文本。
  • 在 PDF 中突出显示文本。
  • 旋转插入的文本。
  • 在 PDF 中搜索文本。
  • 替换 PDF 中的文本。
  • 插入图像。
  • 调整签名和图像的大小。
  • 拖动和定位插入的项目。
  • 加载带表单字段的 PDF 文件。
  • 使用编辑器填写表单字段。
  • 保存和导出带表单字段数据的 PDF。
  • 突出显示所需的表单字段。
  • 向 PDF 文件添加附件。
  • 从输入 PDF 文件加载附件。
  • 下载附件文件。
  • 删除附件文件。
  • 使用手绘签名 PDF。

系统要求

由于 HTML5 PDF 编辑器是一个使用 ASP.NET、C#、HTML5、jQuery、Javascript 开发的 .NET Web 应用程序，您需要以下系统环境来设置 HTML5 PDF 编辑器。

  • Visual Studio 2010（或更高版本）。
  • .NET Framework 3.5（或更高版本）。
  • Aspose.PDF for .NET。
  • jQuery 2.0.3。
  • Bootstrap 3.2.0。

您可以使用以下任一浏览器在您的计算机上运行该应用程序：

  • Mozilla Firefox（推荐）。
  • Internet Explorer（版本 9 或更高）。
  • Google Chrome。
  • Apple Safari。

支持

我们在 Aspose 确保为客户/用户提供尽可能好的支持，以解决他们的任何性质的查询，即技术或销售。请使用以下链接进行任何与许可证和销售相关或技术查询。

PDF 编辑器开发者指南

创建新 PDF 文件

除了编辑现有的 PDF 文档外，Html5 PDF 编辑器还支持从头创建新的 PDF 文件，您可以通过使用菜单栏中的“创建新文件”选项来完成此操作。使用此功能，您可以在编辑器中创建一个空白 PDF，添加一些文本/图像并以任何所需格式保存。在下一部分中，我们将讨论此功能背后的技术细节。

HTML - 点击页面上的“创建新文件”菜单项

当您点击“创建新文件”菜单项时，将调用 Editor.js 文件中的 onNewFileClicked 方法。

jQuery - 向服务器发送 Ajax 请求以调用 CreateNewFile 方法。

请参见下面的 Editor.js 选项卡以获取 onNewFileClicked 方法的源代码，它调用 CanvasSave.aspx.cs 文件中的 CreateNewFile 方法。

ASP.NET Web 方法处理服务器请求

请参见下面的 Canvas.aspx.cs 选项卡，查看 CreateNewFile 方法的源代码。它使用 ResetData 方法清除有关先前加载文件的任何现有数据。

使用 Aspose.PDF for .NET 创建新 PDF 文件

在使用 ResetData 方法清除数据后，CreateNewFile 方法使用 Aspose.PDF for .NET 的 Document 类创建一个新的 PDF 文件。 如您在下面的选项卡中所见，Document 对象正在生成一个带有一个空白页面的文件。在服务器上生成文件后，文件使用 ImageConverter 方法转换为图像，以便加载到画布上。

将结果文件加载到画布。

在文件在服务器端转换为图像后，控制权返回到 Editor.js 中的 onNewFileClicked 方法。onNewFileClicked 方法重置所有客户端集合，并使用 resetData 方法将生成的图像文件加载到画布上。

将 PDF 导出为不同的文件格式

HTML5 PDF 编辑器支持将 PDF 文件导出为不同的文件格式，您可以通过使用菜单栏中的“导出文件”选项来完成此操作。使用此功能，您可以将 PDF 文件导出为所需的格式。在下一部分中，我们将讨论此功能背后的技术细节。

HTML - 点击页面上的“导出文件”菜单项。

当您点击“导出文件”菜单项时，您可以从列表中选择导出格式。选择导出格式后，将在 Editor.js 文件中调用“ExportFile”方法。

jQuery - 向服务器发送 Ajax 请求以调用 btnFileExport_Click 方法

请参见下面的 Editor.js 选项卡以获取“ExportFile”方法的源代码。它向服务器方法 btnFileExport_Click 发送请求，并在 CanvasSave.aspx.cs 文件中传递文件格式参数。

ASP.NET Web 方法处理服务器请求

请参见下面的 Canvas.aspx.cs 选项卡。根据传递给 btnFileExport_Click 的文件格式参数，使用 Aspose.PDF Document 对象的 Save 方法转换 PDF 文件。

将导出文件下载到客户端浏览器

在服务器上生成文件后，控制权返回到 Editor.js 中的 ExportFile 方法，从那里将文件发送到浏览器供用户下载，使用 ExportToBrowser 方法。

附加或合并 PDF 文件

Html5 PDF 编辑器支持附加或合并 PDF 文件，您可以通过使用菜单栏中的“附加文件”选项来完成此操作。使用此功能，您可以将 PDF 文件附加到输入文件。在下一部分中，我们将讨论此功能背后的技术细节。

HTML - 点击页面上的“附加文件”菜单项。

当您点击“附加文件”菜单项时，您可以使用文件上传对话框上传文件。文件上传后，将在 Editor.js 文件中调用“fileSelected”方法。

jQuery - 向服务器发送请求以调用 ProcessRequest 方法

请参见下面的 Editor.js 选项卡以获取“fileSelected”方法的源代码。文件被发布到服务器，并在 CanvasSave.aspx.cs 文件中调用“ProcessRequest”方法。

ASP.NET Web 方法处理服务器请求

请参见下面的 Canvas.aspx.cs 选项卡。根据传递的表单参数，待附加的文件被保存在服务器上，并调用“AppendFile”方法。AppendFile 方法使用 Aspose.PDF for .NET 附加上传的文件，将结果文件转换为图像并将控制权返回到 Editor.js 中的“fileSelected”方法。

在附加文件后更新画布内容

在服务器上生成文件后，控制权返回到 Editor.js 中的“fileSelected”方法，该方法更新编辑器的内容。

上传本地 PDF 文件

HTML5 PDF 编辑器支持使用菜单栏中的“从计算机打开”选项从本地计算机上传 PDF 文件。使用此功能，您可以打开现有的 PDF 文件并对其进行编辑。在下一部分中，我们将讨论此功能背后的技术细节。

HTML - 点击页面上的“从计算机打开”菜单项。

当您点击“从计算机打开”菜单项时，您可以使用文件上传对话框上传输入文件。文件上传后，将在 Editor.js 文件中调用“fileSelected”方法。

jQuery - 向服务器发送请求以调用 ProcessRequest 方法

请参见下面的 Editor.js 选项卡以获取“fileSelected”方法的源代码。文件被发布到服务器，并在 CanvasSave.aspx.cs 文件中调用“ProcessRequest”方法。

ASP.NET Web 方法处理服务器请求

请参见下面的 Canvas.aspx.cs 选项卡。根据传递的表单参数，待上传的文件被保存在服务器上，使用“ResetData”方法重置数据，并调用“ImageConverter”方法。ImageConverter 方法使用 Aspose.PDF for .NET 将上传的文件转换为图像，并将控制权返回到 Editor.js 中的“fileSelected”方法。

在上传文件后更新画布内容

在服务器上生成文件后，控制权返回到 Editor.js 中的“fileSelected”方法，该方法更新编辑器的内容，即重置画布，加载新上传的文件。

在 PDF 文件中添加页面

使用 Html5 PDF 编辑器，您可以使用菜单栏中的“添加页面”选项在 PDF 文件中添加新页面。使用此功能，您可以向 PDF 文件添加一个空白页面。在下一部分中，我们将讨论此功能背后的技术细节。

HTML - 点击页面上的“添加页面”菜单项

当您点击“添加页面”菜单项时，将在 Editor.js 文件中调用“AddPage”方法。

jQuery - 向服务器发送 Ajax 请求以调用 AddPage_Click 方法。

请参见下面的 Editor.js 选项卡以获取 AddPage 方法的源代码，它调用 CanvasSave.aspx.cs 文件中的 AddPage_Click 方法。

ASP.NET Web 方法处理服务器请求

请参见下面的 Canvas.aspx.cs 选项卡，查看 AddPage_Click 方法的源代码。它使用 Aspose.Pdf.Document 类在 PDF 文件中添加一个新的空白页面。添加页面后，它将页面转换为图像以在编辑器中显示。然后控制权返回到 Editor.js 文件，该文件在 AddPage 方法中更新页面编号。

从 PDF 文件中删除页面

使用 Html5 PDF 编辑器，您可以使用菜单栏中的“删除页面”选项从 PDF 文件中删除页面。在下一部分中，我们将讨论此功能背后的技术细节。

HTML - 点击页面上的“删除页面”菜单项

当您点击“删除页面”菜单项时，将在 Editor.js 文件中调用 DeletePage 方法。

jQuery - 向服务器发送 Ajax 请求以调用 DeletePage_Click 方法。

请参见下面的 Editor.js 选项卡以获取 DeletePage 方法的源代码，它调用 CanvasSave.aspx.cs 文件中的 DeletePage_Click 方法。

ASP.NET Web 方法处理服务器请求

请参见下面的 Canvas.aspx.cs 选项卡，查看 DeletePage_Click 方法的源代码。它使用 Aspose.Pdf.Document.Page 集合的 Delete 方法从 PDF 文件中删除所选页面。

更新编辑内容

在从 PDF 文件中删除页面后，控制权返回到 Editor.js 文件中的 DeletePage 方法，该方法更新页面编号，使用 updateIndexesDelete 方法删除与已删除页面相关的任何集合。

在 PDF 文件中移动页面

使用 Html5 PDF 编辑器，您可以使用菜单栏中的“移动页面”选项在 PDF 文件中移动页面。一旦您按下移动页面菜单项，将出现一个输入对话框以指定所选页面的新位置。在下一部分中，我们将讨论此功能背后的技术细节。

HTML - 点击页面上的“移动页面”菜单项

当您点击“移动页面”菜单项时，将显示输入对话框以获取所选页面的新位置。在提供页面编号并按下“移动”按钮后，将在 Editor.js 文件中调用“Move”方法。

jQuery - 向服务器发送 Ajax 请求以调用 MovePages 方法。

请参见下面的 Editor.js 选项卡以获取 Move 方法的源代码，该方法调用 MovePage 方法，并将移动的详细信息（如移动自、移动到、页面列表）传递给 CanvasSave.aspx.cs 文件中的 MovePages 方法。

ASP.NET Web 方法处理服务器请求

请参见下面的 Canvas.aspx.cs 选项卡，查看 MovePages 方法的源代码。它使用 Aspose.Pdf.Document.Pages 集合来移动页面。

更新编辑内容

在移动页面后，控制权返回到 Editor.js 文件中的 MovePage 方法，该方法使用 MoveUpdate 方法更新页面索引和与编辑器中不同集合相关的信息。

在 PDF 文件中插入文本

使用 Html5 PDF 编辑器，您可以使用菜单栏中的“文本模式”选项在 PDF 文件中插入文本。一旦您选择文本模式菜单项并单击编辑器中要添加文本的任何位置，将出现一个输入对话框以输入和格式化所需的文本，如下所示：

在下一部分中，我们将讨论此功能背后的技术细节。

HTML - 点击页面上的“文本模式”菜单项

当您选择“文本模式”菜单项并单击编辑器中要在 PDF 文件中插入文本的所需位置时，将显示输入对话框以获取您需要插入的文本。在提供文本并按下“确定”按钮后，将在 Editor.js 文件中调用“saveTextFromArea”方法。

Javascript - 从输入对话框获取输入文本并在编辑器上显示。

请参见下面的 Editor.js 选项卡以获取 saveTextFromArea 方法的源代码，该方法从输入对话框获取文本并在编辑器上显示。同时，它将数据保存在形状集合中，稍后在服务器端用于在 PDF 文件中插入文本。您可以查看 saveFile 方法的源代码，该方法在文件保存时被调用。

ASP.NET Web 方法处理服务器请求

如上所述，当我们执行保存操作时，文本实际上会插入到我们的源 PDF 文件中，该操作使用 GetTextStamp 方法创建文本印章以插入 PDF 文件。请参见下面的 Canvas.aspx.cs 选项卡，查看 GetTextStamp 方法的源代码。它使用 Aspose.Pdf.TextStamp 类在 PDF 文件中插入文本。

在 PDF 文件中突出显示文本

使用 Html5 PDF 编辑器，您可以使用菜单栏中的“突出显示模式”选项在 PDF 文件中突出显示文本。一旦您选择突出显示模式菜单项，您可以使用矩形突出显示工具突出显示任何文本和区域。在下一部分中，我们将讨论此功能背后的技术细节。

HTML - 点击页面上的“突出显示模式”菜单项

当您选择“突出显示模式”菜单项时，您可以在 PDF 文件中的任何文本或项目周围绘制一个矩形突出显示。此过程的实现可以在 Editor.js 文件中的“tools.rect”方法中看到。

Javascript - 在编辑器上绘制突出显示矩形。

请参见下面的 Editor.js 选项卡以获取 tool.rect 方法的源代码，该方法允许用户在编辑器的任何位置绘制突出显示矩形。同时，它将数据保存在形状集合中，稍后在服务器端用于在源 PDF 文件中插入突出显示。您可以查看 saveFile 方法的源代码，该方法在文件保存时被调用。

ASP.NET Web 方法处理服务器请求

如上所述，突出显示实际上会在我们执行保存操作时插入到我们的源 PDF 文件中，该操作使用 GetImageStamp 方法在源 PDF 文件中插入图像印章，位置在编辑器上指定。请参见下面的 Canvas.aspx.cs 选项卡，查看 GetImageStamp 方法的源代码。它使用 Aspose.Pdf.ImageStamp 类在 PDF 文件中插入突出显示矩形。

在 PDF 文件中搜索文本

使用 Html5 PDF 编辑器，您可以使用菜单栏中的“搜索文本”选项在 PDF 文件中搜索文本。一旦您点击搜索文本菜单项，将出现一个对话框以输入要搜索的文本，如下所示：

在提供文本并按下搜索后，所有搜索到的单词实例将被突出显示，如下所示：

HTML - 点击页面上的“搜索文本”菜单项

当您点击“搜索文本”菜单项时，将出现一个输入对话框以输入您想要搜索的文本。在输入文本并按下搜索按钮后，将调用“Move”方法，该方法检查是执行移动页面操作还是执行搜索操作，然后调用 Editor.js 文件中的 performSearch 方法。

jQuery - 向服务器发送 Ajax 请求以调用 SearchData 方法

请参见下面的 Editor.js 选项卡以获取 performSearch 方法的源代码，该方法获取输入文本并请求服务器方法 SearchData 在 CanvasSave.aspx.cs 文件中。

ASP.NET Web 方法处理服务器请求

请参见 Canvas.aspx.cs 选项卡。使用从 performSearch 方法传递的输入文本，SearchData 方法使用 Aspose.Pdf.Text.TextFragmentAbsorber 类搜索我们源 PDF 文件中输入文本的所有实例，并使用 System.Drawing.Brush 类在搜索到的文本上绘制突出显示。一旦数据被搜索，结果文件将再次转换为图像并加载到编辑器中。

在 PDF 文件中替换文本

使用 Html5 PDF 编辑器，您可以使用菜单栏中的“替换文本”选项替换 PDF 文件中的现有文本。一旦您点击替换文本菜单项，将出现一个对话框以输入要搜索和替换的文本。

HTML - 点击页面上的“替换文本”菜单项

当您点击“替换文本”菜单项时，将出现一个输入对话框以输入要搜索和替换的文本。在输入文本并按下替换按钮后，将在 Editor.js 文件中调用“ReplaceText”方法。

jQuery - 向服务器发送 Ajax 请求以调用 ReplaceText 方法

请参见下面的 Editor.js 选项卡以获取 ReplaceText 方法的源代码，该方法从输入文本对话框获取输入文本，并请求服务器方法 ReplaceText 在 CanvasSave.aspx.cs 文件中。

ASP.NET Web 方法处理服务器请求

请参见下面的 Canvas.aspx.cs 选项卡。ReplaceText 方法使用 Aspose.Pdf.Text.TextFragmentAbsorber 类搜索我们源 PDF 文件中所有要替换的文本实例，并用替换文本替换所有实例。一旦文本被替换，结果文件将再次转换为图像并加载到编辑器中。

加载带表单字段的 PDF 文件

使用 Html5 PDF 编辑器，您可以加载和处理包含表单字段的 PDF 文件。一旦带表单字段的文件在编辑器中加载，所有表单字段将被加载以进行编辑。在下一部分中，我们将讨论此功能背后的技术细节。

HTML - 点击页面上的“从计算机打开”菜单项。

当您点击“从计算机打开”菜单项时，您可以使用文件上传对话框上传包含表单字段的输入文件。文件上传后，将在 Editor.js 文件中调用“fileSelected”方法。

jQuery - 向服务器发送请求以调用 ProcessRequest 方法

文件被发布到服务器，并在 CanvasSave.aspx.cs 文件中调用“ProcessRequest”方法。

ASP.NET Web 方法处理服务器请求

请参见下面的 Canvas.aspx.cs 选项卡。根据传递的表单参数，待上传的文件被保存在服务器上，ImageConverter 方法将上传的文件转换为图像，并调用“CheckFields”方法，该方法使用 Aspose.Pdf.InteractiveFeatures.Forms 类检查所有表单字段并收集有关字段的信息，即 FieldType、Location 等，并将字段的集合返回给 ImageConverter 方法。ImageConverter 方法将控制权返回到 Editor.js 中的“fileSelected”方法。

在画布上加载表单字段

请参见下面的 Editor.js 选项卡，Editor.js 中的 manageFields 方法用于根据从服务器端发送回的信息生成所有字段。它使用来自服务器端的类型和位置信息在画布上绘制 HTML 字段控件。

突出显示所需的表单字段

使用 Html5 PDF 编辑器，您可以在编辑器中突出显示所需的表单字段。一旦带表单字段的文件在编辑器中加载，所有所需的表单字段将被突出显示，以帮助用户进行编辑。在下一部分中，我们将讨论此功能背后的技术细节。

HTML - 点击页面上的“从计算机打开”菜单项。

当您点击“从计算机打开”菜单项时，您可以使用文件上传对话框上传包含表单字段的输入文件。文件上传后，将在 Editor.js 文件中调用“fileSelected”方法。

jQuery - 向服务器发送请求以调用 ProcessRequest 方法

文件被发布到服务器，并在 CanvasSave.aspx.cs 文件中调用“ProcessRequest”方法。

ASP.NET Web 方法处理服务器请求

请参见下面的 Canvas.aspx.cs 选项卡。根据传递的表单参数，待上传的文件被保存在服务器上，ImageConverter 方法将上传的文件转换为图像，并调用“CheckFields”方法，该方法使用 Aspose.Pdf.InteractiveFeatures.Forms 类检查所有表单字段并收集有关字段的信息，即 FieldType、Location 等。在获取所有表单字段的详细信息后，我们使用 Aspose.Pdf.Facades.IsRequiredField 方法获取字段是否为所需表单字段的信息，并将字段的集合返回给 ImageConverter 方法。ImageConverter 方法将控制权返回到 Editor.js 中的“fileSelected”方法。

在画布上加载表单字段

请参见下面的 Editor.js 选项卡，Editor.js 中的 manageFields 方法用于根据从服务器端发送回的信息生成所有字段。它使用来自服务器端的类型和位置信息在画布上绘制 HTML 字段控件。如果某个字段是必需的，它会在控件周围使用 div（命名为 wrapper），并将 div 的背景颜色属性更改为显示为突出显示的必需字段。

将 WebForms DataGridView 渲染为 PDF