getFileData doesn't contain proper annotations

Technical Support
, , , ,
1

Product: @pdftron/webviewer

Product Version: 7.3.3

Please give a brief summary of your issue:

  • Generating base 64 from annotations doesn’t add bold, underline, italic text on a “Free Text” annotation.

ISSUE IN DETAIL:

I have the following Free Text Annotation on my document:

image
image2784×626 40.5 KB

When I render the document, I can successfully import annotations from the xfdfString.
When I try to generate a base64 from this document, I end up with the following on my b64:

image

As you can see, it doesn’t match.

My code, upon generating the base 64, is as follows:

    const annotations = await annotManager.getAnnotationsList();
    const xfdfString = await annotManager.exportAnnotations({ annotList: annotations });
    const docbuf = await instance.docViewer.getDocument().getFileData({ xfdfString });

etc...

xfdString` is the following:

<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><annots><freetext page="0" rect="149.97,705.44,409.1,778.22" flags="print" name="30c9188e-4520-15f9-03fe-3df371c959ef" title="Guest" subject="Free Text" date="D:20211002235312+01'00'" width="0" creationdate="D:20211002235239+01'00'" TextColor="#000000" FontSize="10"><trn-custom-data bytes="{&quot;trn-wrapped-text-lines&quot;:&quot;[\&quot;hello there :) \&quot;,\&quot;this is bold \&quot;,\&quot;this is italic \&quot;,\&quot;and this is underline \&quot;]&quot;}"/><contents>hello there :)
this is bold
this is italic
and this is underline</contents><contents-richtext><body><p><span style="color:#000000">hello there :)</span><span>
</span><span style="font-weight:bold;color:#000000">this is bold</span><span>
</span><span style="color:#000000">this is </span><span style="font-style:italic;color:#000000">italic</span><span>
</span><span style="color:#000000">and this is </span><span style="color:#000000;text-decoration:word">underline</span><span/></p></body></contents-richtext><defaultappearance>0 0 0 rg /Helvetica 10 Tf</defaultappearance><defaultstyle>font: Helvetica 10pt; text-align: left; color: #000000</defaultstyle><apref-replace/></freetext><stamp page="0" rect="259.59000000000003,509.93434782608676,387.12,581.5899999999999" flags="print" name="791d3c12-e52c-120e-bae6-02693a4affc6" title="Guest" subject="Stamp" date="D:20211002235435+01'00'" creationdate="D:20211002235428+01'00'" icon="Draft"><trn-custom-data bytes="{&quot;trn-annot-maintain-aspect-ratio&quot;:true}"/><imagedata>data:image/jpeg;base64,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</imagedata></stamp><ink page="0" rect="272.4047619047618,342,388.59523809523813,382" color="#000000" flags="print" name="09284ae6-4a07-9633-9931-b26c2217b05b" title="e363ac3d-feef-48e5-a442-0cac492a8d7c" subject="Signature" date="D:20211003001044+01'00'" width="0.8" creationdate="D:20211003001044+01'00'"><trn-custom-data bytes="{&quot;trn-annot-maintain-aspect-ratio&quot;:true,&quot;trn-annot-no-resize&quot;:true,&quot;trn-annot-no-move&quot;:true}"/><inklist><gesture>273.88624338624334,363.058201058201;273.88624338624334,362.5291005291005;273.88624338624334,362.5291005291005;275.4735449735449,362.5291005291005;278.11904761904754,362.5291005291005;283.41005291005285,362.5291005291005;286.0555555555555,362.5291005291005;293.4629629629629,361.47089947089944;302.98677248677245,358.2962962962963;321.5052910052909,351.41798941798936;325.2089947089947,350.35978835978835;344.2566137566138,344.01058201058197;355.36772486772486,342.9523809523809;363.83333333333337,342.42328042328035;372.82804232804233,344.01058201058197;375.473544973545,345.59788359788354;378.11904761904765,348.2433862433862;381.29365079365084,352.4761904761904;381.82275132275134,353.5343915343915;382.35185185185185,354.06349206349205;382.8809523809524,355.1216931216931;383.4100529100529,355.6507936507936</gesture><gesture>388.1719576719577,381.5767195767196;387.6428571428572,381.5767195767196;385.5264550264551,380.51851851851853;380.2354497354498,377.34391534391534;373.88624338624345,374.6984126984127;362.77513227513225,369.93650793650795;346.9021164021164,365.17460317460313;343.1984126984127,363.58730158730157;333.14550264550263,361.47089947089944;319.91798941798936,358.8253968253968;318.85978835978835,358.8253968253968;311.4523809523809,356.7089947089947;306.16137566137564,355.6507936507936;301.9285714285714,354.06349206349205;298.7539682539682,353.5343915343915;294.52116402116394,353.005291005291;292.9338624338624,352.4761904761904;287.11375661375655,351.41798941798936;286.0555555555555,351.41798941798936;280.7645502645502,349.8306878306878;277.06084656084647,348.2433862433862;274.41534391534384,346.6560846560846;273.88624338624334,346.6560846560846;273.3571428571428,346.1269841269841;272.8280423280422,346.1269841269841</gesture></inklist></ink></annots></xfdf>

Can you please provide some insight, as this is currently blocking us ?

Thanks,
Tiago

2

Just to emphasise that I’m only addressing the bold / italic / underline - not the size of the text - the screenshots are a bit different, but just because of the zoom.

3

Hello Tiago,

Thank you for your report.

How are you bolding and underlining the text inside the free text annotation?

Best Regards,
Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com

4

Hi Jason, thanks for the reply - I think i know where this is going, but yes, I’m adding them via CMD + b , CMD + i and CMD + u

The text does get changed when interacting within the Free Text Annotation - so I’m assuming it should be a valid way of doing it?

5

Hello Tiago,

XFDF string should have a tag that saves the information you were looking for.
The XFDF string you sent me has such tags, that means, you are probably exporting the annotation in the right way, but not importing correctly.

Here is the code snippet that I used to test, I was able to get back the formatted free text annotations:

  const { documentViewer, annotationManager,SaveOptions  } = instance.Core;
  let blob  = null;
  instance.UI.setHeaderItems(header => {
    header.push({
      type: 'actionButton',
      img: '',
      onClick: async () => {

        const doc = documentViewer.getDocument();
        const xfdfString = await annotationManager.exportAnnotations();
        const saveOptions = SaveOptions;
        const options = {
          xfdfString,
          flags: saveOptions.LINEARIZED,
          downloadType: 'pdf'
        };
        const data = await doc.getFileData(options);
        const arr = new Uint8Array(data);
        blob = new Blob([arr], { type: 'application/pdf' });

        // add code for handling Blob here
        console.log('lastFileBlob',blob)
      }
    });
  });
  instance.UI.setHeaderItems(header => {
    header.push({
        type: 'actionButton',
        img: './..',
        onClick: async () => {
          instance.UI.loadDocument(blob, { filename: 'myfile.pdf' });

          console.log('lastFileBlob Loaded',blob)
        }
    });
  });

Could you double check your import logic?

Best Regards,
Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com