1. 开发用于修改 PDF 文档的 Web 应用程序
  2. 开发 Web 应用程序

开发 Web 应用程序

开发 Web 应用程序需要完成以下任务：

  1. 创建 Visual Builder 应用程序。
  2. 创建新 Web 应用程序。
  3. 包括外部图书馆。
  4. 创建用户界面。
  5. 更新上载的 PDF 文档。
  6. 创建新的 PDF 文档。
  7. 下载 PDF 文件。

创建 Visual Builder 应用程序

Visual Builder 应用程序是用于开发 Web 和移动应用程序的资源集合。Visual Builder 应用程序在描述数据源和业务对象的 JSON 文件中包括元数据。它还包括 Web 和移动应用程序的 HTML 和 JavaScript 文件。

创建新的 Visual Builder 应用程序
  1. ：在“可视化应用程序”主页上，单击新建。
  2. 在“Create Application（创建应用程序）”对话框中，键入应用程序名称。系统会根据您提供的应用程序名称自动填充应用程序 ID 字段。
    • 如有必要，可以修改应用程序 ID，但 ID 在身份域中必须唯一。
    • 保留空应用程序的默认选择不变。此模板不创建任何构件、应用程序或其他资源。
  3. 单击完成。

    新的 Visual Builder 应用程序将在您创建后自动打开并显示“欢迎”屏幕。新应用程序将不包含任何构件，但向导默认情况下会创建应用程序的文件结构以及您将需要的一些资源和文件。

您可以使用“欢迎”屏幕帮助您确定要先创建哪些构件。单击“欢迎”屏幕中的任何磁贴可在导航器中打开其关联的面板，您可以在该面板上创建和管理构件。您可以添加多个 Web 和移动应用程序，所有这些应用程序都可以访问您在 Visual Builder 应用程序中公开的数据源、资源和服务。

创建新 Web 应用程序

Visual Builder 应用程序中的 Web 应用程序相互独立，但它们都可以使用应用程序中定义的数据源。

要在 Visual Builder 应用程序中创建新的 Web 应用程序，请执行以下操作：
  1. 单击导航器中的“Web 应用程序”图标以打开“Web 应用程序”窗格。
    “Web 应用程序”面板显示 Visual Builder 应用程序中每个 Web 应用程序的结构表示形式。如果尚未创建 Web 应用程序，则会在窗格中看到一条消息和一个 + Web 应用程序按钮。单击此项可打开“创建 Web 应用程序”向导。
  2. 单击导航器中的“Create Web Application（创建 Web 应用程序）”图标。
  3. 在“创建 Web 应用程序”向导的“一般信息”页上，指定要创建的 Web 应用程序的名称。您还可以从三种导航样式中进行选择：
    • 水平导航样式，具有三个导航项。
    • 垂直导航样式，可用于创建包含导航抽屉面板的根页，其中包含标题为头的标题、中间的导航项以及应用程序名称的页脚。
    • 一个页面流，其中包含为每个导航项生成的起始页。
    默认选择是“无”。
  4. 单击创建可创建和生成 Web 应用程序及其所有必要构件。

包括外部库

要生成、修改和下载 PDF 文档（如“开始之前”中所述），您需要包括两个外部库：pdf-lib 和 downloadj。

  • pdf-lib，管理 PDF 文档。
  • downloadj，下载已生成的 PDF 文档。
为此应用程序创建的构件可通过源图标访问。使用以下行在 index.html 文件中插入两个 librarie 的源： 
<script src="https://unpkg.com/pdf-lib@1.4.0"></script> 
<script src="https://unpkg.com/downloadjs@1.4.7"></script>

创建用户界面

现在，您可以创建一个用户界面。此界面应包含容器、标头、按钮、文本字段、JavaScript 代码和 HTML 代码等组件，并允许用户执行以下操作：

  • 上载文件。
  • 输入将显示在 PDF 文档中的字段文本。
  • 单击按钮以使用已上载的 PDF 文档输入的文本更新这些文档。
  • 单击按钮可创建包含所输入文本的新 PDF 文档。
  • 单击按钮可下载已准备文档。

拖放文件并显示 PDF 文档

首先，您需要将基本组件拖放到要构建的 UI 中。

  1. 在组件调色板中，将弹性行拖放到页面设计器上，并将标题拖放到此组件中，您可以标记上载 PDF 文档。然后添加将用于上载 PDF 文档的文件选择器和文件选择器按钮。
  2. 使用名称 fileURL 创建字符串类型的变量。此变量将在页面级别存储稍后将在页面上显示的 PDF 文档的 URL。
  3. 使用名称 holdFile 创建类型为 Any 的变量。此变量将在页面级别存储 PDF 文档的内容。
  4. 在“文件选择器”属性选项板上，创建新的事件 on Select Files。此事件将创建一个名为 FilePickerSelectChain 的新操作链。
  5. 定义并实施操作链 FilePickerSelectChain 以及将读取上载 blob 对象内容的 JavaScript。此 JavaScript 函数将在页面级别实现，并存储两个变量：一个将 PDF 文件转换为 base64 字符串，另一个包含将在页面上显示的文档 URL。操作链包括三个步骤：
    1. 初始化并重置 fileURL 变量。
    2. 使用已上载的文件的输入参数调用函数 addPDFDocument。
    3. 将 addPDFDocument 函数的结果分配给 fileURL 和 holdFile 变量。

将上载的 PDF 文件显示到主页屏幕

在主页的源 HTML 中，使用先前分配的页变量 fileURL 添加对象及其源。将 fileURL 对象添加到主 HTML 页。在此阶段，应用程序可以上载和显示 PDF 文件。

将 addPDFDocument 函数的输出分配给页变量 fileURL 和 holdFile

将返回的 addPDFDocument 函数属性 URL 和数据分别分配给页变量 fileURL 和 holdFile。

指定 addPDFDocument 函数的输入变量

在 GUI 上，将上载的文件变量分配给函数的 arg1 参数。

创建 addPDFDocument 函数

在页面级别创建函数 addPDFDocument。应用程序将收到一个输入参数。该函数将根据输入文件参数实例化 URL 变量，然后读取上载的文档并将其转换为 base64 字符串。您可以使用此代码示例定义函数： 
    PageModule.prototype.addPDFDocument = function(arg1) {
      return new Promise(
        resolve=>{
          const blobURL = URL.createObjectURL(arg1);
          const reader  = new FileReader();
          reader.addEventListener("load", function () {
            // convert image file to base64 string         
            resolve({ data: reader.result, url: blobURL });
          }, false);
          if (arg1) {
            reader.readAsDataURL(arg1);
          }
        }
      );      
    };

更新上载的 PDF 文档

从组件调色板拖放到页面设计器中，将“文本字段”组件拖放到此组件下方，新按钮。

  1. 创建页面变量 textIncludedIntoPDF 以存储文本字段的内容。此变量将插入内容并使用它更新 PDF 文档。
  2. 将此变量指定给“输入文本”组件。
更新和显示 PDF
为更新 PDF 按钮在操作上创建新事件。此事件将创建一个标记为 update_display_pdf 的新操作链。
新操作链使用 JavaScript 函数更新上载的 PDF，然后，通过临时页面变量，第二个 JavaScript 函数将重新生成并显示新的 PDF 文档。
创建 UpdatePDF 函数

接下来，创建 JavaScript 函数 createUpdatePDF。这是一个具有两个输入参数（上载的 PDF 文档和用户以前在主页上输入的文本）的异步函数。它返回一个字节数组。

执行时，此函数：：
  1. 从 pdf-lib API 声明常量。
  2. 创建 PDFDocument 实体并加载输入 pdf 字节数组。
  3. 获取文档中包含的所有页的数组。
  4. 标识在文档的 index = 0 中呈现的第一页。
  5. 计算页面的宽度和高度。
  6. 编写您输入的文本（红色、角为 45 度）。
  7. 保存、串行化并将 PDFDocument 返回字节 (a Uint8Array)。
    以下代码示例可用于模拟上述功能：
      PageModule.prototype.createUpdatePDF = async function (arg1 , inputText ) {
    // declare constants from the pdf-lib API.
    const { degrees, PDFDocument, rgb, StandardFonts , grayscale} = PDFLib;
    console.log("createUpdatePDF: input file " + arg1);
    console.log("createUpdatePDF: input argument " + inputText);
    const existingPdfBytes = arg1;
    // create a PDFDocument entity and load the input pdf byte array 
    const pdfDoc = await PDFDocument.load(existingPdfBytes);
    // get an array of all the pages contained in this document. The pages are stored in the array in the     
    // same order that they are rendered in the document with the first page page in the 0 position. 
    const pages = pdfDoc.getPages();
    // get the first page rendered at the index = 0 of the document
    const firstPage = pages[0];
    // get the first page width and height
    const { width, height } = firstPage.getSize();
    console.log("createUpdatePDF: The width : " + width + "and height : " + height +" of the first page");
    // Embed a Helvetica font into the pdf document
    const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);
    // write the text that you had entered and draw a rectangle 
    firstPage.drawText(inputText, {
      x: 5,
      y: height / 2 + 300,
      size: 50,
      font: helveticaFont,
      color: rgb(0.95, 0.1, 0.1),
      rotate: degrees(-45),
    });
    // createUpdatePDF: save and serialize the PDFDocument to bytes (a Uint8Array)
    const pdfBytes = await pdfDoc.save();
    return pdfBytes;
  };
显示更新的 PDF 文档

UpdatePDF 函数的结果将分配给临时页面变量 tmpPDFBytes。在此赋值之后，JavaScript 函数将接收 base64 字节数组，并将从此字节数组实例化新的 blob 实体。最后，该函数将创建并返回与此 PDF 文档对应的 URL。

以下代码示例可用于模拟上述功能： 
PageModule.prototype.displayPDFDocument = function (arg1) { 
    const bytes = new Uint8Array( arg1 ); 
    // create a new blobfrom the byte array with type of application: pdf 
    const blob = new Blob( [ bytes ], { type: "application/pdf" } ); 
    // create the url of the generated blob entity 
    const newdocURL = URL.createObjectURL(blob); 
    // return the updated pdf's url 
    return newdocURL; 
    };
此函数的输出将分配给页面变量 fileURL，该变量将用于在页面中显示更新的 PDF 文档。

此时，应用程序已准备好上载 PDF 文档，使用用户在屏幕文本字段中输入的文本对其进行修改，然后在屏幕上显示更新的 PDF 文档。

创建新 PDF 文档

此时，应用程序已准备好创建 PDF 文档，使用用户在屏幕文本字段中输入的文本对其进行修改，然后在屏幕上显示新创建的 PDF 文档。 要生成将包括应用程序用户输入的文本的新 PDF 文档，请从组件调色板中将按钮组件拖放到页面设计器中。
创建和显示文档

创建新事件以定义创建新 PDF 按钮启动的操作。该事件将创建一个标签为 create_display_pdf 的新操作链。

新操作链将使用 JavaScript 函数创建新的 PDF（包括以前在文本字段中输入的文本），然后，通过临时页面变量，第二个 JavaScript 函数将重新生成并显示新的 PDF 文档。

创建 PDF 函数

接下来，创建 JavaScript 函数 createPDF。这是一个异步函数，它接受用户以前在主页上输入的文本作为其一个输入参数并返回字节数组。

执行时，此函数：
  1. 从 pdf-lib API 声明常量。
  2. 创建 PDFDocument 实体。
  3. 嵌入 Times Roman 字体。
  4. 向 PDF 文档对象添加空白页。
  5. 计算页面的宽度和高度。
  6. 写入用户输入的文本。
  7. 保存、串行化并将 PDFDocument 返回字节 (a Uint8Array)。
    使用此代码示例模拟上述功能： 
    PageModule.prototype.createPDF = async function (arg1) {
    const { degrees, PDFDocument, rgb, StandardFonts , grayscale} = PDFLib;
    console.log("createPDF: input file " + arg1);
    // create a PDFDocument entity and load the input pdf byte array 
    const pdfDoc2 = await PDFDocument.create();
    // Embed the Times Roman font
    const timesRomanFont = await pdfDoc2.embedFont(StandardFonts.TimesRoman);
    // Add a blank page to the document
    const page2 = pdfDoc2.addPage();
    // Get the width and height of the page
    const { width2, height2 } = page2.getSize();
    // Draw a string of text toward the top of the page
    const fontSize2 = 30;
    page2.drawText(arg1, {
      x: 50,
      y: 450,
      size: fontSize2,
      font: timesRomanFont,
      color: rgb(0, 0.53, 0.71),
    });
    // createUpdatePDF: save and serialize the PDFDocument to bytes (a Uint8Array)
    const pdfBytes2 = await pdfDoc2.save();
    return pdfBytes2;
显示新创建的 PDF 文档
createPDF 函数将分配给临时页面变量 tmpPDFBytes。在此赋值之后，JavaScript 函数将接收 base64 字节数组，并将从此字节数组实例化新的 blob 实体。。

然后，该功能将创建并返回与此 PDF 文档对应的 URL。将重用为 update_display_pdf 操作链实施的相同函数。然后将此函数的输出分配给页面变量 fileURL，该变量将用于在页面中显示新的 PDF 文档

下载 PDF 文件

通过拖放按钮组件，从组件调色板中包括到页面设计器中。

下载文档

为下载 PDF 按钮创建新事件操作。此事件将创建一个标记为 downloadPDF 的新操作链。新操作链将使用 JavaScript 函数下载 PDF 文件（包含用户在文本字段中输入的文本）。

下载 PDF 文件
JavaScript 函数 downloadPDFfile 将 PDF 文档的字节数组作为其一个输入参数进行上载和修改或创建，并使用预定义名称 pdf-lib_modification_example.pdf 和 application/pdf 类型下载文档。
该函数使用 download() 函数（从最初隐藏的库 downloadj 中，然后导入到应用程序中）。download() 的输入参数可以是以下任何数据类型：
  • URL
  • 字符串
  • 球型图
  • 键入的数组
或者，通过 dataURL 将文件的数据表示为 base64 或 URL 编码字符串，即放置在浏览器下载目录中的新文件的名称和类型。
使用此代码示例模拟上述功能： 
  PageModule.prototype.downloadPDFFile = function (arg1) {
    download(arg1, "pdf-lib_modification_example.pdf", "application/pdf");
  };