React JS show pdf from string - javascript

I have a problem displaying a pdf file. I am sending an api query to a server that stores pdfs in base64. After receiving a response from the server, I get data like this:
It looks like the pdf has been converted to a string. In react js having such data, is it possible to display the pdf for the user?

Related

Not able to parse my json data coming from backend flask route file to show it in front end

I have a python dictionary in my flask route file where it is converted in json. but when i fetch the file in front end file it shows that data is recieved but when i do data parsing. It shows invalid Json instead my backend has already made a Json string.
This is my front end fetch file.
enter image description here
This is mt backend flask route file. Where json is already made.
enter image description here
After fetch call to recieve data from backend this msg comes in front end
enter image description here
I tried to parse the data using json.parse(data);
but it is not working.
Because some responses are coming from your Flask server, it appears that the problem is with JSON parsing on the client side. I believe there is an error in the way you are parsing the JSON.
fetch("<top-level_domain>/beamd_cal").then(data => data.json()).then(data)=> {
console.log("Data from the server: ", data)
}

jsPDF Attach PDF to mail

I have an HTML page with some input. When the customer clicks on Send button the below converted pdf has tobe sent in mail directly in php??Is it can be done?? If yes,how it can be done can someone help me in this flow
<script>
$('#print-btn').click(()=>{
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML($('#divName')[0],function() {
pdf.save('billing.pdf');
});
});
</script>
As far as I know jsPDF only let you create a PDF on the client side of your application/website.
If you want to attach the generated PDF to an email you first have to pass the file created to a PHP script on your server side and then send the file like a normal attachment.
To pass the file you can encode your file in base64 and pass it as a string using AJAX to a PHP page where you will decode the data and generate the file with the content received.
After that you can attach it to an email and send it. The process here depends on what is your system of choiche for sending emails.
Another approach is to generate the file directly on the server side of your application/website so you can skip the js to php step.

IBM Worklight- HTTP adapter

How to create an HTTP adapter to retrieve the file on a web host.
I'm confuse because HTTP adapter is used to retrieve json output used for RSS feed. How can i target for files (e.g .jpg).
thanks.
You can follow the instructions provided in this blog post.
The steps are as follows:
Provide the remote image URL as a parameter to the adapter
Base64 encode the returned image on the server using a Java utility
Return the encoded base64 string to the application
Base64 decode the string and display the image

Image corrupted or truncated Phonegap

I'm using Phonegap to develop an android application. Users take photo, the photo is stored in a mysql database (medium-blob column). I store them using a simple INSERT INTO query, without changing the data. The data are sent server side using a REST call (PUT)
Here's an example of the content of this column:
thumb = '/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDACgcHiMeG...'
It is written on the phonegap documentation that the image captured through the camera is encoded in base 64.The problem is, when i try to retrieve my images in the database, I cannot display them using this JS code :
$('#myImg').attr("src", "data:image/png;base64," + data
Any ideas of where this "Image corrupted and truncated" come from ? :(
The problem was located in the way I was sending the images.
I was sending the data through a string. I tried to pass them nested in a json object and It worked.

How to get hold of image data from webpage using Javascript

I'm using jsOauth-twitter to upload an image to twitter which calls the update_with_media api method. It looks like it needs the actual image data. This is already on my webpage inside a normal <img src="localfile"> tag.
Using Javascript, can I get at the actual image data (JPEG) to pass it to the function? Is it available in the DOM? I need the raw image data so I can pass it to twitter as application/octet-stream, so base64 is no good to me.
It looks like the API requires the form to be sent as multipart/form-data, which means the media[] parameter is expecting a file rather than binary or base64 encoded data. If you use HTML file input inside a form, this should be fairly straightward.
If you must use the <img> tag, then it would be difficult. All I can think of is draw the image to a <canvas>, obtain a base64-encoded URI with toDataURI(), decode it to obtain the raw image data using window.atob(), then build the multipart/form-data POST body manually. This answer has some sample code for the first couple of things.
The Blob API may help in creating a file-like object which your OAuth library can accept (rather than manually building the request body), but its not very well supported yet.

Categories