纯前端实现一键生成二维码,打开新页面展示二维码

最新推荐文章于 2024-09-10 22:28:47 发布

诸葛亮晶晶

最新推荐文章于 2024-09-10 22:28:47 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/AYANGGG12/article/details/113183624

版权

本文介绍了如何在前端实现生成二维码并将其在新页面中展示的步骤，包括使用arale-qrcode库生成二维码，XMLSerializer序列化为SVG字符串，然后转化为Base64 URL，最后通过localStorage和新窗口打开显示。

摘要由CSDN通过智能技术生成

如何实现这个需求呢首先我们需要生成二维码，而且要打开一个新的页面展示，那么我们需要img标签来展示图片的载体，那么生成图片src必不可少的。无论我们的项目是spa，还是多页面应用，我们这里都要用base64储存图片的信息。所以需要把生成的二维码转化成base64。接下来让我们整理一下思路。
梳理具体思路
第一步:我们需要将目标二维码链接生成二维码。
第二步：将上一步生成的二维码转化成base64格式url，并保存url。
第三步：打开新页面，获取保存的url，展示生成的二维码。
1 引入arale-qrcode库
首先我们需要将连接绘制成二维码，那么我在这里给大家推荐一个形成二维码的库arale-qrcode。它可以根据传入的二维码链接生成svg或table形式的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把二维码链接变成了什么东西。
没错，AraleQRCode 把我们的二维码变成了,真是的dom的节点，如果是在当前页面展示，现在已经满足需求了，然而这不是我们想要的，因为域名交易我们的要在新的页面中展示生成的二维码。接下来我们想的是怎么把当前的n