复盘｜通用文档OCR识别

RichBaby
47 阅读2分钟

古人言 温故而知新 多温习才能变成自己的东西呀

1. dingo兼容vue模版字符串语法

  const app = new Vue({
    delimiters: ["[[", "]]"],
    el: '#app',
  })

2. img标签 onload方法

<img :src="`data:image/jpeg;base64,${distinguishList.imageBase64}`" 
    @onload="imgLoadFn" alt="" 
    ref="imgSize"
    v-if="imageBase64" 
    @click="handlePictureView(imageBase64)">

    //计算图片比率 后端返回宽度和图片在浏览器中进行比较
   imgLoadFn () {
        if (this.$refs.imgSize) {
          let _o = this.$refs.imgSize;
          this.radio.area = this.distinguishList.div_width / _o.width;
          let ratio =
            Math.floor(this.distinguishList.div_width) / Math.floor(_o.width) / 1.6;
          this.ratio = Number(parseFloat(ratio).toFixed(1));
        }
   },

3. 绝对定位absolute 定位每一个字的位置 （表格错位 需要打补丁）

  • 通过position定位每一个字的位置 需彻底理解绝对定位是如何定位的
    1. 绝对定位 做一个隔层 -top -left
    2. 绝对定位 做两个循环 都相对于A定位
    3. 两个循环 把数据处理成平级 有个div空循环♻️
    4. 计算差距离 i.top-text.top 打补丁
   <!-- Tag:表格 -->
          <div v-if="active==0&&params.table" style="margin-right: 10px">
            <div
              :style="`position:relative;width:distinguishList.div_width;height:distinguishList.div_height;`">
              <div v-for="results in distinguishList.box_divs">
                <div
                  v-for="i in results"
                  :style="`position:absolute;left: ${ i.x/ratio }px;top: ${ i.y/ratio}px;width: ${ i.width/ratio }px;height: ${ i.height/ratio }px; border: 1px black solid;`"
                  :position="`(${ i.x/ratio },${ i.y/ratio },${ i.width/ratio },${ i.height/ratio })`">
                  <div
                    :style="`position: relative; width: 100%;height:100%;left: ${ -i.x/ratio }px;top: ${ -i.y/ratio}px;`">
                    <span
                      v-for="text in i.text"
                      :style="`position:absolute;left: ${ text.x/ratio }px;top: ${ text.y/ratio}px;
                              white-space:nowrap;font-size: ${i.height/ratio}px;font-size: ${text.height/ratio}px; border: 0px solid gold;`">
                      {{text.text}}
                    </span>
                  </div>
                </div>
              </div>
              <!-- 非表格 -->
              <div v-for="results in distinguishList.divs">
                <div v-for="i in results">
                  <span
                    :style="`position:absolute;left:${ i.x/ratio }px;top: ${ i.y/ratio}px; 
                                  font-size: ${i.height/ratio}px;  white-space:nowrap;
                                  margin-bottom:10px; width: ${ i.width/ratio }px;  ${ i.height/ratio }px`">
                    {{i.text }}
                  </span>
                </div>
              </div>
            </div>
          </div>

4. 通过form表单的方式传参

    //配置headers
    
    let res = await axios.post('http://1.202.22.126:8284/', formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
    });

    let formData = new FormData();//创建一个空的FormData对象

    //你可以使用FormData.append来添加键/值对到表单里面

    formData.append('img', item.file);

    formData.append('type', this.active);

5. base64转码word excel

  1. 通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串
  2. 通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL
  3. charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
  4. btoa 和 atob 是window对象的两个函数，其中：
  • btoa ：是binary to ascii，用于将binary的数据用ascii码表示，即Base64的编码过程
  • atob：是ascii to binary，用于将ascii码解析成binary数据，即Base64的解码过程。
       //vue methods
      //前置方法2 创建隐式a标签进行下载
      downloadFile (url, name = "影像识别结果") {
        let a = document.createElement("a");
        a.setAttribute("href", url);
        a.setAttribute("download", name);
        a.setAttribute("target", "_blank");
        let clickEvent = document.createEvent("MouseEvents");
        clickEvent.initEvent("click", true, true);
        a.dispatchEvent(clickEvent);
      },
      
      // 前置方法1  将完整Base64文件转为 Blob
      dataURLtoBlob (dataurl) {
        let arr = dataurl.split(","),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),//base64解码
          n = bstr.length, u8arr = new Uint8Array(n);// 创建初始化为 0 的，包含 length 个元素的无符号整型数组
          
          while (n--) {
           u8arr[n] = bstr.charCodeAt(n);
          }
          return new Blob([u8arr], { type: mime });
      },
      
      // 下载方法
      // 上传图片成功后调取该方法 二进制数组 生成文件
      // 接入参数base64： 前端前缀拼接后端返回base64码 、name：下载名称
      downloadFn (base64, name) {
        let myBlob = this.dataURLtoBlob(base64); //前置方法1 处理为Blob
        let myUrl = URL.createObjectURL(myBlob); //获取当前文件的一个内存URL
        let convert_file_type = this.params.convert_file_type == 'excel' ? 'xlsx' || 'xls' : 'docx' || 'doc';
        let ocr_name = '影像识别结果.' + convert_file_type
        this.downloadFile(myUrl, ocr_name);
      },
      
      // 通过传入后缀判断base64应该拼接的前缀
      getBase64Type (type) {
        switch (type) {
          case 'doc': return 'data:application/msword;base64,';
          case 'docx': return 'data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,';
          case 'xls': return 'data:application/vnd.ms-excel;base64,';
          case 'xlsx': return 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,';
          case 'pdf': return 'data:application/pdf;base64,';
        }
      },
      
      // 由前台控制下载EXCEL格式还是WORD格式
      getType (file) {
        let convert_file_type = this.params.convert_file_type == 'excel' ? 'xlsx' || 'xls' : 'docx' || 'doc';
        let filename = file + '.' + convert_file_type;
        let index1 = filename.lastIndexOf(".");
        let index2 = filename.length;
        let type = filename.substring(index1 + 1, index2);
        return type;
      },

6. this.$nextTick(function () { }) 方法

  • 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。
  • 在修改数据之后立即使用它，
    然后等待 DOM 更新。
    它跟全局方法 Vue.nextTick 一样，
    不同的是回调的 this 自动绑定到调用它的实例上。
avatar
文章
阅读
粉丝