将 PDF 文件从 base64 字符串显示为 HTML

Question

我正在尝试如何使用来自数据库的此字符串在 HTML 中显示 pdf 文件。 （绳子太长所以我剪掉了）

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

当我使用atob()它显示像这样

'%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\x96­KÜõ!ì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 

我尝试了我在这里找到的其他解决方案，但它没有显示 pdf“无法加载 PDF 文档”。

感谢您的回答！

Answer 1

使用PDFJS从 base64 字符串显示它。

首先将您的 base64 字符串转换为二进制：

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;
}

然后你可以调用PDFJS.getDocument()方法。

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