js对中文进行base64编码和解码操作,解决中文乱码问题

news2024/12/23 4:40:28

我使用github api的接口获取文件内容,然后使用atob进行解码,但是发现:乱码.......糟心啊

所以就有了我封装的方法:

export const encode64 = (str) => {
  // 首先,我们使用 encodeURIComponent 来获得百分比编码的UTF-8,然后我们将百分比编码转换为原始字节,最后存储到btoa里面
  return btoa(
    encodeURIComponent(str).replace(
      /%([0-9A-F]{2})/g,
      function toSolidBytes(_, p1) {
        return String.fromCharCode(Number("0x" + p1));
      }
    )
  );
};

export const decode64 = (str) => {
  // 过程:从字节流到百分比编码,再到原始字符串
  return decodeURIComponent(
    atob(str)
      .split("")
      .map(function (c) {
        return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
      })
      .join("")
  );
};

然后调用:

再看结果:完美

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/963116.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

m1芯片macOS系统卡顿问题解决方法

m1芯片的MacBook在使用过程中会出现“假死”的情况。主要表现为鼠标转圈圈,很多操作都不能实现,不能输入文本,系统ui也响应十分慢,而资源监视却看不到很高的占用。一般出现此类情况只能关机或重启。这其中的"罪魁祸首"便…

管理类联考——逻辑——形式逻辑——汇总篇——知识点突破——形式逻辑——联言选言假言——矛盾

角度 角度——汇总——持续优化 性质 (1) 所有的 S 是 P 所有的S是P 所有的S是P 与 有的 S 不是 P 有的S不是P 有的S不是P矛盾 (2) 所有的 S 不是 P 所有的S不是P 所有的S不是P 与 有的 S 是 P 有的S是P 有的S是P 矛盾 &#xf…

Spring源码解析(十):spring整合mybatis源码

Spring源码系列文章 Spring源码解析(一):环境搭建 Spring源码解析(二):bean容器的创建、默认后置处理器、扫描包路径bean Spring源码解析(三):bean容器的刷新 Spring源码解析(四):单例bean的创建流程 Spring源码解析(五)&…

计算机毕设之基于数据可视化的智慧社区内网平台python+django+mysql(含开题+源码+部署教程)

系统阐述的是一款基于数据可视化的智慧社区内网平台的设计与实现,对于Python、B/S结构、MySql进行了较为深入的学习与应用。主要针对系统的设计,描述,实现和分析与测试方面来表明开发的过程。开发中使用了 django框架和MySql数据库技术搭建系…

el表达式和标签库的简单使用!!!

备工作1:tomcat10.1.13版本,可去官网下载,不会下载的童靴看过来:如何正确下载tomcat???_明天更新的博客-CSDN博客 准备工作2:添加架包(需要三个架包) jstl架包…

老师们快看过来,这里有使用ChatGPT当助教的方法

最近OpenAI官方博客发布了一篇文章How teachers are using ChatGPT(老师们如何使用ChatGPT),讲的是老师们如何在教学中使用ChatGPT,其中有几个例子挺好的,我转述一下,希望对你有用。 制定教案 第一个例子…

[git]分支操作

Checkout 相当于切换到该分支,但是因为不能直接操作远程分支,会在本地同步一个完全一样的分支。 注意:切换分支前本地先进行提交(addcommit),否则有可能代码会丢失。 New Branch from Selected... 创建一…

【小沐学Unity3d】3ds Max 多维子材质编辑(Multi/Sub-object)

文章目录 1、简介2、精简材质编辑器2.1 先创建多维子材质,后指定它2.2 先指定标准材质,后自动创建多维子材质 3、Slate材质编辑器3.1 编辑器简介3.2 编辑器使用 结语 1、简介 多维子材质(Multi/Sub-object)是为一个模形&#xff0…

信息安全检测和应用信息系统安全测试

安全测试 信息安全检测,为软件/信息系统出具的软件检测报告(或第三方检测报告、软件安全测试报告),是信息系统/软件上线前都需要的测试报告。 信息安全检测的标准: 信息安全检测依据DB31/T272-2008《计算机信息系统…

【ICer的脚本练习】“精通各种语言的hello world!“

系列的目录说明请见:ICer的脚本练习专栏介绍与全流程目录_尼德兰的喵的博客-CSDN博客 前言 这一节呢主要是检查一下Linux和win环境是不是能正常的支持咱们的脚本学习,所以来答应各种语言的hello world!,毕竟打印了就是学会了٩(๑❛ᴗ❛๑)۶…

Nex.js Web 应用程序 SSG 与 SSR——选择正确的渲染方法

Next.js,一个流行的React框架,改变了开发人员构建现代Web应用程序的方式。它提供了强大的功能,例如服务器端渲染 (SSR) 和静态站点生成 (SSG),可优化应用程序的性能和用户体验。在这…

03. 程序在内存中被CPU执行

1. 程序是什么? 程序是由指令和数据组成的。 当我们使用计算机运行一个程序时,计算机会读取程序中的指令一步步执行,直到达到程序结束的地方。 程序的指令:就像一份菜谱,告诉计算机按照哪些步骤来做事情。 程序的数…

【原创】H3C三层交换机的路由模式

网络拓扑图 将三层交换机当路由器使用 交换机配置 <H3C>dis stp briefMST ID Port Role STP State Protection0 GigabitEthernet1/0/1 DESI LEARNING NONE0 GigabitEthernet1/0/2 …

docker常用中间件安装

文章目录 1、前言2、中间件安装2.1、mysql2.2、gitlab容器2.3、nacos2.4、redis2.5、xxljob2.6、zipkin2.7、sentinel2.8、seata2.8.1、获取镜像2.8.2、运行容器并获取配置 2.9、rockerMQ2.9.1、rockerMQ-namesrv2.9.2、rockerMQ-broker2.9.3、rockerMQ-console 2.10、jenkins2…

java企业工程管理系统源码之提高工程项目管理软件的效率

高效的工程项目管理软件不仅能够提高效率还应可以帮你节省成本提升利润 在工程行业中&#xff0c;管理不畅以及不良的项目执行&#xff0c;往往会导致项目延期、成本上升、回款拖后&#xff0c;最终导致项目整体盈利下降。企企管理云业财一体化的项目管理系统&#xff0c;确保…

文件分片上传

概要 在日常开发中上传文件是常见的功能&#xff0c;像使用 SpringBoot 作为服务端接收上传的文件是很方便的&#xff0c;但是默认情况下 SpringBoot 为我限定了单次上传文件的大小&#xff0c;默认是1MB&#xff0c;当我们单次上传的大小超过1MB的时候就会报错&#xff0c;这…

Vmware虚拟机操作系统和本地操作系统互Ping要求、解决方式讲解

Vmware虚拟机操作系统和本地操作系统互Ping讲解 在虚拟化环境中&#xff0c;如VMware&#xff0c;虚拟机&#xff08;Virtual Machine&#xff0c;简称VM&#xff09;和本地操作系统之间进行Ping测试是一项常见的任务。Ping测试可用于检查虚拟机是否能够与本地操作系统或其他网…

wap2app 隐藏系统状态栏

一、首先创建wap2App项目 1、文件》新建》项目 2、选择Wap2App项目&#xff1a;输入项目名称、网站首页地址&#xff08;如果是本地localhost的话改为你的IP地址即可&#xff09;&#xff0c;点击创建 二、创建完wap2App项目后 隐藏系统状态栏只要修改1、2选项即可 1、找到根…

智慧工地源码 智慧大屏、手机APP、SaaS模式

一、智慧工地可以通过安全八要素来提升安全保障&#xff0c;具体措施包括&#xff1a; 1.安全管理制度&#xff1a;建立科学完善的安全管理制度&#xff0c;包括安全标准规范、安全生产手册等&#xff0c;明确各项安全管理职责和要求。 2.安全培训教育&#xff1a;对工地人…

港科夜闻|香港科大商学院李莹莹教授获研究资助局(RGC)授予研资局高级研究员头衔...

关注并星标 每周阅读港科夜闻 建立新视野 开启新思维 1、香港科大商学院李莹莹教授获研究资助局(RGC)授予“研资局高级研究员”头衔。李教授的研究项目“金融风险大数据”将利用金融大数据进行严谨、全面的统计研究&#xff0c;更准确地进行风险评估和预测&#xff0c;构建高质…