Base64 pdf in html

Base64 . Guru

A virtual teacher who reveals to you the great secrets of Base64

PDF to Base64

Convert PDF to Base64 online and use the result string as data URI, HTML object, and others. Sometimes you have to send or output a PDF file within a text document (for example, HTML, JSON, XML), but you cannot do this because binary characters will damage the syntax of the text document. To prevent this, for example, you can encode PDF file to Base64 and embed it using the data URI. Please note that the PDF to Base64 encoder accepts any files types with a size of up to 50 MB. If you are looking for the reverse process, check Base64 to PDF.

About PDF

• Name: Portable Document Format
• Developer: Adobe Inc.
• MIME types: application/pdf, application/x-pdf, application/x-bzpdf, application/x-gzpdf
• File Extensions: .pdf
• Uniform Type Identifier: com.adobe.pdf

Output formats

The PDF to Base64 converter generates ready-made examples, depending on the selected output format. It automatically detects the content type of the uploaded PDF file, so that you simply copy the complete result.

If you do not know what output format you need, check the following examples to see how will look the result of the same Base64-encoded PDF file formatted in each of the available formats (as an example Base64 string I use first 64 bytes of a PDF file):

JVBERi0xLjUKJYCBgoMKMSAwIG9iago8PC9GaWx0ZXIvRmxhdGVEZWNvZGUvRmlyc3QgMTQxL04gMjAvTGVuZ3==

data:application/pdf;base64,JVBERi0xLjUKJYCBgoMKMSAwIG9iago8PC9GaWx0ZXIvRmxhdGVEZWNvZGUvRmlyc3QgMTQxL04gMjAvTGVuZ3==

  JVBERi0xLjUKJYCBgoMKMSAwIG9iago8PC9GaWx0ZXIvRmxhdGVEZWNvZGUvRmlyc3QgMTQxL04gMjAvTGVuZ3== 

If I missed an important output format for Base64-encoded PDF files, please let me know — I would love to implement it.

Comments (15)

I hope you enjoy this discussion. In any case, I ask you to join it.

I used this because some Angular components do not like waiting around and will error out. I made a pipe to put a blank pdf while the one requested is downloaded. This helps with a lot of issues

Hey! Thanks for sharing. By the way, I do not know any details about your app, but if possible, instead of a blank PDF consider to embed first page of your real PDF file.

It’s an Angular app where I use the blank page as temporary page while the PDF loads from the server. This is so that the app doesn’t error out when waiting for the real content to load. I don’t have any page cached or separated so only serving the first page wouldn’t work.

It’s a build off of this stack overflow issue:

Thanks for the explanation. I have not encountered such tasks, but at first glance it seems to be a nice solution.

Источник

Downloading base64 PDF in Javascript / React

Trying to download a base64 PDF/File from an API request with one click?

I ran into this problem while trying to download a PDF from an API response and figured I’d create a post that solves this for myself and other Front-End developers.

The Problem

Files could be saved in the backend as base64 encoded strings, this is to ensure that the data remains intact without modification during transport. Base64 is commonly used in a number of applications. So how do we download a file sent from the Backend as base 64 as it’s just a string usually in this format (data:application/pdf;base64,[base64]..)

The Solution

In a situation whereby the user isn’t making any request to an endpoint, the base64 file could be downloaded just like so (using the typical HTML anchor tag):

Otherwise, In a situation whereby the user has to fetch data from an endpoint and pass data onClick , this can be done simply by creating a function that accepts the base64 encoded stringand creating the anchor tag element with the file link as an href attribute, adds a download attribute and clicks on the created anchor element.

let pdf = < file: "data:application/pdf;base64,[base64]. ", file_name: "Purchase Invoice" > function downloadPDF(pdf) < const pdfLink = `$`; const anchorElement = document.createElement('a'); const fileName = `$.pdf`; anchorElement.href = pdfLink; anchorElement.download = fileName; anchorElement.click(); > 

I hope I’m able to help with this implementation, let me know in the comments.

Read more articles from me: blog.abdulqudus.com

Источник

How to Save a Base64 String as a PDF File on the Client Side in JavaScript

Base64 strings represent binary objects in textual format. They are designed to transmit binary data between channels that only support a textual format.

Sometimes, you might receive PDF files from various services as a Base64 string, and you may need to convert them to a PDF file on the client side after receiving the response.

This tutorial teaches you how to save a Base64 string as a PDF on the client side in JavaScript.

Base64 String Format

Base64 strings are in text format, and they have a metadata prefix on them.

Here’s the syntax:

• data is a common prefix
• Mediatype is a Mimetype string that represents the type of the file
• Base64 shows that the string is a Base64 string

The above string represents a Base64 string of a PDF file.

Base64 strings are also known as DataURLs. Data URLs are URLs that are prefixed with the data: scheme to allow users to embed files inline in the HTML document.

To convert a PDF file into a Base64 string, you can use the online Base64 Encoder tool. You can upload the file and click Encode. It’ll return a text file that contains the base64 equivalent string of the PDF file.

Now let’s use the output string and convert the Base64 string into a PDF file format on the client side using JavaScript.

How to Create a User Interface with HTML

For this demonstration, let’s create a simple UI in HTML. Our UI will have:

• A text area that accepts a Base64 string in the text box
• A Button , with a click event, that converts the Base64 string available in the text area into a PDF format and downloads it automatically.

Here’s the code to do that:

Base64 String Convert to PDF 

How to Use the Anchor Tag

To convert the Base64 string into a PDF file, you’ll need to do the following:

• Get the Base64 string from the Textarea
• Create an Anchor element in the HTML element
• Assign the Base64 string to the href attribute of the anchor element
• Assign a filename to the download attribute. The download instructs the browser to treat the linked URL as a download option. When the anchor link is clicked, the target specified in the href attribute is downloaded with the filename.

The following JavaScript code downloads the Base64 string as a PDF file:

function downloadAsPDF(pdf)

How to Handle Base64 Strings without Metadata

In some cases, a base64 strings might not have a metadata prefix. The user might receive just the Base64 data as a response.

Each file type has a common prefix in the Base64 string. For example,

• A JPG file Base64 string starts with /9j
• A PDF file Base64 string starts with JVB
• A PNG file Base64 string starts with iVB

The Stackoverflow answer here explains more in detail about finding the Mime type from the Base64 string without metadata.

Now let’s learn how to download Base64 string without metadata as a PDF file.

• Check if the Base64 starts with JVB , append the metadata data:application/pdf;base64, to the existing Base64 string, and download it using the anchor tag.
• Check if the Base64 string starts with the Data: prefix. If yes, directly download the file using the anchor tag.
• If the string doesn’t have the prefix data: or JVB , then it is not a valid PDF file Base64 string. Alert the user with an appropriate error message.

The following code demonstrates how to validate the Base64 string before downloading it as a PDF file.

function downloadAsPDF(pdf) < var base64String = document.getElementById("Base64StringTxtBox").value; if (base64String.startsWith("JVB")) < base64String = "data:application/pdf;base64," + base64String; downloadFileObject(base64String); >else if (base64String.startsWith("data:application/pdf;base64")) < downloadFileObject(base64String); >else < alert("Not a valid Base64 PDF string. Please check"); >> function downloadFileObject(base64String)

How to Use the Online Base64 Decode Tool

You can also use the Online Base64 Decode tool to convert the Base64 String into a PDF file. You can add the Base64 string in a text file and upload it to the online tool. It’ll convert the file and download it.

JSfiddle Link

The above two tutorials are available in the following JSfiddle links:

Conclusion

To summarise, in this tutorial you have learned what Base64 strings are, how to convert a Base64 string to a file, and then download it on the client side using JavaScript.

You’ve also learned about the Metadata prefixes of the Base64 strings.

Vikram Aruchamy

AWS Solutions Architect and Full-time Technical writer at stackvidhya.com and jsowl.com.

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons — all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

Источник