面向IE11开发的一些启示

最近由于客户需要在notes邮箱打开链接弹出页面操作，由于新框架是vue2，脚手架是vue-cli3，由于就算导入babel后也不理想（白屏）。所以打算加个ie专属页面，框架选择layui(插件多)，bootstrap和jq

需要实现的功能： pdf线上显示 时间轴 以及 图片截取功能 和文件上传

各个功能碰到的问题以及解决

pdf线上显示

本来找了 pdfjs 结果发现新版本有箭头函数等新语法 在ie11直接报错 ，所以只能选择低版本兼容。

解决方法： 去github选择旧版本进行适配

时间轴

由于jq插件自带的时间轴花里胡哨而且没达到效果，所以我突然计上心头，去ant框架通过f12复制样式直接往上怼…

样式css代码

.timeline {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #515a6e;
            font-size: 14px;
            font-variant: tabular-nums;
            line-height: 1.5;
            -webkit-font-feature-settings: 'tnum';
            font-feature-settings: 'tnum';
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .timeline-item {
            position: relative;
            margin: 0;
            padding: 0 0 20px;
            font-size: 14px;
            list-style: none;
        }

        .timeline-item-content {
            position: relative;
            top: -6px;
            margin: 0 0 0 18px;
            word-break: break-word;
        }

        .timeline-item-tail {
            position: absolute;
            top: 10px;
            left: 4px;
            height: calc(100% - 10px);
            border-left: 2px solid #e8e8e8;
        }

        .timeline-item-head {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #fff;
            border: 2px solid transparent;
            border-radius: 100px;
        }

        .timeline-item-head-blue {
            color: #5b8cfd;
            border-color: #5b8cfd;
            border: 2px solid #5b8cfd;
        }

        .timeline-item-head-red {
            color: #f5222d;   
            border-color: #f5222d;
            border: 2px solid #f5222d;
        }

        .timeline-item-head-green {
            color: #52c41a;
            border-color: #52c41a;
            border: 2px solid #52c41a;
        }

        .timeline-item-head-grey {
            color: #333;
            border-color: #333;
            border: 2px solid #333;
        }

js 代码

//data是后台返回的时间轴数据
data.forEach(function (data) {
                console.log(data)
                var litext = ''
                data.filelist.forEach(function (e) {
                litext += '<li  class="timeline-item">' +
                    '<div class="timeline-item-tail"></div>' +
                    '<div class="timeline-item-head timeline-item-head-' + data.color + '"></div><div class="timeline-item-content">' +
                    '' + data.status + '：' + time + '<br >' +
                    '' + data.mes + '<br ><span style="display: flex;">'
                    '</div></li>'
})
$('.timeline').html(litext)

效果

图片截取功能

使用的是layui的 croppers.js
官网是这个 https://fly.layui.com/extend/croppers/

出现的问题 上次在ie测试的时候出现不存在toBlob的方法 百度了下发现原来IE不支持Blob这个东西

解决方法 在croppers.js最上面添加这个代码

if (!HTMLCanvasElement.prototype.toBlob) {
    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
        value: function (callback, type, quality) {
            var canvas = this;
            setTimeout(function () {
                var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]);
                var len = binStr.length;
                var arr = new Uint8Array(len);

                for (var i = 0; i < len; i++) {
                    arr[i] = binStr.charCodeAt(i);
                }

                callback(new Blob([arr], { type: type || 'image/png' }));
            });
        }
    });
}

由于截取后的图片要上传到服务器 需要请求头token 所以需要在 croppers.js修改ajax请求

$.ajax({
                            method: "post",
                            url: url, //用于文件上传的服务器端请求地址
                            data: formData,
                            processData: false,
                            contentType: false,
                            //请求头token在请求以后添加到缓存 然后在缓存中拿到
                            headers: { 'Authorization': 'Bearer ' + localStorage.getItem('qianmigndang') },
                            success: function (result) {
                               //todo...
                            }
                        });

文件下载

谷歌浏览器的下载方式 可以通过创建a标签下载 但是我们下载文件还是需要token 只能通过XMLHttpRequest

代码如下

var xhr = new XMLHttpRequest();
                xhr.open("get", getApiUrl('storage/download/'+data.key), true);
                xhr.responseType = "blob";
                xhr.onload = function() {
                    let blob = this.response;
                    const blobUrl = window.URL.createObjectURL(blob)
                    const eleLink = document.createElement('a')
                    eleLink.download = data.filename
                    eleLink.style.display = 'none'
                    eleLink.href = blobUrl
                    // 触发点击
                    document.body.appendChild(eleLink)
                    eleLink.click()
                    // 然后移除
                    document.body.removeChild(eleLink)
                };
                let tokenList = getStore('tokenList', false);
                xhr.setRequestHeader("X-FSCNJ-ILUSystem-Token", tokenList);
                xhr.send();

在ie貌似行不通… 他会提示 eleLink.click这一行提示存取失败…

所以更改

                    var xhr = new XMLHttpRequest();
                    // xhr.open("get", 'http://demo.fsc.foxconn.com:8100/esign/storage/download/' + this.fileKey, true);
                    //encodeURI是ie在请求接口api出现中文会乱码
                    xhr.open("get", encodeURI('请求api'), true);
                    // alert(decodeURI(key))
                    xhr.responseType = "blob";
                    xhr.onload = function () {
                        var blob = this.response;
                        var blobUrl = window.URL.createObjectURL(blob)
                        var eleLink = document.createElement('a')
                        // ie专属
                        if (window.navigator.msSaveOrOpenBlob) {
                            navigator.msSaveBlob(blob, key);
                            return false
                        }
                        eleLink.download = name;
                        eleLink.style.display = 'none'
                        eleLink.href = blobUrl
                        // 触发点击
                        document.body.appendChild(eleLink)
                        eleLink.click()
                        // 然后移除
                        document.body.removeChild(eleLink)
                    };
                    xhr.setRequestHeader("Authorization", 'Bearer ' + token);
                    xhr.send();

最后最后 发现这个东西在ie11才能跑 甚至兼容不了ie10
所以记得在html加上

 <meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">

点击链接打开ie浏览器时候，会弹出以前打开的页面出现的一开始加载的问题

解决方法： 只要在执行第一个获取数据的时候给个定时器就行啦

问题到此就结束啦 ie虽说要结束了 但是还是很多人再用