后端输出二进制数据,前端fetch接受二进制数据,并转化为字符输出

在PHP中,你可以将字符串或其他数据类型转换为二进制数据,并通过HTTP响应发送给前端。

php 复制代码
<?php
//设置正确的Content-Type头部,以便前端可以正确处理二进制数据
header('Content-Type:application/octet-stream');
$str ="hello world!";
$binaryData=hex2bin(bin2hex($str));
echo $binaryData;
?>

在这个前端代码中,我们使用fetch API请求PHP脚本,并获取二进制数据。然后,我们将ArrayBuffer转换为字符串,以便在JavaScript中使用。

javascript 复制代码
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <title>测试后端输出二进制,前端接收二进制并转化为字符</title>
    </head>
    <body>
        <script>
            fetch('fetchArraybuffer.php',{
                method:'get'
            })
            .then((response)=>{
                if(response.ok && response.status===200)
                {
                    return response.arrayBuffer();
                }
                throw new Error('返回数据出错');
            })
            .then((data)=>{
                const decoder=new TextDecoder('utf-8');
                const decodeStr=decoder.decode(data);
                console.log(decodeStr);  
            })
            .catch((error)=>{
                console.log('连接后端出错',error);
            });
        </script>
    </body>
</html>
相关推荐
谙忆10244 分钟前
WebCodecs 实战:用 ImageDecoder 和 VideoFrame 在浏览器里做硬件加速的帧处理
前端
JerrySir7 分钟前
密码没泄露,2FA 也没失效:Chrome 146 为什么还要让 Cookie“搬不走”?
前端
小蚂蚁i7 分钟前
React Hooks 原理深度解析:从会用到真正懂
前端·react.js
触底反弹13 分钟前
Vue 实战:手把手教你实现 ChatGPT 同款打字机效果
前端·javascript·人工智能
BreezeJiang15 分钟前
Vue 3 流式输出实战:ReadableStream + DeepSeek API 实现打字机对话
前端
用户EasyAdminBlazor22 分钟前
EasyAdminBlazor 第十篇:数据导入导出——批量处理不再麻烦
前端·后端
饮茶三千23 分钟前
电子保函模板编辑器实战二:HTML→FTL 编译转换的设计与实现
前端·vue.js·设计模式
ricardo197328 分钟前
SSR / SSG 性能对比:Next.js 三种渲染模式实测数据
前端·面试
ikoala44 分钟前
Codex 小白入门:从安装到插件、MCP、Skills,一篇把配置讲明白
前端·javascript·后端
雪隐1 小时前
用Flutter做背单词APP-04一个人,2周,从零撸出一个背单词App
前端·人工智能·后端