HTML5文档查看器PrizmDoc使用教程:如何创建Node.js服务

翻译|使用教程|编辑:莫成敏|2019-08-22 15:56:07.040|阅读 39 次

概述:PrizmDoc是最快速、最有品质的HTML5文档查看器,提供安全的、全定制化的查看和协作功能。它通过一个简单部署的机制减少成本,降低安全风险和提高生产率。本文主要介绍通过PrizmDoc创建Node.js服务

PrizmDoc是最快速、最有品质的HTML5文档查看器,提供安全的、全定制化的查看和协作功能。它通过一个简单部署的机制减少成本,降低安全风险和提高生产率。同时,它是基于服务器的查看器,消除了不必要的许可和下载。

点击下载PrizmDoc最新版

PrizmDoc™ e-Signer支持填写使用PrizmDoc™模板设计器创建的表格,证明了这里。使用e-Signer,表单字段可以手动填写、编程填写或者预先填充默认值。

填写完字段后,用户可以单击“下载签名表单”按钮下载包含填写数据的PDF。按下此按钮时,e-Signer使用PrizmDoc服务器“MarkupBurner”API将数据“刻录”到文档中。

但是,如果您已拥有所有用户的数据,并且想要直接跳过将数据刻录到文档而不将表单加载到e-Signer中,该怎么办?这篇文章将概述如何创建Node.js服务

1、处理路由表单燃烧器GET请求

此服务将处理将GET请求路由到表单的GET请求,此初始步骤将设置路由处理。

对于此示例,您需要将表单定义文件(或多个文件)放在名为“FormDefinitions”的文件夹中以及表单数据文件(具有相同名称但具有“data.json”文件扩展名)。表单数据文件必须包含键值对,其中每个键都是表单字段ID,每个值都是用于填充字段的值。例如:

{
  "Text1": "Doe",
  "Text2": "John"
}

需要将相应的表单文档放入名为“Documents”的文件夹中。

您需要安装Node.js和PrizmDoc服务器

使用npm安装express和axios。Express将用于侦听端口3001并为“表单刻录机”发送GET请求,如下所示。Axios将用于向PrizmDoc Server发出http请求(在步骤3中)。

创建一个main.js文件,如下所示,需要express、axios和fs(将用于加载表单数据文件,如下所示,以及表单文档和表单定义文件)。

const express = require('express');
const axios = require('axios');
const app = express();
const fs = require('fs');

// PrizmDoc Server must be installed to use this.
const host = 'http://localhost:18681';

// Use the following instead to use PrizmDoc Cloud.
// const host = 'https://api.accusoft.com';
const apiKey = 'YOUR_API_KEY';

app.get('/formBurner/:id', function (req, res) {
  // This example uses the field value provided in the data.json file in the FormDefinitions folder.
  // You can update the code to instead load the data from elsewhere, such as a database.
  fs.readFile(`${__dirname}/FormDefinitions/${req.params.id}.data.json`, 'utf8', function (err, data) {
    const fieldValues = !err ? JSON.parse(data) : {};
    // See step 2 for the implementation of convertForm.
    convertForm(fieldValues, req.params.id, res);
  });
});

2、将每个表单字段转换为标记

PrizmDoc Server MarkupBurner API将标记JSON作为输入。有必要将每个表单字段转换为适当的标记格式。下面的convertForm方法打开具有指定表单定义ID的表单定义文件,并使用指定的字段值将每个字段转换为标记以填充字段。然后将标记刻录到表单文档中(参见步骤3)。

此示例仅演示转换文本字段,但可以更新以转换其他字段类型,例如签名和复选框。

const convertForm = (fieldValues, formDefinitionId, res) => {
  fs.readFile(`${__dirname}/FormDefinitions/${formDefinitionId}.json`, 'utf8', function (err, data) {
    const formDefinition = JSON.parse(data);
    let marks = [];

    const globalFontName = (formDefinition.globalSettings && formDefinition.globalSettings.fontName) || 'Fira Sans';
    const globalFontColor = (formDefinition.globalSettings && formDefinition.globalSettings.fontColor) || '#000000';

    formDefinition.formData.forEach(field => {
      if (field.template === 'TextTemplate') {
        let mark = {};
        if (field.multiline) {
          mark.type = 'TextAreaSignature';
          mark.maxFontSize = field.fontSize || 8;
          mark.fontStyle = [];
        } else {
          mark.type = 'TextInputSignature';
        }
        mark.uid = field.fieldId;
        mark.interactionMode = 'Full';
        mark.creationDateTime = '2019-06-25T19:28:13.396Z';
        mark.modificationDateTime = '2019-06-25T19:28:13.396Z';
        mark.mask = null;
        mark.maxLength = 0;
        mark.rectangle = { x: field.rectangle.x, y: field.rectangle.y, width: field.rectangle.width, height: field.rectangle.height };
        mark.pageData = { width: field.pageData.width, height: field.pageData.height };
        mark.pageNumber = field.pageNumber;
        mark.fontColor = (field.fontColor === 'UseGlobalFontColorSetting') ? globalFontColor : field.fontColor;
        mark.fontName = (field.fontName === 'UseGlobalFontNameSetting') ? globalFontName : field.fontName;
        mark.horizontalAlignment = field.horizontalAlignment ? (field.horizontalAlignment.charAt(0).toUpperCase() + field.horizontalAlignment.slice(1)) : 'Left';
        // If a field value is not provided, this example uses the value of "example".
        mark.text = (fieldValues !== undefined) ? fieldValues : 'example';
        marks.push(mark);
      }
    });

    // See step 3 for the implementation of burnForm.
    burnForm(marks, formDefinition.templateDocumentId, res);
  });
};

3、将标记刻录到表单中

使用PrizmDoc Server MarkupBurner API将标记刻录到表单文档中,如下所示。在对formBurner请求的响应中返回已刻录的文档。

const burnForm = async (marks, documentName, res) => {
  const { affinityToken, markupFileId } = await postMarkup(marks);
  console.log(`markupFileId: ${markupFileId}`);
  const documentFileId = await postDocument(documentName, affinityToken);
  console.log(`documentFileId: ${documentFileId}`);
  const processId = await postBurner(documentFileId, markupFileId, affinityToken);
  console.log(`processId: ${processId}`);
  const burnedDocumentFileId = await getBurner(processId, affinityToken);
  console.log(`burnedDocumentFileId: ${burnedDocumentFileId}`);
  const burnedDocument = await getBurnedDocument(burnedDocumentFileId, documentName, affinityToken);
  res.end(burnedDocument, 'binary');
};

首先,将标记和表单文档作为“工作文件”上载到PrizmDoc Server。

const postMarkup = async marks => {
  const response = await axios({
    url: `${host}/PCCIS/V1/WorkFile?FileExtension=json`,
    data: {
      marks
    },
    method: 'POST',
    headers: {
      'Content-Type': 'octet-stream',
      'acs-api-key': apiKey
    }
  });

  return { markupFileId: response.data.fileId, affinityToken: response.data.affinityToken };
};

const postDocument = async (documentName, affinityToken) => {
  const response = await axios({
    url: `${host}/PCCIS/V1/WorkFile`,
    data: fs.readFileSync(__dirname + '/Documents/' + documentName),
    method: 'POST',
    headers: {
      'Content-Type': 'octet-stream',
      'acs-api-key': apiKey,
      'Accusoft-Affinity-Token': affinityToken || ''
    }
  });

  return response.data.fileId;
};

接下来,使用上载的标记和表单文档作为输入创建标记刻录机。

const postBurner = async (documentFileId, markupFileId, affinityToken) => {
  const response = await axios({
    url: `${host}/PCCIS/V1/MarkupBurner`,
    data: {
      'input': {
        'documentFileId': documentFileId,
        'markupFileId': markupFileId
      }
    },
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'acs-api-key': apiKey,
      'Accusoft-Affinity-Token': affinityToken || ''
    }
  });

  return response.data.processId;
};

然后,检查标记刻录机的状态,直到完成为止。

};

const getBurner = async (processId, affinityToken) => {
  const response = await axios({
    url: `${host}/PCCIS/V1/MarkupBurner/${processId}`,
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      'acs-api-key': apiKey,
      'Accusoft-Affinity-Token': affinityToken || ''
    }
  });

  console.log(`MarkupBurner percentComplete: ${response.data.percentComplete}`);

  if (response.data.state === 'complete') {
    return response.data.output.documentFileId;
  }

  if (response.data.state === 'error') {
    return;
  }

  await sleep(1000);
  return getBurner(processId, affinityToken);
};

最后,检索已刻录的文档。

const sleep = (ms) => {
  return new Promise(resolve => setTimeout(resolve, ms));
const getBurnedDocument = async (documentFileId, documentName, affinityToken) => {
  const response = await axios({
    url: `${host}/PCCIS/V1/WorkFile/${documentFileId}`,
    method: 'GET',
    responseType: 'arraybuffer',
    headers: {
      'Content-Type': 'application/pdf',
      'acs-api-key': apiKey,
      'Accusoft-Affinity-Token': affinityToken || ''
    }
  });

  // Uncomment the line below to save the burned document to disk.
  // fs.writeFileSync(`${__dirname}/${documentName}_burned.pdf`, response.data);

  return response.data;
};

使用服务

完成这些步骤后,您可以使用该服务将用户数据直接刻录到表单中。

运行“npm install”,然“node main.js”运行该服务。然后向http:// localhost:3001 / formBurner / {your-form-id}发出GET请求,以获取包含已填充数据的表单的PDF。


想要购买PrizmDoc正版授权,或了解更多产品信息请点击“咨询在线客服”




标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
PrizmDoc

最快速,最优秀的HTML5文档查看器

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat