后端输出二进制数据,前端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>
相关推荐
牛马1111 分钟前
Flutter BoxDecoration border 完整用法
开发语言·前端·javascript
CodeSheep2 分钟前
宇树科技的最新工资和招人标准
前端·后端·程序员
奔跑的卡卡7 分钟前
Web开发与AI融合-第二篇:TensorFlow.js实战:在浏览器中运行AI模型
前端·人工智能·tensorflow
IT_陈寒8 分钟前
Vue的响应式居然在这里埋坑,差点加班到天亮
前端·人工智能·后端
We་ct11 分钟前
LeetCode 149. 直线上最多的点数:题解深度剖析
前端·javascript·算法·leetcode·typescript
jarvisuni21 分钟前
JCode添加批量测试,一键同步运行6个Claude Code!
java·服务器·前端
小李子呢021127 分钟前
前端八股CSS(3)---水平垂直居中的实现方法
前端·css·css3
M ? A29 分钟前
Vue3 转 React:组件透传 Attributes 与 useAttrs 使用详解|VuReact 实战
前端·javascript·vue.js·经验分享·react.js·开源·vureact
火山引擎开发者社区29 分钟前
方舟 Coding Plan 支持 Embedding 模型,让 AI Agent “找得更准、记得更久”
前端·javascript·人工智能
whuhewei35 分钟前
微前端之模块联邦
前端·架构