纯前端实现一键生成二维码,打开新页面展现二维码（原来能够这么简单）

时间  2021-05-04 标签 前端 node api 浏览器 缓存 微信 app dom svg post

前言：相信很多同窗在实际工做中作项目的时候会遇到点击造成二维码，跳转新的页面展现二维码的项目需求。解决问题的思路实际有不少种，今天笔者介绍一个简单实现的思路，供你们参考，实际实现这个小功能实际上是特别简单的。前端

一 demo效果

二 思考如何让实现

如何实现这个需求呢node

首先咱们须要生成二维码，并且要打开一个新的页面展现，那么咱们须要img标签来展现图片的载体，那么生成图片src必不可少的。不管咱们的项目是spa，仍是多页面应用，咱们这里都要用base64储存图片的信息。因此须要把生成的二维码转化成base64。接下来让咱们整理一下思路。api

梳理具体思路浏览器

第一步:咱们须要将目标二维码连接生成二维码。缓存

第二步：将上一步生成的二维码转化成base64格式url，并保存url。微信

第三步：打开新页面，获取保存的url，展现生成的二维码。app

1 引入arale-qrcode库

首先咱们须要将链接绘制成二维码，那么我在这里给你们推荐一个造成二维码的库arale-qrcode。它能够根据传入的二维码连接生成svg或table形式的dom节点。dom

import AraleQRCode from 'arale-qrcode'
const result = new AraleQRCode({
  	render:  "svg",  /* 生成的类型 'svg' or 'table dom元素类型 */
  	text:'https://juejin.im/post/6895011670301605896', /* 二维码的连接*/
  	size: 100                                          /* 二维码的大小 */
})

console.log(result)

咱们看看AraleQRCode把二维码连接变成了什么东西。svg

没错，AraleQRCode 把咱们的二维码变成了,真是的dom的节点，若是是在当前页面展现，如今已经知足需求了，然而这不是咱们想要的，由于咱们的要在新的页面中展现生成的二维码。接下来咱们想的是怎么把当前的node节点转化成base64post

2 XMLSerializer序列化xml

接下来咱们可能用到一个不怎么经常使用的api XMLSerializer,它的做用是什么？ XMLSerializer 对象使你可以把一个XML 文档或Node 对象转化或“序列化”为未解析的 XML 标记的一个字符串。具体使用咱们不须要带参数去实例化它，而后调用serializeToString方法 node对象变成一个字符串。

例子：

const div = document.createElement('div')
div.innerText = 'hello,world'
const result = new XMLSerializer().serializeToString(div)
console.log(result)

咱们看看XMLSerializer到底作了什么。

没错，这样就将一个真实dom变成了字符串。回到正题上来，咱们须要上一步生成的svg xml文档转换成字符串。

import AraleQRCode from 'arale-qrcode'
const result = new AraleQRCode({
  	render:  "svg",  /* 生成的类型 'svg' or 'table dom元素类型 */
  	text:'https://juejin.im/post/6895011670301605896', /* 二维码的连接*/
  	size: 100                                          /* 二维码的大小 */
})
const svgXml = new XMLSerializer().serializeToString(result)
console.log(svgXml)

打印结果以下：

注意：XMLSerializer 对于ie浏览器存在着兼容性,因此咱们要作额外的兼容处理。

3 window.btoa转化成url,跨页面传递url

接下来咱们须要把新出炉的svg字符窜转成base64格式。咱们能够经过 window.btoa方法。建立一个base-64 编码的字符串。除了用到window.btoa外，咱们还须要二次转码 encodeURIComponent 字符串做为 URI 组件进行编码和解码。 unescape 可对编码的字符串进行解码。

const src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml)))

终于生成了咱们想要的base64格式的图片url，接下来咱们作的是跨页面传递url。

这里有一个小技巧，因为咱们用的是打开一个新窗口，并且生成的base64文件不会很大,因此咱们这里用本地存储localStorage 再好不过。

localStorage.setItem('image',src)
window.open('http://localhost:8888/image')

将上一步的src保存起来。这样就完成了url的生成到保存。

完整的代码以下

生成二维码页面

const index = () => {
  const text = ()=>{
    const result = new AraleQRCode({
       render:  "svg",                                    /* 生成的类型 'svg' or 'table dom元素类型 */
  	   text:'https://juejin.im/post/6895011670301605896', /* 二维码的连接*/
  	   size: 100                                          /* 二维码的大小 */
    })
    const svgXml = new XMLSerializer().serializeToString(result)
    const src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml)))
    localStorage.setItem('image',src)
    window.open('http://localhost:8888/image')
  }
  return <div className="page" >
 <p className="cur" > 当前url: <span> https://juejin.im/post/6895011670301605896 </span> </p>
 <div className="btns" >
 <button onClick={text } >点击生成二维码</button>
 </div>
 </div>
}

接受二维码页面

function index(){
    const img:any = localStorage.getItem('image')
    localStorage.removeItem('image')
   return <div className="mast" >
 <div className="img_content" > <img src={img} /></div>
 </div>
}

注意：当咱们接受到url的时候，别忘了清除本地缓存。

三 写在后面

上面总结了一个生成+跨页面展示二维码的具体实现方案，并且已经应用在真正的项目中了，在实际工做中，同窗们若是遇到相似问题，但愿这篇文章能给你们带来解决此类问题的思路。

最后谢谢你们阅读，你们若是以为还不错的话，就 点赞 + 关注 一波，持续分享技术文章。

本文分享自微信公众号 - 前端公虾米（gh_0b53c67e23b7）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。

联系我们 沪ICP备13005482号-10