vue-js-打杂记

qrcode生成二维码

用的qrcodejs2插件, 记得一定要等dom元素渲染成功了, 再去生成二维码, 我是放到$nextTick里面的, 我的qrcode元素根据接口来判断显示隐藏的

    <div  class='code' id="qrcode"></div>
    
    npm install qrcodejs2 --save;
    import QRCode from "qrcodejs2";
    let qrcode2 = new QRCode("qrcode", {
        render: "canvas",
        width: 160,
        height: 160,
        text: `xxxx`
    });

点击下载base渲染的图片(动态生成的图片-接上面二维码)

通过a标签的download属性下载图片

<a class="button saveImgBtn" @click="saveImg">保存图片</a>
//js
let $saveImgBtn = document.querySelector('.saveImgBtn');
let URL = document.querySelector('#qrcode img').src;
$saveImgBtn.setAttribute('href',URL);
$saveImgBtn.setAttribute('download',`xxxx.png`);
    

我看到网上有的博客有下面这段代码,接在上面代码的后面,我加了后就变成了批量打印,方法会执行多次, 暂时没去研究为什么, 先记录一下

 let evObj = document.createEvent('MouseEvents');
 vObj.initMouseEvent( 'click', true, true, window, 0, 0, 0, 0, 0, false, false, true, false, 0, null);
 $saveImgBtn.dispatchEvent(evObj);

点击复制指定内容,此处为链接

<div class="button copyBtn" @click="copyLink" :data-clipboard-text="CopyURL" >复制链接</div>
copyLink() {  
  let clipboard = new Clipboard('.copyBtn')  
  clipboard.on('success', e => {  
      this.$message.success("链接复制成功"); 
      clipboard.destroy()  
  })  
  clipboard.on('error', e => {  
      // 不支持复制 
      this.$message.error('该浏览器不支持自动复制');
      // 释放内存  
      clipboard.destroy()  
    })  
},

html2canvas把dom生成图片下载

<div class='container' id='downLoad-capture'></div>

npm install html2canvas --save//依赖

import html2canvas from "html2canvas";

//点击下载按钮
saveImg(){
    let tempElem = document.querySelector('#downLoad-capture');
     html2canvas(tempElem, {
        useCORS: true ,// 允许CORS跨域
        // backgroundColor: null//生成图片的白色边框隐藏 如果是白底的就不要加了 图片会有点糊
    }).then(canvas => {
        const URL = canvas.toDataURL("image/png");
        const $saveImgBtn = document.createElement('a');
        document.body.appendChild($saveImgBtn);
        $saveImgBtn.setAttribute('href',URL);
        $saveImgBtn.setAttribute('download',`${xxx}${xxx}.png`);
        $saveImgBtn.click();
        document.body.removeChild($saveImgBtn)
    })
}