后台生成并下载二维码

在table内展示二维码

注意：使用框架为Ant Design Vue

• 安装vue-qrcode

注意：因为vue-qrcode依赖qrcode，所以还要安装qrcode

npm install --save qrcode vue-qrcode

• 引入vue-qrcode ``` import VueQrcode from ‘vue-qrcode’

components: { qrcode: VueQrcode }

- **使用**

<a name="Snnaj"></a>
### table内点击按钮，展示二维码
- **安装qrcodejs2**

npm install —save qrcodejs2

- **引入qrcodejs2**

import QRCode from “qrcodejs2”;

- **使用qrcodejs2**
注意：当时用的框架是iview后台

Table: { data: [], columns: [ { type: “index” }, { title: “操作”, width: “250px”, render: (h, params) => { var btnList = []; btnList = [ h( “Button”, { attrs: { type: “warning”, size: “small” }, on: { click: () => { this.$nextTick(function() { this.qrcode(); }); } } }, “二维码” ) ] return h(“div”, btnList); } } ] }

```
<!-- 展示二维码 -->
    <Modal
      :mask-closable="false"
      width="454px"
      v-model="codeModal.data.show"
      :title="codeModal.data.title"
    >
      <div id="qrcode-img">
        <div class="code-text code-title">{{this.codeModal.data.info.name}}</div>
        <div class="code-text code-info">{{this.codeModal.data.info.station}}</div>
        <div id="qrcode" ref="qrCodeUrl"></div>
      </div>
      <div slot="footer">
        <Button type="primary" @click="uploadCode">下载</Button>
      </div>
    </Modal>

qrcode() {
      var canvas = document.getElementById("qrcode");
      canvas.innerHTML = "";
      const text =
        "https://xxx?code=xxx";
        this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: text,
          width: 300,
          height: 300,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
},

下载二维码

方式一

• 安装

  import html2canvas from 'html2canvas'

  <div slot="codeurl" slot-scope="text, record" :id="`qrcode`+record.id">
  <!-- 一定要给id -->
    <qrcode :value="text" :width="100" />
  </div>

  Downupload(record) {
      console.log('下载', record)
      const domObj = document.getElementById('qrcode' + record.id) 
      // id一定要和上面的统一，要不然会报错：Cannot read property 'ownerDocument' of null
      html2canvas(domObj, {
        useCORS: true,
        allowTaint: false,
        logging: false,
        letterRendering: true,
        onclone(doc) {
          const e = doc.querySelector('#qrcode' + record.id)
          // id一定要和上面的统一，要不然会报错：Cannot read property 'ownerDocument' of null
          e.style.display = 'block'
        }
      }).then(function(canvas) {
        var oA = document.createElement('a')
        oA.download = record.name
        oA.href = canvas.toDataURL('image/png')
        document.body.appendChild(oA)
        oA.click()
        oA.remove()
      })
  }

  注意：下载二维码的时候，可能会因为浏览器导航条等的原因，出现下载图片空白或不全文件的问题

  方式二

  因为图片的形式是已经在本地生成的base64，所以可以直接通过a链接直接下载

1. 创建一个a标签
2. 将a标签的href属性赋值为图片的base64编码
3. 指定a标签的download属性，作为下载文件的名称
4. 触发a标签的点击事件

   Downupload(record) {
      const domObj = document.getElementById('qrcode' + record.id).getElementsByTagName('img')[0].src
      const a = document.createElement('a')
      a.href = domObj
      a.setAttribute('download', '文件名')
      a.click()
   }

   在ie浏览器里因为不支持setAttribute属性的原因，需要再进行判断

   Downupload(record) {
      const domObj = document.getElementById('qrcode' + record.id).getElementsByTagName('img')[0].src
      if (window.navigator.msSaveOrOpenBlob) {
        const bstr = atob(domObj.split(',')[1])
        let n = bstr.length // 在eslint规则内，不能修改使用const关键字声明的变量，它会引发运行时错误。
        const u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        const blob = new Blob([u8arr])
        window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
      } else {
        // 这里就按照chrome等新版浏览器来处理
        const a = document.createElement('a')
        a.href = domObj
        a.setAttribute('download', '文件名')
        a.click()
      }
   }