图像未使用 javascript 以 pdf 格式呈现答案

【问题标题】：Image not rendered in pdf using javascript图像未使用 javascript 以 pdf 格式呈现
【发布时间】：2018-12-28 13:45:12
【问题描述】：

我正在从后端向前端发送一个 pdf 二进制字符串。虽然 pdf 成功渲染，但它不会渲染图像。假设转换为二进制是后端的问题，我编译了二进制和生成的 pdf 渲染图像。

所以问题出在前端。

const binaryString = "%PDF-1.3\n%\xFF\xFF\xFF\xFF\n1 0 obj\n<< /Creator <feff0050007200610077006e>\n/Producer <feff0050007200610077006e>\n>>\nendobj\n2 0 obj\n<< /Type /Catalog\n/Pages 3 0 R\n>>\nendobj\n3 0 obj\n<< /Type /Pages\n/Count 1\n/Kids [5 0 R]\n>>\nendobj\n4 0 obj\n<< /Length 129\n>>\nstream\nq\n\nBT\n36.0 747.384 Td\n/F1.0 12 Tf\n[<48656c6c6f2057> 30 <6f72> -15 <6c64>] TJ\nET\n\n\nq\n32.0 0.0 0.0 32.0 36.0 710.128 cm\n/I1 Do\nQ\nQ\n\nendstream\nendobj\n5 0 obj\n<< /Type /Page\n/Parent 3 0 R\n/MediaBox [0 0 612.0 792.0]\n/CropBox [0 0 612.0 792.0]\n/BleedBox [0 0 612.0 792.0]\n/TrimBox [0 0 612.0 792.0]\n/ArtBox [0 0 612.0 792.0]\n/Contents 4 0 R\n/Resources << /ProcSet [/PDF /Text /ImageB /ImageC /ImageI]\n/Font << /F1.0 6 0 R\n>>\n/XObject << /I1 7 0 R\n>>\n>>\n>>\nendobj\n6 0 obj\n<< /Type /Font\n/Subtype /Type1\n/BaseFont /Helvetica\n/Encoding /WinAnsiEncoding\n>>\nendobj\n7 0 obj\n<< /Type /XObject\n/Subtype /Image\n/ColorSpace /DeviceRGB\n/BitsPerComponent 8\n/Width 32\n/Height 32\n/Length 653\n/Filter [/DCTDecode]\n>>\nstream\n\xFF\xD8\xFF\xE0\x00\x10JFIF\x00\x01\x01\x00\x00\x01\x00\x01\x00\x00\xFF\xDB\x00C\x00\t\x06\a\b\a\x06\t\b\a\b\n\n\t\v\r\x16\x0F\r\f\f\r\e\x14\x15\x10\x16 \x1D\"\" \x1D\x1F\x1F$(4,$&1'\x1F\x1F-=-157:::#+?D?8C49:7\xFF\xDB\x00C\x01\n\n\n\r\f\r\x1A\x0F\x0F\x1A7%\x1F%77777777777777777777777777777777777777777777777777\xFF\xC0\x00\x11\b\x00 \x00 \x03\x01\"\x00\x02\x11\x01\x03\x11\x01\xFF\xC4\x00\x18\x00\x01\x01\x01\x01\x01\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x06\x05\a\x03\x04\xFF\xC4\x00-\x10\x00\x02\x01\x04\x00\x04\x04\x04\a\x00\x00\x00\x00\x00\x00\x00\x01\x02\x03\x00\x04\x05\x11\x06\x12AQ\x13\x142\x81\x15!1\xB1Raqr\x91\xC1\xF0\xFF\xC4\x00\x1A\x01\x00\x01\x05\x01\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x04\x00\x01\x02\x03\x05\x06\xFF\xC4\x00#\x11\x00\x01\x03\x03\x03\x05\x01\x00\x00\x00\x00\x00\x00\x00\x00\x00\x01\x02\x03\x11\x00\x041\x05!A\x12\x13\"$Qq\xFF\xDA\x00\f\x03\x01\x00\x02\x11\x03\x11\x00?\x00\xD92\xF7\xDF\x0E\xB1i\x82\xF3\xC8HH\xD3\xF11\xFA\x0F\xF7j\x88\xD8\xF4\xB8\"|\xBC\xAFq1\x1F1\xBD*~@\n\xA1\xC5\n\xDEF\t\xC0\xDA\xDB\xDC$\xAF\xFBF\xC7\xF7R2\x19\x84\xB0\x8C\xCA\xCB\x13\xF3\x10\x13\xC4$\x02}\x81\xFBW5\xAB?\xEC\x06\x9C>1\xB6`\x9F\xBBf\x8D\xB7D\xA6Fk\x912c$3b\x1D\x95G\xAE\x16<\xCA\xE3\xDF\xE8im\x85\xD2^\xD9\xC5s\x17\xA6E\xDE\xBB\x1E\xA3\xD8\xD1ho\xA2\x9B\x1C\xB9\x19#H\x83.\xCA\x03\xD7\xB7\xF3Wxn\a\xB7\xC2ZG(\xD3r\x96\xD7\xEAI\x1Fz\xAF@\xB8uO8\xD4\xCA\x06?f\x9E\xE8'\xA4\x1Ej\x93(e*\xC0\x10F\x88=h\x06i\xF1\xF6\xE9\x94\xC5\xDCO\nI\n\xB1\x81\x1D\xB5\xAD\xAF2\x81\xBE\xA3u\xA0P\x1E.\xC0\xE4\x17-w\x95\xB6\xB4\xF3\xB6\xF3\xAAsE\x18V\x91J\x80\xBE\x96F\xDF\xB5m_\xE9\xED\xDE\xA1)Q\x82\f\x82(V\xDD-\x9D\xAB\xD5\x878\xEB\xFC\xB5\xA5\x8D\x9C\x91Iki\x01\x98\xC6\xAD\xCC7\xB0\x06\xFB\x90H4\xD2\x85\xF0.\x0E\xEE\xDA\xEEl\xAD\xE4\x1ETI\x0F\x85\x15\xB9\x000\e\x04\x96\x00\x00>`t\xEFM*V\x16(\xB2k\xB6\x83<\xC9\xCD'\x1C+2k\xFF\xD9\nendstream\nendobj\nxref\n0 8\n0000000000 65535 f \n0000000015 00000 n \n0000000109 00000 n \n0000000158 00000 n \n0000000215 00000 n \n0000000395 00000 n \n0000000706 00000 n \n0000000803 00000 n \ntrailer\n<< /Size 8\n/Root 2 0 R\n/Info 1 0 R\n>>\nstartxref\n1623\n%%EOF\n"

const blob = new Blob([binaryString], {type: 'application/pdf'});
window.open(window.URL.createObjectURL(blob));

这就是我在前端将二进制字符串转换为 pdf 的方式。文本呈现完美，但图像无法呈现。

PS：我附上了一个可以工作的 pdf 二进制文件

【问题讨论】：

标签： javascript pdf

【解决方案1】：

在后台，将二进制字符串转换为base64 Base64.encode64(pdf.render)

然后在前端将base64转换回二进制，其中data是来自服务器的转换后的base64

const binaryString = atob(data);
 const len = binaryString.length;
        const buffer = new ArrayBuffer(len);
        const view = new Uint8Array(buffer);
        for (let i = 0; i < len; i += 1) {
          view[i] = binaryString.charCodeAt(i);
        }
        const blob = new Blob([view], { type: 'application/pdf' });

【讨论】：