a 标签下载文件、input file 文件上传、js下载文件兼

1. Q：a 标签下载文件

A:

<a 
class="download small-hand" 
:href=linkConf 
download="template_1544007466.xlsx"
>
下载模板
</a>

linkConf:linkConfig.getHost()+"/example/bn_card_grant.xlsx"

2.Q:input file 文件上传

A:

布局：html

<a href="#" class="update_logo small-hand">编辑logo</a>

 <input

               type="file"

               name="upload_logo_img"

               class="upload_img small-hand"

                ref="inputer"

                @change="changepic($event)"

                 accept="image/png,image/jpeg,image/gif,image/jpg"

                  id="logo-input"

   >

css:

.upload_logo>.upload_img {

        width: 138px;

        height: 30px;

        position: relative;

        bottom: 20px;

        z-index: 100;

  opacity: 0;

    }

js:

        changepic(){

            let inputDOM = this.$refs.inputer;// 通过DOM取文件数据

            let fileObj = inputDOM.files[0];//获取文件信息

            let size = '',format = '',index;

            if(fileObj){

                index = fileObj.name.lastIndexOf(".");

                format = fileObj.name.substring(index+1);

                size = (fileObj.size / (1024 * 1024)).toFixed(2);

            }

            if(format != 'jpg' &&  format != 'png'){

                this.$toast('格式不正确，请重新上传',this.toastType)

                return;

            }

            if(size > 1){

                this.$toast('请选择不大于1M的图片',this.toastType)

                document.getElementById('logo-input').value = ""

                return;

            }

            var reader = new FileReader();

            reader.readAsDataURL(fileObj); // 读出 base64

            let that = this;

            reader.onloadend = function () {

                //图片的 base64 格式, 可以直接当成 img 的 src 属性值       

                that.uplpadImg = reader.result;

            }

            let fileInfo = {

                imageFile:fileObj,

                xxx:xxx\

            }

            this.$uploadFile('xxxxx',fileInfo,this).then((response)=>{

            })

        },

3.Q:js下载文件兼容各种浏览器

A:

chrome、火狐、360都可以

 downloadIamge(imgsrc, name) {//下载图片地址和图片名 

            var image = new Image();

            // 解决跨域 Canvas 污染问题

            image.setAttribute("crossOrigin", "anonymous");

            image.onload = function() {

                var canvas = document.createElement("canvas");

                canvas.width = image.width;

                canvas.height = image.height;

                var context = canvas.getContext("2d");

                context.drawImage(image, 0, 0, image.width, image.height);

                var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

                var a = document.createElement("a"); // 生成一个a元素

                var event = new MouseEvent("click"); // 创建一个单击事件

                a.download = name || "photo"; // 设置图片名称

                a.href = url; // 将生成的URL设置为a.href属性

                a.dispatchEvent(event); // 触发a的单击事件

            };

            image.src = imgsrc;       

 },

IE浏览器图片保存本地

SaveAs5(imgURL){

            var oPop = window.open(imgURL,"","width=1, height=1, top=5000, left=5000");

            for(; oPop.document.readyState != "complete"; )

            {

                if (oPop.document.readyState == "complete")break;

            }

            oPop.document.execCommand("SaveAs");

            oPop.close();

        },