HTML5ドキュメントビューアPrizmDocチュートリアル:Node.jsのサービスを作成する方法

PrizmDocは、安全な、完全にカスタマイズ可能な表示とコラボレーション機能を提供し、最速かつ最も品質のHTML5のドキュメントビューアです。これは、セキュリティ上のリスクを軽減し、生産性を向上、展開のための単純なメカニズムを介してコストを削減します。同時に、それが不要なライセンスとダウンロードを排除し、閲覧者のサーバーに基づいています。

PrizmDocの™電子署名者はここに証明し、作成するためのフォームPrizmDoc™テンプレートデザイナで塗りつぶしの使用をサポートしています。電子署名者を使用すると、プログラムのデフォルト値を埋めるか、予め充填され、手動でフォームフィールドを埋めることができます。

あなたがフィールドに記入した後、ユーザーはデータを記入PDFをダウンロードするには、ボタン「署名用紙をダウンロード」をクリックすることができます。押すと、電子署名者は、データがドキュメントに「焼く」PrizmDocサーバ「MarkupBurner」APIを使用しています。

あなたはすべてのユーザーのデータを持っている、とあなたは電子署名者にフォームをロードせずにドキュメントにデータを書き込むためにスキップしたい場合は、どのように行うには?この記事では、Node.jsのサービスを作成する方法を説明します

図1に示すように、プロセスバーナーGETリクエストルーティングフォーム

このサービス処理GETリクエストがGETリクエストを形成するためにルーティングされ、この最初のステップは、ルーティングプロセスを設定します。

この例では、「FormDefinitions」フォルダとフォームデータファイル(同じ名前を持つが、拡張子「data.json」ファイル付き)という名前のファイルに定義ファイル(またはファイル)を形成する必要があります。各キーは、フォームフィールドのIDであるキーと値のペアを含んでいなければならない形式のデータファイルは、各値は、パディングフィールドの値です。例えば:

{ 
  "テキスト1": "ドウ"、
  "テキスト2": "ジョン" 
}

ファイルは「ドキュメント」フォルダと呼ばれる適切な形式の文書に配置する必要があります。

インストールおよびPrizmDocのNode.jsサーバーする必要があります。

NPM Expressとaxiosをインストールし使用してください。ポート3001を表現し、GETリクエストをリッスン以下に示すように、「フォームレコーダー」です。PrizmDoc Serverに(ステップ3)で発行されたHTTPリクエストに対するAxios。

Main.jsが示すように、ファイルを作成し、axiosとFS表現する必要があります(下図のように、フォームデータファイルをロードするために使用して、フォームや文書は、定義ファイルを形成します)。

CONST Expressは=( '発現')を必要とします。
CONST axiosは=( 'axios')を必要とします。
CONSTアプリ=エクスプレス()。
CONSTのfs =は( 'FS')を必要とします。

// PrizmDoc Serverはこれを使用してインストールする必要があります。
constのホスト= 'のhttp:// localhostを:18681'; 

// PrizmDocクラウドを使用する代わりに、次を使用します。
= 'https://api.accusoft.com' // constのホスト。
constのAPIKEY = 'YOUR_API_KEY'; 

app.get(「/ formBurner /:ID」、関数(REQ、{RES)
  //この例では、FormDefinitionsフォルダにdata.jsonファイル内に設けられたフィールド値を使用する。
  //かわりにロードするコードを更新することができますデータベースなどの他の場所からのデータ、。 
  fs.readFile( `$ {__ DIRNAME} / FormDefinitions / $ {req.params.id} .data.json`、 'UTF8'、
    CONST FieldValuesプロパティ=誤るJSON.parse(データ):!?{}。
    // convertFormの実施のためのステップ2を参照してください。
    convertForm(FieldValuesプロパティ、req.params.id、RES)。
  }); 
});

図2に示すように、フォームに各タグフィールド

PrizmDocサーバーMarkupBurnerのAPIは、入力としてJSONをマークします。それぞれが適切なタグ・フィールドのフォーマットを形成変換する必要が。指定されたIDを持つ以下の方法convertFormオープンフォーム定義ファイル形式の定義、および指定したフィールドの値は、フィールドを埋めるためにマークされ、各フィールドを変換します。タグは、ドキュメント(ステップ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。


おすすめ

転載: blog.51cto.com/14467432/2432098