How to use annotation layer in PDF.js? - javascript

Some of the PDF.js code mentions an "annotation layer", for example AnnotationLayerBuilder here:
https://github.com/mozilla/pdf.js/blob/95e102c07bc257c2120fd7fd9141762b2c813a1c/web/annotation_layer_builder.js#L118
There is also pdfDocument.annotationStorage and pdfjsLib.AnnotationLayer, which - on all the documents I've tried - are empty, even in documents which do have text annotations.
I couldn't find any examples or documentation on the annotation layer and how it is supposed to be used, but it sure sounds interesting :)
What is the annotation layer? Is this talking about standard PDF annotations, as described in https://pspdfkit.com/blog/2018/what-are-annotations/ or https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_reference_1-7.pdf section 8.4 Annotations? Or, is it something internal to PDF.js?
How do I list the existing annotations from javascript code in PDF.js, and how do I add one? (just for display; not expecting to be able to save it in the pdf, of course) Can anyone provide a working code example?
Thanks!

Annotations are standard for the PDF file format as described in the links you provided. They are not a new concept to PDF.js.
How you get the annotations will depend on your situation. I'm building a view layer to replace the viewer the PDF.js team built. The basic idea there is you:
Get a reference to the PDFDocumentProxy object via const doc = getDocument(url)
Get a reference to a PDFPageProxy object via const page = await doc.getPage(num)
Get the annotations via await page.getAnnotations()
If you're already using the viewer they built, it doesn't appear to be exposed anywhere.

Related

How to embed interactive chart inside a pdf?

I have a requirement wherein we have to display a chart and few parameters (date, name etc) inside a pdf file.
The user should be able to modify the chart depending upon the data selected by the user.
I have seen some examples https://www.youtube.com/watch?v=Z5bdBeFwNCU but not sure how these are getting generated.
Any pointer is highly appreciated.
Also I am a java script developer so if there is any solution in JS It would be easier for me to follow
You can look into the docmentation of the creators (Adobe):
Using JavaScript with PDF files - Tutorials about process.
Javascript API reference for PDF format - a PDF document listing all commands.
I did a few projects where charts/diagrams are created on the fly, based on user entries. For that, I used a combination of form fields and annotations, whose parameters are calculated using Acrobat JavaScript.
There is also an undocumented function in Acrobat JavaScript which allows to create the icon for button form fields.
As the actual approach depends a lot on the kind of information and graphs, one would have to look at what has to be accomplished. Feel free to contact me in private, if there is some interest. It might be worthwhile to look at "make or buy"…

Illustrator Script: Generate a JSON file

I have been working on creating a system where I can export my swatches from Illustrator as a JSON object in order to allow for my simplicity when trying to update my App that I have created.
Using the illustrator scripting API I have managed to loop through all my swatches and generate an object. What I am attempting to do now is take this data and generate a JSON file with it. This is so that whenever I make colour updates to my App in illustrator it will immediately change everything when I run that script.
I have been making use of Adobe Documentation as well as a helpful site with it simplified and easier to navigate Jongware.
The code overall looks like this: JSFiddle
The code in question is the following. I am not sure if there is way to generate the file without making use of the API. They seem to be using the same JS engine as a browser would but I am not 100% sure. Any advice would be great!
var file = new File('filename.txt');
file.saveAs('txt');
So the main question is how would I generate a new file locally that is able to store this object I have created? As the API isnt that clear on how to create a basic text file from the data I have created.
Based off of the suggestion #enhzflep and this question.
I came to the final output of:
var file;
file = File.saveDialog('Export');
file.open('w');
file.write(JSON.stringify(colourObject));
file.close();
Making use of Douglas Crockfords JSON2 Pollyfill (As Illustrator scripts dont support .stringify) to create a stringify method I was able to create a JSON exported file.

Merging PDF with Data batch

I'm a new french stackoverflow user, so sorry for my misspelling.
I would like to know how to automatically merge writable/alterable PDF with data file(XML, TXT or FDF).
I have seen that Adobe Acrobat Pro could import Data, but in the wizard action, I've not found "import" choice to make it automatic. The wizard offers JavaScript add but i don't find any PDF manipulation line code JS.
Does JavaScript is the solution for my issue ?
Or do you have some alternative ?
Thx for reading.
You can use the COM of Acrobat or PDFCreator to do it. There is a lot of example here (And in French):
http://www.developpez.net/forums/d431662/logiciels/microsoft-office/excel/contribuez/excel-word-pdf-adobe-acrobat-pro-pdfcreator/
With "Wizard", you are using the Actions Wizard?
If so, this is understandable. However, there is the Acrobat JavaScript function which would import an FDF (or a few other data formats); have a closer look at the importAnFDF() method in the Acrobat JavaScript documentation (which is part of the Acrobat SDK, downloadable from the Adobe website).
There are other approaches, by importing a tab-delimited file as File Attachment (aka Data Object), and then interpret this file to create your data table, and then use Acrobat JavaScript to fill out the form, save or print it, and so on.
A third method would be using Template pages in the PDF, craft your FDF so that it supports Templates, import it into the base document and then wait until it has spawned all the pages. You then have one big document containing all the filled forms.
Finally, if you have a higher volume, you will be better off using a server-side fill-in tool, such as FDFMerge by Appligent.

How to mimic Facebook's "link share" functionality using node.js and javascript

so what I want to mimic is the link share feature Facebook provides. You simply enter in the URL and then FB automatically fetches an image, the title, and a short description from the target website. How would one program this in javascript with node.js and other javascript libraries that may be required? I found an example using PHP's fopen function, but i'd rather not include PHP in this project.
Is what I'm asking an example of webscraping? Is all I need to do is retrieve the data from inside the meta tags of the target website, and then also get the image tags using CSS selectors?
If someone can point me in the right direction, that'd be greatly appreciated. Thanks!
Look at THIS post. It discusses scraping with node.js.
HERE you have lots of previous info on scraping with javascript and jquery.
That said, Facebook doesn't actually guess what the title and description and preview are, they (at least most of the time) get that info from meta tags present in the sites that want to be more accessible to fb users.
Maybe you could make use of that existing metadata to pull titles, descriptions and img previews. The docs on the available metadata is HERE.
Yes web-scraping is required and that's the easy part. The hard part is the generic algo to find headings and relevant texts and images.
How to scrape
You can use jsdom to download and create a DOM structure in your server and scrape that using jquery on your server. You can find a good tutorial at blog.nodejitsu.com/jsdom-jquery-in-5-lines-on-nodejs as suggested by #generalhenry above.
What to scrape
I guess a good way to find the heading would be:-
var h;
for(var i=6; i<=1; i++)
if(h = $('h'+i).first()){
break;
}
Now h will have the title or undefined if it fails. The alternative for this could be simply get the page's title tag. :)
As for the images. List all or first few images on that page which are reasonably large, i.e. so as to filter out sprites used for buttons, arrows, etc.
And while fetching the remote data make sure that ProcessExternalResources flag is off. This will ensure that script tags for ads do not pollute the fetched page.
And yes the relevant text would be in some tags after h.

How to display information contained in XML file from another website

I have an XML file ( XML file I produce ) which contains information about my parteners.
I want them to display on their website information relative to them by picking them into the XML file.
I have no idea to do that, ecxept that i need to write a 'parser' in javascript to display information. This javascript code i guess has to be on my partener's website.
could you please provide me examples to do that ? (how to write a parser, how to display only information for one partener ?)
Thank you,
Regards
I think this is a standard problem. Each browser does expose there own version of a Document type object which you can build and then use method like getElementByTagName to grab a particular node in the XML and process its data.
Few links which you can look at
http://www.hiteshagrawal.com/javascript/javascript-parsing-xml-in-javascript
http://www.mikechambers.com/blog/2006/01/09/parsing-xml-in-javascript/
I would suggest you to use prototype library for dealing with this

Categories