近年來隨著技術的日新月異二維碼生活當中很重要的一部分，它可以把常見的名片、文本、wifi網絡、電子郵件、短信、電話號碼、網址等信息生成對應的二維碼圖片，我們只要通過掃碼就可輕鬆的獲取到二維碼中的信息了。
二維碼介紹
二維碼（2-dimensional bar code）是按照一定規律在平面上繪製的幾何圖形，通過分佈的黑白相間的圖形記錄數據符號信息。由於二維碼讀取速度快，可存儲數據類型多等優勢被廣泛使用，特別是矩陣式二維碼（也叫QRCode）幾乎無處不在。下面是QRCode的基本結構，由定位圖形（二維碼定位）、格式信息（糾錯級別）、版本信息（二維碼規格）、數據（二維碼信息）和糾錯碼字（糾錯信息）5部分構成，Vue二維碼生成就是通過插件按規則在畫布上繪製出相應的二維碼圖像的。
圖片來源“互聯網”
qrcode生成二維碼
qrcode是可以在服務器和客戶端上運行的二維碼生成器，內容支持數字，字母數字，漢字和字節模式及混合模式。可以通過canvas在前端在線繪製出QR碼，也可以將QR碼另存為圖片。Vue中安裝qrcode只要執行安裝命令：npm install -S qrcode就可以在項目中使用了，qrcode當前最新版本1.4.4。
創建一個qrcode.vue模板並引入qrcode，用一個 canvas標籤用來繪製二維碼。content是從父級傳過來的數據（二維碼中的內容），options定義的是二維碼的屬性選項（可以控制二維碼的糾錯等級、圖像類型、品質、邊距、顏色等等），qrcode()定義的是方法利用qrcode將我們的數據寫入到canvas中，後面的error是完成之後的回調函數（可以用來拋出錯誤/成功信息）。父級調用很簡單，不會的可以參考文章： 。
qrcodejs2生成二維碼
qrcodejs2是製作二維碼的JavaScript庫，可以通過獲取 DOM 的標籤並使用HTML5 Canvas繪製成二維碼。不依賴任何庫且支持跨瀏覽器，兼容IE，Chrome，Firefox，Safari，Opera，Safari，Android等瀏覽器。Vue中安裝qrcodejs2只要執行安裝命令：npm install -S qrcodejs2就可以在項目中使用了，qrcodejs2當前最新版本0.0.2。
創建一個qrcodejs2.vue模板並引入qrcodejs2，qrcodejs2本身就是用Canvas繪製的二維碼所以我們只要給個容器來存放即可。qrcode是在原有的畫布上更新二維碼，而qrcodejs2則是將每次生成的二維碼插入到容器中（解決辦法就是在每次繪製二維碼之前將容器清空）。
vue-qr生成二維碼
前面兩種方式只能生成簡單的二維碼，如果你想讓你的二維碼更豐富可以使用vue-qr。vue-qr是一款Vue組件安裝之後直接引入即可使用，它提供了豐富的配置屬性如設置logo圖片、背景圖片、背景顏色、尺寸、邊距等。這裡主要需要了解下vue-qr的配置屬性，我們只要按需求修改對應的屬性參數就可以得到我們想要的二維碼圖像了（類似的Vue插件還有vue-qrcode、vue-qriously、vue-qart ）：
二維碼下載到本地
這裡以vue-qr為例說下原理，這裡我利用a標籤來下載。在下載前我們需要先獲取到img標籤中的src屬性值，這裡是用base64編碼存儲的png圖片地址。創建一個隱藏的a標籤然後將其賦值給a標籤的href屬性，然後定義下download屬性給圖片命個名稱就可以實現圖片下載了。如果是canvas標籤繪製的圖像，那麼我們就需要用到toDataURL()方法導出圖片地址，再把該地址拋給a標籤即可。更多下載方式可以參考文章： 。
總結：
vue生成二維碼的插件有很多，適合自己的才是最好的。不同的工具繪製方式不同，生成的圖片樣式也有所差異（下圖內容都是qrcode，但是生成的樣式就各不相同）。有前輩們為我們封裝好了組件，二維碼生成已經變得很簡單了。
以上內容是小編給大家分享的Vue常見的幾種二維碼生成方法和保存至本地，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。更多Vue實戰技巧可以參考專欄：Vue實戰系列，在此也非常感謝大家對小編的支持！
閱讀更多 編程手札 的文章
