前言：相信不少同學在實際工作中做項目的時候會遇到點擊形成二維碼，跳轉新的頁面展示二維碼的項目需求。解決問題的思路實際有很多種，今天筆者介紹一個簡單實現的思路，供大家參考，實際實現這個小功能其實是特別簡單的。
一 demo效果
二 思考如何讓實現
如何實現這個需求呢
首先我們需要生成二維碼，而且要打開一個新的頁面展示，那么我們需要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的節點，如果是在當前頁面展示，現在已經滿足需求了，然而這不是我們想要的，因為我們的要在新的頁面中展示生成的二維碼。接下來我們想的是怎么把當前的node節點轉化成base64
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" http://jintianxuesha.com/>
<div className="img_content" > <img src={img} /></div>
</div>
}
注意：當我們接受到url的時候，別忘了清除本地緩存。
三 寫在后面
上面總結了一個生成+跨頁面展現二維碼的具體實現方案，而且已經應用在真正的項目中了，在實際工作中，同學們如果遇到類似問題，希望這篇文章能給大家帶來解決此類問題的思路。