项目部分功能实现

1、导出excile,但是后台返回时二进制数据流,在前台要进行处理。

axios({

        method: 'GET',

        url: '/api',

        params: params,

        responseType: 'blob'

      }).then(res=>{

 let blob = new Blob([res], { type: 'application/vnd.ms-excel' })       
 let filename = '员工.xls'       
let linkNode = document.createElement('a')       
linkNode.download = filename       
 linkNode.style.display = 'none'       
linkNode.href = window.URL.createObjectURL(blob)       
document.body.appendChild(linkNode)       
linkNode.click()       
URL.revokeObjectURL(linkNode.href)       
document.body.removeChild(linkNode) 

      }).catch(err=>{

        console.log(err)

      })

接口需设置成


2、less中使用calc的问题

Less的好处不用说大家都知道,确实让写CSS的人不在痛苦了,最近我在Less里加入calc时确发现了有点问题,我在Less中这么写:

  div {

  width : calc(100% - 30px);

  }

  结果Less把这个当成运算式去执行了,结果给我解析成这样:

  div {

  width: calc(70%);

  }

  于是,我把Less改写成这样:

  div {

  width : calc(~"100% - 30px");

  }

  解析结果正常:

  div {

  width: calc(100% - 30px);

  }

  然而,把30px替换为一个变量,怎么写呢?

  div {

  @diff : 30px;

  width : calc(~"100% - " + @diff);

  }

  这么写Webstorm没有报错,但grunt-less报错了:

  C:\Users\zhong\WebstormProjects\test>grunt less

  Running "less:development" (less) task

  >> ParseError: Unrecognised input in style.less on line 4, column 2:

  >> 3    @diff : 30px;

  >> 4    width : calc(~"100% - " + @diff);

  >> 5 }

  Warning: Error compiling style.less Use --force to continue.

  Aborted due to warnings.

  于是这么写:

  div {

  @diff : 30px;

  width : calc(~"100% - " @diff);

  }

  顺利编译过去,但Webstorm却老是提示语法错误,虽然也能编译但看着文件有一个错误提示心里老感觉不爽,找半天也没发现Webstorm如何调试语法提示错误设置

  于是,改成如下写法:

  div {

  @diff : 30px;

  width : calc(~"100% - @{diff}");

  }

3、使用ajax上传图片,base64格式上传

function sendImg(event){

            if($(".upload-img")[0].files.length){

                var img = $(".upload-img")[0];

                var imgFile = new FileReader();

                var imgData=""

                imgFile.readAsDataURL(img.files[0]);

                imgFile.onload = function () {


                    imgData = this.result; //base64数据  

                    $.ajax("", {

                        method: "post",

                        data:{

                            file:imgData

                        },

                        success:function(res){

                            $('.repair-image').eq(tuIndex).attr('src',JSON.parse(res).img);

                            img_arr[tuIndex] = JSON.parse(res).img;

                            $.hideLoading();

                        },

                        fail:function(){

                            $.hideLoading();

                        },

                        error:function(){

                            $.hideLoading();

                        }

                    });


                }

            }

        }

4、项目中想让label 内容两端对齐,但又不想用flex布局,解决办法

text-align:justify 及 text-align-last:justify 

你可能感兴趣的:(项目部分功能实现)