如何在Javascript中通过<embed>标签展示字节数组格式的PDF文件

你当前的写法无法正常运行，因为<embed>标签的src属性不能直接识别字节数组，需要先将字节数组转换为浏览器可识别的临时资源链接，具体实现步骤如下：

• 第一步：将PDF字节数组转换为Blob对象
  如果你的字节数组是普通Array类型，需要先转为Uint8Array类型，再生成MIME类型为application/pdf的Blob：

// 假设myitem为你拿到的PDF字节数组
const pdfBlob = new Blob([new Uint8Array(myitem)], { type: 'application/pdf' });

如果字节数组是后端接口返回的，请求时需要指定responseType: 'arraybuffer'，避免字节流被默认转成字符串导致解析失败。

• 第二步：生成临时资源链接
  调用浏览器API为Blob对象生成临时可访问的URL：

const pdfObjUrl = URL.createObjectURL(pdfBlob);

• 第三步：将链接赋值给embed的src属性
  你原有的缩放、隐藏工具栏等参数可以直接拼接在临时URL后面：

const embedHtml = `<embed id="preview_pdf" src="${pdfObjUrl}?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" frameborder="0" oncontextmenu="return false" onselectstart="return false" ondragstart="return false" allowfullscreen></embed>`;
// 将生成的embed标签插入到页面对应容器中即可
document.querySelector('#你的容器id').innerHTML = embedHtml;

注意：URL.createObjectURL生成的临时链接会占用浏览器内存，在PDF预览关闭/组件卸载/切换新的PDF预览时，需要调用URL.revokeObjectURL(pdfObjUrl)手动释放内存，避免内存泄漏。该方案依赖浏览器自带的PDF预览能力，所有现代主流浏览器均已默认支持。

内容的提问来源于stack exchange，提问作者Himelu5