learning-system-portal/src/components/QrImage/Index.vue

<template>
  <div>
    <div><slot></slot></div>
    <el-dialog :modal-append-to-body="false" :title="title" :close-on-click-modal="false" :show="show" @close="$emit('update:show', false)" :visible.sync="visible" width="400px" custom-class="g-dialog">
    <el-row :gutter="10">
      <el-col :span="12">
          <div style="height: 200px;border-right: 1px solid #cccccc;">
              <img v-if="qrImage!=''" :src="qrImage" width="150px" height="150px">
          </div>
      </el-col>
      <el-col :span="12">
          <el-form label-width="50px">
            <el-form-item label="大小">
                <el-select v-model="size">
                  <el-option label="100" :value="100"></el-option>
                  <el-option label="150" :value="150"></el-option>
                  <el-option label="200" :value="200"></el-option>
                  <el-option label="300" :value="300"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="类型">
                <el-select v-model="qrType">
                  <el-option label="png" value="png"></el-option>
                  <el-option label="jpg" value="jpg"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                 <el-button @click="download" type="primary">下载</el-button>

            </el-form-item>
          </el-form>
      </el-col>
    </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {genQrImage} from '@/api/tools.js'
import { getToken } from '@/utils/token'
import axios from 'axios'
export default {
  props:{
    title:{
       type:String,
       default:'二维码'
    },
     code:{
       required:true,
       type:String
     },
     show:{
       required:true,
       type:Boolean
     }
  },
  data(){
    return {
      visible:this.show,
      qrImage:'',
      size:150,
      qrType:'png'
    }
  },
  watch: {
      show(){
          this.visible = this.show;
      },
      code(nval,oval){
          if(nval!=oval){
            this.genImage();
          }
      }
  },
  mounted() {
      //this.genImage();
  },
  methods:{
     genImage(){
       if(this.code){
         genQrImage(this.code,false).then(rs=>{
            this.qrImage='data:image/jpg;base64,'+rs.result;
         }).catch(err=>{
            this.$message({message:'生成二维码图片失败:'+rs.message,type:'error'})
         });
       }
     },
     download(){
        var baseUrl = process.env.VUE_APP_BASE_API
        var url = baseUrl+'/oapi/idcode/qrimage/download?code='+this.code+'&size='+this.size+'&ftype='+this.qrType+'&margin=true';
        //var str='size='+size+'&ftype='+type+'&colour='+colour+'&margin='+margin+'&url='+u+'&code='+code;
        axios({
          method: 'get',
          url: url,
          responseType: 'blob',
          headers: { 'X-Access-Token': getToken() }
        }).then(res => {
          this.resolveBlob(res, 'application/octet-stream','qrcode.'+this.qrType)
        })
     },
     resolveBlob(res, mimeType,name) {
       const aLink = document.createElement('a')
       var blob = new Blob([res.data], { type: mimeType})
       // //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
       //var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
       //var contentDisposition = decodeURI(res.headers['content-disposition'])
       //console.log(contentDisposition);
       //var result = patt.exec(contentDisposition)
       //var fileName = result[1]
       //fileName = fileName.replace(/\"/g, '')
       aLink.href = URL.createObjectURL(blob);
       aLink.setAttribute('download', name) // 设置下载文件名称
       document.body.appendChild(aLink)
       aLink.click()
       document.body.removeChild(aLink)
     }
  }
}
</script>

<style>
</style>