前端生成二维码以及下载-CSDN博客

依赖

二维码生成 `vue-qr`

demo

<template>
  <div id="app">
    <div ref="imageWrapper">
      <vue-qr :text="JSON.stringify(data)"
              :margin="0"
              colorDark="#000"
              colorLight="#fff"
              :logoScale="0.2"
              logoSrc="../static/logo.jpg"
              :logoMargin="10"
              :dotScale="1"
              :size="200"/>
    </div>
  </div>
</template>

<script>

import vueQr from 'vue-qr'
export default {
  components: {
    vueQr
  },
  data () {
    return {
      data: {
        dataURL: '',
        projectId: '23423452345wsdga',
        projectName: '项目A'
      }
    }
  }
}
</script>
复制代码

api

api	说明
text	二维码内容
size	二维码宽高大小，因为是正方形，所以设一个参数即可
margin	默认边距20px，不喜欢的话自己设为0
colorDark	实点的颜色，注意要和colorLight一起设置才有效
colorLight	空白的颜色，注意要和colorDark一起设置才有效
bgSrc	嵌入背景图地址，没什么卵用，不建议设置
logoSrc	二维码中间的图，这个是好东西，设置一下显得专业点
logoScale	中间图的尺寸，不要设太大，太大会导致扫码失败的
dotScale	那些小点点的大小，这个也没什么好纠结的（设为1时是一个小方块）

下载图片方法 `downLoadImg.js`调用依赖`html2canvas`

//downLoadImg.js
import html2canvas from 'html2canvas'
export default ({ data, type = 'dom', fileName = 'img' }) => {
  if (type === 'dom') {
    html2canvas(data, {
      backgroundColor: null
    }).then(canvas => {
      let imgUrl = canvas.toDataURL('image/png')
      dowmLoadImg(imgUrl, fileName)
    })
  } else if (type === 'base64') {
    dowmLoadImg(data, fileName)
  }
}

const dowmLoadImg = (imgUrl, fileName) => {
  if (window.navigator.msSaveOrOpenBlob) {
    var bstr = atob(imgUrl.split(',')[1])
    var n = bstr.length
    var u8arr = new Uint8Array(n)
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    var blob = new Blob([u8arr])
    window.navigator.msSaveOrOpenBlob(blob, fileName + '.' + 'png')
  } else {
    // 这里就按照chrome等新版浏览器来处理
    const a = document.createElement('a')
    a.href = imgUrl
    a.setAttribute('download', fileName)
    a.click()
  }
}
复制代码

在vue文件中调用

<template>
  <div id="app">
    <div ref="imageWrapper">
      <vue-qr :text="JSON.stringify(data)"
              :margin="0"
              colorDark="#000"
              colorLight="#fff"
              :logoScale="0.2"
              logoSrc="../static/logo.jpg"
              :logoMargin="10"
              :dotScale="1"
              :size="200"/>
    </div>
    <button @click="downLoadImg">下载图片</button>
  </div>
</template>

<script>

import vueQr from 'vue-qr'
import downLoadImg from 'downLoadImg.js'
export default {
  components: {
    vueQr
  },
  data () {
    return {
      data: {
        dataURL: '',
        projectId: '23423452345wsdga',
        projectName: '项目A'
      }
    }
  },
  methods:{
      downLoadImg(){
          downLoadImg({data:this.$refs.imageWrapper})
      }
  }
}
</script>
复制代码

npm包`imgdownload`

downLoadImg.js已经打包发布到了npm,有需要的可以自行下载

npm i imgdownload --save
复制代码

调用方法如下

<template>
  <div id="app">
    <div ref="imageWrapper">
      <vue-qr :text="JSON.stringify(data)"
              :margin="0"
              colorDark="#000"
              colorLight="#fff"
              :logoScale="0.2"
              logoSrc="../static/logo.jpg"
              :logoMargin="10"
              :dotScale="1"
              :size="200"/>
    </div>
    <button @click="downLoadImg">下载图片</button>
  </div>
</template>

<script>

import vueQr from 'vue-qr'
import downLoadImg from 'imgdownload'
export default {
  components: {
    vueQr
  },
  data () {
    return {
      data: {
        dataURL: '',
        projectId: '23423452345wsdga',
        projectName: '项目A'
      }
    }
  },
  methods:{
      downLoadImg(){
          downLoadImg({data:this.$refs.imageWrapper})
      }
  }
}
</script>
复制代码