前端字符串转base64生成二维码下载(有坑,勿踩)

bug4 (3).jpeg

需求:pc端传参调接口后端生成一个二维码下载,移动端直接扫码显示对应内容

处理一: 直接将字段传给后端生产二维码下载

问题: 某些情况下移动端扫码错误原因: 字段中不仅有特殊字符还有中文,扫码解析时乱码

处理二: 将传参转化为base64编码,度娘一下,30秒搞定,附上代码:

编码: const str= 'this is 中文'
      window.btoa(encodeURIComponent(str))

解码: decodeURIComponent(window.atob('JUU0JUI4JUFEJUU2JTk2JTg3'))

但是问题来了,要求移动端不需要解码,不用encodeURIComponent() (就很方...) 如果直接用window.btoa转码,遇到中文Chrome浏览器会抛出异常, 30秒是不能解决了哼哧哼哧......

处理三: 直接转化为base64,附上代码:

--js中内置的base64编码和解码:

var encodedData = window.btoa("Hello, world"); // 编码(有中文抛出异常,此处不符合需求 舍弃)
var decodedData = window.atob(encodedData); // 解码

--node中自带的base64的编码与解码分为三种：普通字符串/十六进制/图片:

(1) 普通字符串

//编码
new Buffer(String).toString('base64');  // 他来了 他来了

//解码
new Buffer(base64Str, 'base64').toString();

（2）十六进制Hex

//编码
new Buffer(String, 'base64').toString('hex');

//解码
new Buffer(base64Str, 'hex').toString('utf8');

（3）图片

const fs = require('fs');
//编码
function base64_encode(file) {
    let bitmap = fs.readFileSync(file);
    return new Buffer(bitmap).toString('base64');
}

//解码
function base64_decode(base64str, file) {
    var bitmap = new Buffer(base64str, 'base64');
    fs.writeFileSync(file, bitmap);
}

最终采用: new Buffer(String).toString('base64');

Done~

这一行代码看着30秒也能搞定,但是在大千世界找到它用了30分钟,你知道对于三千小世界,是多少生物的一辈子啊. 怎么办呢,前端地位...懂得人都懂 ==||

最后附上base64转码加二维码下载代码,虽然30秒你也能搞定:

downLoadCode(code) {
  // 转码base64
  const base64= new Buffer(code).toString('base64')
  deviceLedger.downloadCode(base64).then( res => {
    if (res) {
      let data = res.data;
      const xlsxData = new Blob([data], {type: 'application/octet-stream'});
      if (window.navigator.msSaveOrOpenBlob) { // msSaveOrOpenBlob方法返回bool值
        navigator.msSaveBlob(xlsxData, '二维码' + '.png')// 本地保存
      } else {
        let link = document.createElement('a'); // a标签下载
        link.href = window.URL.createObjectURL(xlsxData);
        link.download =  '二维码' + '.png';
        link.dispatchEvent(new MouseEvent('click',
          {bubbles: true, cancelable: true, view: window}));
        window.URL.revokeObjectURL(link.href);
      }
      this.$message({
        type: 'success',
        message: '下载成功!'
      });
    }
  })
}