vue自动生成二维码并下载打印到本地

2022-07-16 19:31:15 阅读：222 来源： 互联网

标签：vue image 打印二维码 let blob download new

1、安装

npm i vue-qriously -S

2、引入，main.js文件

// 二维码
import VueQriously from 'vue-qriously'
Vue.use(VueQriously)

3、使用

<Button type="info" @click="scan">查看</Button>

<Button type="info" @click="download">下载</Button>

<!-- 二维码 -->
<Modal v-model="isShowQrcode" :closable="false"  width="232" :footer-hide="true">
  <qriously id="qrcode" :value="qrcode_url" :size="200" /> 
　<p style="textAlign:center;">请使用微信扫一扫</p> 
</Modal>

<script>
    data() {
        return {
          isShowQrcode:false,//二维码弹窗
          qrcode_url:"",//二维码显示内容
        }
      },
    methods:{
        // 查看二维码
        scan(){
          this.isShowQrcode = true;//打开二维码弹窗
          this.qrcode_url = "二维码需要显示的内容";
        },

        // 下载二维码
        download() {
          this.qrcode_url = "";
          this.qrcode_url = "维码需要显示的内容";

          // 先找到canvas节点下的二维码图片
          let myCanvas = document.getElementById("qrcode").getElementsByTagName("canvas");
          // 创建一个a节点
          let a = document.createElement("a");
          // 设置a的href属性将canvas变成png格式
          let imgURL = myCanvas[0].toDataURL("image/jpg");
          let ua = navigator.userAgent;
          if (ua.indexOf("Trident") != -1 && ua.indexOf("Windows") != -1) {
            // IE内核 并且  windows系统 情况下 才执行;
            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, "download" + "." + "png");
          } else if (ua.indexOf("Firefox") > -1) {
            //火狐兼容下载
            let blob = this.base64ToBlob(imgURL); //new Blob([content]);
            let evt = document.createEvent("HTMLEvents");
            evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
            a.download = " "; //下载图片名称，如果填内容识别不到，下载为未知文件，所以我这里就不填为空
            a.href = URL.createObjectURL(blob);
            a.dispatchEvent(
              new MouseEvent("click", {
                bubbles: true,
                cancelable: true,
                view: window,
              })
            ); //兼容火狐
          } else {
            //谷歌兼容下载
            // a.href = myCanvas[0].toDataURL('image/png').replace('image/png', 'image/octet-stream')
            a.href = myCanvas[0].toDataURL("image/jpg");
            //设置下载文件的名字
            a.download = "download";
            //点击
            a.click();
          }
        },

        //base64转blob
        base64ToBlob(code) {
          let parts = code.split(";base64,");
          let contentType = parts[0].split(":")[1];
          let raw = window.atob(parts[1]);
          let rawLength = raw.length;
          let uInt8Array = new Uint8Array(rawLength);
          for (let i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
          }
          return new Blob([uInt8Array], { type: contentType });
        }
    }
</script>

标签：vue,image,打印,二维码,let,blob,download,new
来源： https://www.cnblogs.com/yunjiao/p/16485001.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue自动生成二维码并下载打印到本地