Providing the Object tag with data directly

H. Saleh picture H. Saleh · Apr 5, 2017 · Viewed 10.8k times · Source

I wanted to embed a PDF file in my website, it looked like this:

<object data="data/PDFTest1.pdf" type="application/pdf" id="data"></object>

But then I wanted to first Get the file with ajax (in a javascript file), edit it's source code in JavaScript, and then create an <object> and give it the resulting data. The problem is that the Object needs a url in its data attribute, and does not accept the actual data directly. How can I handle this?

Is there a way to create a "fake url" in javascript for example?

Or can I somehow pass the data in another way to the object?

Or should I maybe use some other tag ?

Thanks in advance and sorry for my English.

Answer

joelgeraci picture joelgeraci · Apr 5, 2017

You don't actually need a URL. You can convert the PDF to base64 and set the data attribute to the data itself. You just need to prefix the base64 with "data:" then the mime type, a semi-colon, "base64," and then the base64 encoded string that represents the PDF.

<object data="data:application/pdf;base64,YOURBASE64DATA" type="application/pdf"></object>