I’m working with a Vue.js Nuxt 3 environment and what we are trying to do, it’s to get the specific coordinates from where the signatures will be applied, but when I call the getFields() class it just returns an empty array. I need a way to either set and get the coordinates to send a signature so my users can then sign on to my system or a way to detect from a DOCX to PDF template conversion if the template requires a Signature.
right now I’m just creating the template and filling in all the variables, but the last peace it’s getting the signature positions.
here it’s part of the code.
onMounted(() => {
PDFtron.default({
path: '../../webviewer',
disabledElements: [
'menuButton',
],
preloadWorker: 'office',
fullAPI: true,
initialDoc: props.document
}, viewer.value)
.then(instance => {
viewerInstance = instance;
const { documentViewer } = instance.Core;
instance.UI.setTheme('dark');
if (props.document == null) {
instance.UI.showWarningMessage({
confirmBtnText: 'Okay',
title: "Oops, something went wrong",
message: 'We're sorry, the contract it's not available just yet.',
onCancel: null,
onConfirm: null,
})
}
documentViewer.addEventListener('documentLoaded', async () => {
await documentViewer.getDocument().getDocumentCompletePromise();
documentViewer.updateView();
const contract = documentViewer.getDocument();
const keys = await contract.getTemplateKeys();
contractKeys.value = keys.reduce((o, key) => ({ ...o, [key]:''}), {});
document.getElementById("key-val-title").innerText = "Contract Variables:";
isLoading.value = false;
});
})
})
const autoFill = async () => {
const {documentViewer, annotationManager} = viewerInstance.Core
const doc = await documentViewer.getDocument()
let fM = new viewerInstance.Core.Annotations.Forms.FieldManager(annotationManager);
console.log(fM.getFields() );
// here only returns an empty array.
await doc.applyTemplateValues(JSON.stringify(contractKeys.value));
await doc.getDocumentCompletePromise();
documentViewer.updateView();
}
and this is the template that’s being display
<template>
<aside class="autofill">
<h2 id="doc-title">Smart Contract</h2>
<br>
<h1 id="key-val-title">Preparing Visualization...</h1>
<p id="current-status"></p>
<form id="autofill-form" @submit.prevent="autoFill">
<div v-for="(value, index) in contractKeys">
<BaseInput inputClass="value-field" v-model="contractKeys[index]" :type="getType(index)"
:name="`${index}`" :label="getLabel(index)" required >
</BaseInput>
</div>
<baseButton v-if="!isLoading" type="submit" variant="primary" name="Autofill">Fill Variables.
</baseButton>
</form>
</aside>
<div id="webviewer" ref="viewer"></div>
</template>