Showing PDF file into HTML from a base64 string

Question

I'm trying how to display a pdf file in HTML with this string coming from database. (the string is too long so i cut it)

JVBERi0xLjUNCiW1tbW1DQoxIDAgb2JqDQo8PC9UeXBlL0NhdGFsb2cvUGFnZXMgMiAwIFIvTGFuZyhlbi1VUykgL1N0cnVjdFRyZWVSb290IDIzIDAgUi9NYXJrSW5mbzw8L01hcmtlZCB0cnVlPj4+Pg0KZW5kb2JqDQoyIDAgb2JqDQo8PC9UeXBlL1BhZ2VzL0NvdW50IDIvS2lkc1sgMyAwIFIgMTggMCBSXSA+Pg0KZW5kb2JqDQozIDAgb2JqDQo8PC9UeXBlL1BhZ2UvUGFyZW50IDIgMCBSL1Jlc291cmNlczw8L0ZvbnQ8PC9GMSA1IDAgUi9GMiA5IDAgUi9GMyAxNCAwIFI+Pi9FeHRHU3RhdGU8PC9HUzcgNyAwIFIvR1M4IDggMCBSPj4vWE9iamVjdDw8L0ltYWdlMTYgMTYgMCBSL0ltYWdlMTcgMTcgMCBSPj4vUHJvY1NldFsvUERGL1RleHQvSW1hZ2VCL0ltYWdlQy9JbWFnZUldID4+L01lZGlhQm94WyAwIDAgNjEyIDkzNl0gL0NvbnRlbnRzIDQgMCBSL0dyb3VwPDwvVHlwZS9Hcm91cC9TL1RyYW5zcGFyZW5jeS9DUy9EZXZpY2VSR0I+Pi9UYWJzL1MvU3RydWN0UGFyZW50cyAwPj4NCmVuZG9iag0KNCAwIG9iag0KPDwvRmlsdGVyL0ZsYXRlRGVjb2RlL0xlbmd0aCA1NDU+Pg0Kc3RyZWFtDQp4nLWWX2vbMBTF3w3+DvdRGliRrv5D

when i use atob() it shows like this

'%PDF-1.5\r\n%µµµµ\r\n1 0 obj\r\n<</Type/Catalog/Pages 2 0 R/Lang(en-US) /StructTreeRoot 23 0 R/MarkInfo<</Marked true>>>>\r\nendobj\r\n2 0 obj\r\n<</Type/Pages/Count 2/Kids[ 3 0 R 18 0 R] >>\r\nendobj\r\n3 0 obj\r\n<</Type/Page/Parent 2 0 R/Resources<</Font<</F1 5 0 R/F2 9 0 R/F3 14 0 R>>/ExtGState<</GS7 7 0 R/GS8 8 0 R>>/XObject<</Image16 16 0 R/Image17 17 0 R>>/ProcSet[/PDF/Text/ImageB/ImageC/ImageI] >>/MediaBox[ 0 0 612 936] /Contents 4 0 R/Group<</Type/Group/S/Transparency/CS/DeviceRGB>>/Tabs/S/StructParents 0>>\r\nendobj\r\n4 0 obj\r\n<</Filter/FlateDecode/Length 545>>\r\nstream\r\nx\x9Cµ\x96_kÛ0\x14Åß\rþ\x0E÷Q\x1AX\x91®þC\b´¶\x17R\x96KÜõ!ìa\x94.OÝØöýa\x92\x12X\x96Z¬Nµ<\x98È\x96ý;GWçÚ0»\x85ù|¶nW\x1DðÅ\x02®»\x16~Ô\x15g<þ¼@à`ÂÑK\x03?\x1Fëêþ\r|««ë¡®fo\x05\b\x01Ã×º\x12a\x12\x07\x01>Ü\x86\x1A\x9C\x96L;\x18\x9EÂ¤åÖÂþWx ìÓÈ\x1DGËºÚ\x91õ\x15µä\x86*ò\x81J²\x01Ú\bNúw};PMV´Ñä\x13m\x1Cé!\f\x05ÐÏ0ÜÔU\x1FÐ\x1Fëê¥\x1Añ\\£°\x8Eñ¿4&i\x07Es.Z\\\x04z¶\x18ÂI¦r r¡\x9D\x11\x8AÉÛ!ÛvÓ÷´\x91ä}Xä{Ú Ù¤u\x1DÂ0ýI\x87xqYH\x0F\x9A Çýo×h\x1CSYJ»\x05\x1Av\x92ôÑ¹(\x85ô\x8EÙ\x17ú\x82~Ý\x02\x9C$KLL\x96<§k)\x98° \x1D2!\'ãñµÁ62\x05[\x1Bdú9þ<Æ6\x17b,µé\x95\x8BÑÊÈ)Ö)´\x88Ñ\x1A§\x14í\x14Ú\x94·3BqÌe)WÔ\x90»\x8E6öP³XÉÐ\x8F}:\x1FûC\x17Ï\x02u\x87j®J\x85\nuÌñ¨&\b\x8F´0<ìH×\x97ÂIË\\\x06·;zvä6ìÔM)¢öÌØ<±\x11Ç¥½+\x05t\x82e\x8B\x1C2iþÔ7\x96µÔæ\x92\x02YÖf»\x95¾Tô¥ây\x7Fÿê\x83²P\x1BÆÐ\x19B\x94¦âÕkñÇ6\x8C\x12\x19NÇëBo\x01äþ\x12÷¦\x10^8Ë\x14NÆÛQ¼¶2\t\x88\x1F\x14§\x12\x94q\x89\x1Aó\x8B\x81\x9CÞ¼\n\x1Eâ\'íêéËþQ\x18è¾Ã\x18È\x8D\x82P!s\t%¹=C\x85¦t\x80ùx%ÀPÇÉ\'0{\nû\r<y4\'\r\nendstream\r\nendobj\r\n5 0 obj\r\n<</Type/Font/Subtype/TrueType/Name/F1/BaseFont/ABCDEE+Calibri,Bold/Encoding/WinAnsiEncoding/FontDescriptor 6 0 R/FirstChar 32/LastChar 87/Widths 52 0 R>>\r\nendobj\r\n6 0 obj\r\n<</Type/FontDescriptor/FontName/ABCDEE+Calibri,Bold/Flags 32/ItalicAngle 0/Ascent 750/Descent -250/CapHeight 750/AvgWidth 536/MaxWidth 1781/FontWeight 700/XHeight 250/StemV 53/FontBBox[ -519 -250 1263 750] /FontFile2 50 0 R>>\r\nendobj\r\n7 0 obj\r\n<</Type/ExtGState/BM/Normal/ca 1>>\r\nendobj\r\n8 0 obj\r\n<</Type/ExtGState/BM/Normal/CA 1>>\r\nendobj\r\n9 0 obj\r\n<</Type/Font/Subtype/Type0/BaseFont/ABCDEE+Calibri,Bold/Encoding/Identity-H/DescendantFonts 10 0 R/ToUnicode 49 0 R>>\r\nendobj\r\n10 0 obj\r\n[ 11 0 R] \r\nendobj\r\n11 0 obj\r\n<</BaseFont/ABCDEE+Calibri,Bold/Subtype/CIDFontType2/Type/Font/CIDToGIDMap/Identity/DW 1000/CIDSystemInfo 12 0 R/FontDescriptor 13 0 R/W 51 0 R>>\r\nendobj\r\n12 0 obj\r\n<</Ordering(Identity) /Registry(Adobe) /Supplement 0>>\r\nendobj\r\n13 0 obj\r\n<</Type/FontDescriptor/FontName/ABCDEE+Calibri,Bold/Flags 32/ItalicAngle 0/Ascent 750/Descent -250/CapHeight 750/AvgWidth 536/MaxWidth 1781/FontWeight 700/XHeight 250/StemV 53/FontBBox[ -519 -250 1263 750] /FontFile2 50 0 R>>\r\nendobj\r\n14 0

I tried other solutions I found here but it doesnt show the pdf "Failed to load the PDF document".

Thanks for answer!

Are you sure there is a ' in front of the PDF bytestream? There shouldn't. — Ferdy
– Ferdy, Commented Jan 25, 2022 at 6:50
@Ferdy I don't exactly know, I just copied the string from console when testing the atob() function and it has ' on it — Lex Aeterna
– Lex Aeterna, Commented Jan 25, 2022 at 6:53

michal.jakubeczy · Accepted Answer · 2022-01-25 07:31:03Z

1

Use PDFJS to display it from the base64 string.

First transform your base64 string to binary:

function convertToBinary(base64) {
  var raw = window.atob(base64);
  var rawLength = raw.length;
  var array = new Uint8Array(new ArrayBuffer(rawLength));

  for(var i = 0; i < rawLength; i++) {
    array[i] = raw.charCodeAt(i);
  }
  return array;
}

And then you can call PDFJS.getDocument() method.

var pdf = convertToBinary({yourBase64String});
PDFJS.getDocument(pdf);

answered Jan 25, 2022 at 7:31

michal.jakubeczy

9,7771 gold badge71 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lex Aeterna Over a year ago

Hello, I'm sorry im pretty new to web development, how do I embed this thing into my project?

Shashank Singh Over a year ago

Don't know why but not working

Collectives™ on Stack Overflow

Showing PDF file into HTML from a base64 string

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related