清哥的小屋

1
npm i vue-qr --save
2
npm i html2canvas --save

1
// 模板中的代码
2
      <el-dialog :visible.sync="showDownloadDialog"
3
                 title="测评下载"
4
                 width="35%">
5
        <div class="dialog-content">
6
          <el-radio-group v-model="radio">
7
            <el-radio :label="1">海报二维码</el-radio>
8
            <el-radio :label="2">高清二维码</el-radio>
9
          </el-radio-group>
10
          <div class="evaluationUrl">
11
            测评链接：
12
            <div class="copyUrl">
13
              <span class="oneLine">{{ QRUrl }}</span>
14
              <span class="copy"
15
                    :data-clipboard-text="QRUrl"
16
                    @click="copy">复制链接</span>
17
            </div>
18
            <div id="qrcode">
19
              <vue-qr :text="QRUrl" // 链接
20
                      :size="175" // 二维码的宽高
21
                      :margin="1"></vue-qr>
22
            </div>
23
          </div>
24
        </div>
25
        <div slot="footer"
26
             class="dialog-footer">
27
          <el-button @click="showDownloadDialog = false"
28
                     class="btn-cancel">取消</el-button>
29
          <el-button @click="confirmDownload"
30
                     type="primary">下载</el-button>
31
        </div>
32
      </el-dialog>

1
import VueQr from 'vue-qr';
2
import html2canvas from 'html2canvas';
3
export default {
4
  name: 'EvaluationList',
5
  components: {
6
    VueQr
7
  },
8
 }

1
confirmDownload() {
2
      // 确认下载二维码或者海报二维码
3
      if (this.radio === 2) {
4
        // 下载高清二维码
5
        var oQrcode = document.querySelector('#qrcode img');
6
        var url = oQrcode.src;
7
        var a = document.createElement('a');
8
        var event = new MouseEvent('click');
9
        // 下载图名字
10
        a.download = '高清二维码';
11
        // url
12
        a.href = url;
13
        // 合成函数，执行下载
14
        a.dispatchEvent(event);
15
      } else {
16
        // 下载海报二维码
17
        this.saveImg();
18
      }
19
    },

1
#qrcode {
2
  display: none;
3
}

1
<div class="bgCode"
2
           id="mycanvas">
3
        <vue-qr class="QrcodeBg"
4
                :text="QRUrl" // 链接
5
                :margin="1"
6
                :size="175">
7
        </vue-qr>
8
      </div>

1
saveImg() {
2
      // 先获取你要转换为img的dom节点
3
      var node = document.getElementById('mycanvas'); // 传入的id名称
4
      var width = node.offsetWidth; // dom宽
5
      var height = node.offsetHeight; // dom高
6
      var scale = 2; // 放大倍数 这个相当于清晰度 调大一点更清晰一点
7
      html2canvas(node, {
8
        width: width,
9
        heigth: height,
10
        backgroundColor: '#ffffff', // 背景颜色 为null是透明
11
        dpi: window.devicePixelRatio * 2, // 按屏幕像素比增加像素
12
        scale: scale,
13
        X: 0,
14
        Y: 0,
15
        scrollX: -3, // 如果左边多个白边 设置该偏移-3 或者更多
16
        scrollY: 0,
17
        useCORS: true, // 是否使用CORS从服务器加载图像 !!!
18
        allowTaint: true // 是否允许跨域图像污染画布  !!!
19
      }).then((canvas) => {
20
        var url = canvas.toDataURL(); // 这里上面不设值cors会报错
21
        var a = document.createElement('a'); // 创建一个a标签 用来下载
22
        a.download = '海报二维码'; // 设置下载的图片名称
23
        var event = new MouseEvent('click'); // 增加一个点击事件
24
        a.href = url; // 此处的url为base64格式的图片资源
25
        a.dispatchEvent(event); // 触发a的单击事件 即可完成下载
26
      });
27
    },

1
.bgCode {
2
  position: fixed;
3
  top: 10px;
4
  left: 10px;
5
  z-index: -10;
6
  width: 375px;
7
  height: 667px;
8
  background: url('~@/assets/images/AIEvaluation/bg.png');
9
  background-size: contain;
10

11
  .QrcodeBg {
12
    position: absolute;
13
    top: 348px;
14
    left: 100px;
15
  }
16
}