vue项目 二维码生成|转连接|转文件

一、安装二维码插件

npm i arale-qrcode

二、示例

# html
<template>
	<div ref="qrcode"></div>
</template>

# js
import AraleQRCode from 'arale-qrcode'

# 方法
createRcode() {
	let qrcode = new AraleQRCode({
		"render": "png",  // 生成的类型 'svg' or 'table'
		"text": `11231231231231231231212312二维码内容`, // 需要生成二维码的链接
		"size": 160 // 生成二维码大小
	});
	this.$refs.qrcode.appendChild(qrcode)//显示二维码
	//
	this.cavasToImg(qrcode)
	
}

//转图片地址 和  图片地址转文件  方法
cavasToImg(qrcode) {
	let src = qrcode.toDataURL("image/png");//转地址
	let blob = this.dataURLtoBlob(src);//转blob
	let file = this.blobToFile(blob, `文件名称.png`);//转文件
},

dataURLtoBlob(dataurl) {
	let arr = dataurl.split(","),
	mime = arr[0].match(/:(.*?);/)[1],
	bstr = atob(arr[1]),
	n = bstr.length,
	u8arr = new Uint8Array(n);
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n);
	}
	return new Blob([u8arr], { type: mime });
},
// 将blob转换为file
	blobToFile(theBlob, fileName) {
	theBlob.lastModifiedDate = new Date();  // 文件最后的修改日期
	theBlob.name = fileName;                // 文件名
	return new File([theBlob], fileName, { type: theBlob.type, lastModified: Date.now() });
},