How to Download PDF file With Annotation With out using Webviewer in Salesforce

Technical Support
, ,
1

Product: PDFTron Library

Product Version: Trial version

Please give a brief summary of your issue:
(Think of this as an email subject)
The problem/Issue I am facing in our Salesforce Application is to Implement the Download PDF with Annotation without using WebViewer.

Can you please provide me the info/steps to Implement the Download PDF with Annotation in Salesforce Application with Full API without using WebViewer?

Because the requirement is to download the PDF with Annotation with out loading the WebViewer.
Outside of the PDFTron Web-Viewer on Click on the button I need to download the PDF file with Annotation

Please help me out to resolve this

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

Please provide a link to a minimal sample where the issue is reproducible:

2

Hello,

Thank you for posting to the PDFTron community!

Can you provide some additional context for us to better understand your question - when you say Download PDF, is this an attached file on a record? Where are the annotations coming from? Could you maybe walk us through your user flow? Thanks!

Best,
Thomas

3

Hi,
I wanted to answer your question of how to save pdf with XFDF string included in PDF without using WebViewer UI.
Related APIs you need to use: Core.createDocument for loading PDF from URL, doc.getFileData for merging XFDF and creating PDF in raw format.

Here is an example:

This example file shows how to load core-controls

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
    <script src='../../../lib/samples/FileSaver.min.js'></script>
  </head>
  <body style='padding: 0; margin: 0'>

    <script src="../../../lib/core/webviewer-core.min.js"></script>
    <script src='./index.js'></script>
  </body>
</html>

The main JS file

Core.setWorkerPath('../../../lib/core');

const xfdfString = `<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="0" rect="138.180,570.180,413.330,695.030" color="#E44234" flags="print" name="8ad6ceb1-aed3-726c-4862-14e42b33a219" title="Guest" subject="Rectangle" date="D:20220118114254-08'00'" creationdate="D:20220118114254-08'00'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>`

Core.createDocument('/blank.pdf').then(async (doc) => {
  console.log(doc);
  const data = await doc.getFileData({
    // saves the document with annotations in it
    xfdfString
  });
  const arr = new Uint8Array(data);
  const blob = new Blob([arr], { type: 'application/pdf' });
  console.log(blob);
  saveAs(blob, 'output.pdf');
}).catch(error => {
  console.log(error);
});
4

Hi Sardor,

Thank you for the reply.

Queries
The above solution you have provided is for the sales force application ?
If Yes →
Where to add the index.html files in sales force because it wont accept the html file which as head,
body and script tag

5

No, this is not specifically for Salesforce, but this general example of how you can do this. You can use examples to implement your own code.