使用 HTML 和 javascript 显示和下载二进制文件答案

【问题标题】：Show and download binary files using HTML and javascript使用 HTML 和 javascript 显示和下载二进制文件
【发布时间】：2020-01-06 04:51:27
【问题描述】：

我一直在尝试显示和下载从 API 响应中获得的二进制（八位字节流）文件。

我尝试将文件转换为 base64 并在 href 和 iframe 中显示它，并直接显示文件及其 MINE TYPE (Application/pdf) 和默认类型 (Application/octet-stream) 但以上均无效.

data: "PDF-1.7
%����
301 0 obj
<</Linearized 1/L 366634/O 303/E 356306/N 1/T 366300/H [ 900 415]>>
endobj

462 0 obj
<</DecodeParms<</Columns 5/Predictor         
12>>/Filter/FlateDecode/ID[<C63CE28E0F04F6408738C45693E2B214> 
<EE45F3FA04D9F349A93DBCE0FF820FE0>]/Index[301 176]/Info 300 0 R/Length 
339/Prev 366301/Root 302 0 R/Size 477/Type/XRef/W[1 3 1]>>stream
hެ��/DA������-�V�,�(44J�F����F$�V!*�(6!����D)�/ 
����uZ�h�[8'��� 
䗓;g�ޙ�bL�Xc�>����ͫS�d^Új[uO�q�ur�֏ʊx�m���f^x-n��ln�R$.��
������=��?c�9��P㮈 
�(�S��q��)�`��&y�ρK�a�֎�O�;��    �r��KH.....  

content-length: "366634"
content-type: "application/octet-stream"

当我尝试使用 innerHTML 在窗口中显示文件时，我得到“加载 pdf 文档时出错”，图像文件也是如此。

有没有办法将文件正确转换为 base64 并显示/下载它（我之前做过，但 API 响应是一个 base64 文件）或者只是在 octet-stream 中显示文件。

【问题讨论】：

标签： javascript html file vue.js binary-image

【解决方案1】：

您的选择：

将 iframe 的 src 设置为您从中获取 PDF 数据的 URL
将文件转换为data:方案URL，并将其插入iframe的src
查找用于渲染 PDF 文件的 JS 库

您不能从 PDF 文件中获取数据并告诉浏览器将其视为 HTML（这就是将其注入到 innerHTML 所做的事情——在属性名称中有一个线索）。 PDF 不是 HTML。

【讨论】：

感谢您的回答@Quentiin，有没有办法将请求标头添加到 iframe src ？因为我花了 2 天时间尝试选项 2 和 3。
"有没有办法将请求标头添加到 iframe src" — 没有。