Rendering Blob Buffer to PDF in Express/Node Response - node.js

Very strange, i am pulling my blob data out of my SQL Server, then returning it to my Express server. I then want to send it as a pdf file out to my res.send(). However im getting a big jumbled up pdf. It has the correct amount of pages, however instead of rendering the PDF it is supposed to, i just have a bunch of random lines and squares on the PDF.
The strange part is doing this the exact same way on a simple Express server works 100%, however trying to implement this on my production app that was generated with Yeoman fullstack, i now get this undesiered result.
Whats the best way to render my array buffer to a PDF and display it to the res as a pdf file? Thanks
My current code (this is the working method in the basic Express Server)
res.setHeader('Content-type', 'application/pdf');
res.send(recordset[0].ordaAttachment);
recordset[0].ordaAttachment is just a PDF buffer in the format below. (This is just an example and not the real PDF)
{"type":"Buffer","data":[37,80,68,70,45,49,46,51,13,37,226,227,207,211,13,13,49,32,48,32,111,98]}

Related

PDF form to HTML conversion in angular 2?

In my application I am uploading a PDF file after uploading, I should display the information present in PDF file to a HTML form we are using angular 2 for frontend and node js for backend. Can any one help me with this.
Please remember PDF to HTML.
You can do one thing. Convert your pdf to a JSON. Use pdf2json.
pdf2json is a node.js module that parses and converts PDF from binary to json format, it's built with pdf.js and extends it with
interactive form elements and text content parsing outside browser.
The goal is to enable server side PDF parsing with interactive form
elements when wrapped in web service, and also enable parsing local
PDF to json file when using as a command line utility.
perform npm install pdf2json
Create an empty JSON whose key values will be the main headings from the pdf like a customer, age etc. Its values are obtained from the uploaded pdf.
Using this JSON values fill your form, on saving the form using, node.js save it to your DB. Is this what you want?
Simply what you need is to render a PDF in your application.
You could use this library ng2-pdf-viewer
Almost all the basic functionalities are available as properties to this component. You could manipulate it to your requirement.

uploading and processing file progress

I am working with Yii framework. My goal is to upload an xls file, parse it and load information into data base.
The problem is that the file is too big and it is required to have a progress bar corresponding to the process. I am not a very experienced developer and the task is tricky.
How can i accomplish that?
wierd that nobody advised anything...
I have done the following:
save the uploaded file and find the maximum row
redirect to another page with progress bar
send the starting row and a chunk size from the frontend
load the chunk into database (phpexcel allows to read a chunk from file);
get responce in front end and increase the progress bar.
Not that fast and informative method, but at least i didn't have to get hard with sockets

Attach an image to an existing PDF at the right position

So, here's the thing, we have a bunch of pdf forms for users on our website to fill out, we have a submission button inside every pdf form that sends the filled data through a http post method. We are already doing a pre-filled form, where the user fill general information on a html form, data that are used to generate a partially filled multiple pdf files, so whatever the pdf form the user has selected to fill, all of them will be regenerated having the pre-filled information that he just typed on the html form. I accomplish this by using pdftk (http://www.pdflabs.com/docs/pdftk-man-page/) that enables me to just do that. But we get to a point that to make this more efficient, the user must be able to draw their signature on the html side at the pre filled form stage, so we are using signature-pad for this (http://thomasjbradley.ca/lab/signature-pad/), than we create an image from the canvas that the plugin generates. But as each pdf has its own position for the signature, we must insert a placeholder into the pdf that'll be replaced for the signature image. So I came up with the idea to create a disabled text field on the pdf with the name of "signature", so through a nodejs application with the pdf2json module (https://github.com/modesty/pdf2json) I can parse the pdf form and get the position (x,y,w,h) of that particular field, being able to attach an image over the text field placeholder. So the problem is that pdftk don't give me support to attach an image to an existing pdf or even attach it in a certain position, I tried to find a nodejs module that would enables me to do that, but the only worthing nodejs module that I found was pdfkit (http://pdfkit.org/) but it only works creating a new pdf, not editing an exiting one, I looked into pdfkit source code and I discarded it because I realize that it wont work to my case of an existing pdf. So I came to a long way, got to the final stage of this implementation, came to the last step to get this working, and I'm just stack.
This is the output that I have from the pdf2json module for nodejs that is helping with the placeholder approach.
{
page: 7,
index: 317,
name: 'signature',
type: 'alpha',
x: 43.806640625,
y: 14.64195833333333,
w: 30.546828125000005,
h: 1.9339166666666756
}
If someone know any server application that I could run through an unix command at my server to attach an image over an existing pdf document, it'll fit my needs, don't need to be an exclusively nodejs module.
Obs.: I already checked it out the adobe echosign product, but it doesn't fit our needs, it's not free and don't solve our problem of attaching a signature to multiple pdf files from a single html form.
I realize that I could use the nodejs module pdfkit to generate a new blank PDF with the signature in the right position and just over the two pdfs, having the blank pdf with the signature image on the top like a stamp. I could do this with pdftk by command line:
pdftk form.pdf stamp signature.pdf output form-signed.pdf
There's another free application tool like pdftk that I just found out, and it's pdfjam. Also, if you can't use nodejs module pdfkit (different from the application pdfkt) to generate a new pdf with an image to the right spot, you have the stampTK tool (http://www.pdflabs.com/tools/stamptk-the-pdf-stamp-maker/) where you can parse through command line the image to be a stamp in an existing pdf, but this tool is paid (not much, and its worth it), but as I have the pdfkit module for nodejs that enables me to do just that along side the pdfkt application for free, I'm using that, and I also have more control of multiple signatures on the pdfkit module for nodejs. Hope this answer helps someone.

Download multiple PNGs with one request/response (nodejs)

I have one specific problem:
I have a single request, sent to an nodejs express application, which shall return multiple PNGs. The result is displayed directly in an image in the browser.
image.src = http://www.....
The PNGs are created server side, but I do not manage to send them back in one response and display them client side in the browser as images.
I piped the PNG content in a stream, which I sent back. I closed the stream at the end, when all files were sent back. I did not call res.end() in between.
What happens is that I receive a PNG File, really big (so I know it contains the data of all the images I requested), but my image in the browser only displays the first PNG - and I dont know how to split the response client side to view all my images.
I even can't view the PNGs if I download them directly on my pc (by calling the request manually) - the returning PNG is really big, but does only display the first PNG when I open it for example in gwenview.
It is no option to send the pngs in an zip file and extract it client side, because not all browser do support the unzipping. (I had a hard time learning this) I really dont know how to solve this problem. Do I need to set a specific header type I do not know yet? Do I need to send some delimiter inbetween the PNGs? How can I split the returning PNG client side?
Some help would be really appreciated!
Thank you!
There's no MIME type for multiple images. Your best bet is to generate a single html page and then embed the images in it. If you don't want to keep any of the images on your server, you can embed them using a data URL: https://github.com/heldr/datauri
An alternative option is use node-canvas to combine multiple images into one large one.

Image manipulation in NodeJS with base64 image data

I have a nodejs server that receives images encoded in base64 through a websocket. I would like to do some image manipulation on those images and send them back. I searched a little bit on the net to find some library to help me doing this, but all I could find were libraries that take images stored somewhere in the server side, do the manipulation and save back the image. Apparently all of them take as input a string containing the filename of the image, so I guess under the hood they are fetching the image manually through a file stream.
My question is, is there a library that may help me working directly on base64 data (that is, passing the data as input to the functions) or should I save every time the image on the server, modify it and send it back? I would rather not go with the latter because I'm working on some high-performance application, and all this saving/loading looks a waste of cycles. Otherwise, do you see some other way I could achieve this (that is, getting the image file without saving and loading it back, for example)?
Thanks.
Work with Buffers.
var img = new Buffer(img_string, 'base64');
// Work with your images like other tutorials do.
This one can work with "readable streams": https://github.com/aheckmann/gm
See the second set of examples in the readme.

Resources