若依框架中自动生成条形码和二维码

条形码

安装插件

npm install --save @xkeshi/vue-barcode //下载插件

引入项目

import barcode from "@xkeshi/vue-barcode"
components:{barcode},

data数据

barCodeValue:[],//根据这个列表来生成条形码
barCodeOption:{
	format:"CODE128",//生成ENA-128条形码
	width:1,//线宽
	displayValue: true, //是否默认条形码显示数据
	background: '#fff', //条形码背景颜色
	height: '30px',//线条高度
	fontSize: '15px',//一维码数字大小
},

在若依框架自动生成的代码中使用

<el-table-column label="条形码" align="center" prop="contCode" width="300">
<template slot-scope="scope">
<barcode :value="scope.row.contCode" :options="barCodeOption" ></barcode>
</template>
</el-table-column>

value中传入一个String，从数据库中获取

二维码

安装插件

npm install vue-qr --save

引入项目

import vueQr from 'vue-qr'
components:{vueQr},

data数据

iconUrl: require("../img/icon.png"),//配置logo路径

在若依框架自动生成的代码中使用

<el-table-column label="二维码" align="center" prop="contCode" width="300">
        <template slot-scope="scope">
          <vue-qr :logoSrc="iconUrl" :text="scope.row.contCode" :size="200" ></vue-qr>
        </template>
      </el-table-column>

同上，text传入一个String

拓展：blob对象

定义

定义：blob（Binary Large Object）二进制大对象，表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js中的一个对象，里面可以储存大量的二进制编码格式的数据。

介绍

在一般的 Web 开发中，很少会用到 Blob，但 Blob 可以满足一些场景下的特殊需求。Blob 的概念在一些数据库中有使用到，例如，MYSQL中的 BLOB 类型就表示二进制数据的容器。在 Web 中，Blob 类型的对象表示不可变的类似文件对象的原始数据。通俗点说，Blob对象是二进制数据，但它是类似文件对象的二进制数据，因此可以像操作 File 对象一样操作 Blob 对象，实际上，File 继承自Blob。

语法

let blob = new Blob( array, options );

参数

• array是一个由, ArrayBufferView,Blob,DOMString等对象构成的Array，或者其他类似对象的混合体，它将会被放进Blob。DOMStrings会被编码为UTF-8
• options是一个可选的BlobPropertyBag字典，它可能会指定如下两个属性：
  • type，默认值为 “”，它代表了将会被放入到blob中的数组内容的MIME类型。
  • endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。它是以下两个值中的一个： "native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者"transparent"，代表会保持blob中保存的结束符不变

第一个参数为一个数据序列，可以是任意格式的值。
第二个参数是一个包含两个属性的对象{ type: MIME的类型, endings: 决定第一个参数的数据格式，可以取值为 “transparent” 或者 “native”（transparent的话不变，是默认值，native 的话按操作系统转换）

应用

分片上传

首先说说分片上传，我们在进行文件上传的时候，因为服务器的限制，会限制每一次上传到服务器的文件大小不会很大，这个时候我们就需要把一个需要上传的文件进行切割，然后分别进行上传到服务器。

var BYTES_PER_CHUNK = 1024 * 1024; // 每个文件切片大小定为1MB .
var blob = document.getElementById("file").files[0];
var slices = Math.ceil(blob.size / BYTES_PER_CHUNK);
var blobs = [];
slices.forEach(function(item, index) {
    blobs.push(blob.slice(index,index + 1));
});

通过上面的方法。我们就得到了一个切割之后的File对象组成的数组blobs；

接下来要做的时候就是讲这些文件分别上传到服务器。

在HTTP1.1以上的协议中，有Transfer-Encoding这个编码协议，用以和服务器通信，来得知当前分片传递的文件进程。

这样解决了这两个问题，我们不仅可以对文件进行分片上传，并且能够得到文件上传的进度。

粘贴图片

blob还有一个应用场景，就是获取剪切板上的数据来进行粘贴的操作。例如通过QQ截图后，需要在网页上进行粘贴操作。

document.addEventListener('paste', function (e) {
    console.info(e);
    var cbd = e.clipboardData;
        var fr = new FileReader();
        var html = '';
        for(var i = 0; i < cbd.items.length; i++) {
            var item = cbd.items[i];
            console.info(item);
            if(item.kind == "file"){
                var blob = item.getAsFile();
                if (blob.size === 0) {
                    return;
                }
                console.info(blob);
                fr.readAsDataURL(blob);
                fr.on<x>load=function(e){
                    var result=document.getElementById("result");
                    //显示文件
                    result.innerHTML='<img src="' + this.result +'" alt="" />';
                }
            }
        }
});