純前端實現一鍵生成二維碼,打開新頁面展現二維碼（原來能夠這麼簡單）

前言：相信很多同窗在實際工做中作項目的時候會遇到點擊造成二維碼，跳轉新的頁面展現二維碼的項目需求。解決問題的思路實際有不少種，今天筆者介紹一個簡單實現的思路，供你們參考，實際實現這個小功能實際上是特別簡單的。

一 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" >
 <div className="img_content" > <img src={img} /></div>
 </div>
}

注意：當咱們接受到url的時候，別忘了清除本地緩存。

三 寫在後面

上面總結了一個生成+跨頁面展示二維碼的具體實現方案，並且已經應用在真正的項目中了，在實際工做中，同窗們若是遇到相似問題，但願這篇文章能給你們帶來解決此類問題的思路。

最後謝謝你們閱讀，你們若是以爲還不錯的話，就 點贊 + 關注 一波，持續分享技術文章。

本文分享自微信公衆號 - 前端公蝦米（gh_0b53c67e23b7）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。