Vue 后台管理类项目兼容IE9+的方法示例


Posted in Javascript onFebruary 20, 2019

最近项目进入到了第三方集成的环节,集成第三方监控非要用IE,咋办?老板让我将后台管理系统的框架兼容下IE,一直都是在chrome下开发的,也不知道IE下是什么鬼。

目前后台管理系统前端搭建方式

目前系统是用vue-cli@2.0生成的,UI框架使用的是iview,ajax请求使用的是axois,此外就没有什么特殊的npm包了。

需要解决的兼容问题

经过自己的一番测试,目前主要有以下的兼容问题:

  • 在IE下由于没有promise,所以axios不能用了;
  • 在涉及到flex、fixed、absolute定位时,IE浏览器下的显示效果有较大的区别;
  • excel表单导出异常;
  • 部分使用的npm包中的代码未经编译会有一些ES6的语法;
  • vue-router路由失效;
  • IE自动缓存ajax请求结果。

如何解决这些问题

解决第一个问题需要在项目中引入babel-polyfill, 我的处理方式时在build->webpack.base.config.js文件中的添加一下的配置:

Vue 后台管理类项目兼容IE9+的方法示例 

解决第二个问题则需要自己写一些兼容性比较好的样式,在这里我就不做过多的解释了;

第三个问题的解决过程比较的曲折,系统的下载是同过接口返回文件流的形式进行下载的,可以看下我原来的代码,原先通过axios的拦截器来获取响应内容的格式,然后进行下载,但是在IE的兼容测试过程中发现了一个问题,那就是axios在chrome和IE下的表现不一致,具体哪里一致可以简单的说下:

const downloadUrl = url => {
 let iframe = document.createElement('iframe');
 iframe.style.display = 'none';
 iframe.src = url;
 iframe.onload = function () {
 document.body.removeChild(iframe);
 };
 document.body.appendChild(iframe);
};
// 拦截二进制响应流
if (res.headers && (res.headers['content-type'] === 'application/vnd.ms-excel;charset=UTF-8' || res.headers['content-type'] === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || res.headers['content-type'] === 'application/octet-stream;charset=UTF-8')) {
downloadUrl(res.request.responseURL);
return
}

这里面的问题在于在IE浏览器中res.request.responseURL这个属性是不存在的,就算存在了,在进行文件下载时也会出现异常,后台看到很多人都出现了这样的问题,怎么办,我相信这个问题一定是可以解决的,虽然没有搜到合适的方案,但是一个网友提示这一切的问题都是使用了第三方封装的ajax请求,那为什么不自己手写一个原生的ajax请求呢?切换思路后发现,果然是可以的,ajax下载文件流可以使用以下代码:

utils.exportFiles = (type = 'GET', url = null) => {
 var xhr = null
 if (window.XMLHttpRequest) { // Mozilla 浏览器
 xhr = new XMLHttpRequest()
 } else {
 if (window.ActiveXObject) {
  try {
  xhr = new ActiveXObject('Microsoft.XMLHTTP')
  } catch (e) {
  try {
   xhr = new ActiveXObject('Msxml2.XMLHTTP')
  } catch (e) {
  }
  }
 }
 }

 xhr.open(type, url, true)
 xhr.responseType = 'blob'
 if (type === 'POST') {
 xhr.setRequestHeader('Content-type', 'application/json')
 }
 xhr.onload = function (res) {
 var contentDisposition = xhr.getResponseHeader('content-disposition')
 var contentType = xhr.getResponseHeader('content-type')
 var filename = contentDisposition.split(';')[2]
 // eslint-disable-next-line no-eval
 eval(filename)
 filename = decodeURI(filename)
 if (this.status === 201) {
  var blob = this.response
  if (typeof window.navigator.msSaveBlob !== 'undefined') {
  // IE 浏览器进行下载
  window.navigator.msSaveBlob(blob, filename)
  } else {
  // 非浏览器进行下载
  var downloadUrl = document.createElement('a')
  downloadUrl.download = filename
  downloadUrl.style.display = 'none'
  downloadUrl.href = URL.createObjectURL(blob)
  document.body.appendChild(downloadUrl)
  downloadUrl.click()
  URL.revokeObjectURL(downloadUrl.href)
  document.body.removeChild(downloadUrl)
  }
 } else {
  console.log('导出错误')
 }
 }

 xhr.send()
}

第四个问题同样还是一些webpack打包的问题,在vue-cli2.0生成的项目中,哪些js会使用babel-loader是这样配置的:

Vue 后台管理类项目兼容IE9+的方法示例

我们可以看到,其针对3个文件加的js代码使用babel-loader,将需要使用babel-loader的npm包添加到其中即可。 第五个问题百度可以搜到,其中我比较推荐的解决方案如下:

const IE11RouterFix = {
 methods: {
 hashChangeHandler: function () {
  this.$router.push(window.location.hash.substring(1, window.location.hash.length));
 },
 isIE11: function () { return !!window.MSInputMethodContext && !!document.documentMode; }
 },
 mounted: function () { if (this.isIE11()) { window.addEventListener('hashchange', this.hashChangeHandler); } },
 destroyed: function () { if (this.isIE11()) { window.removeEventListener('hashchange', this.hashChangeHandler); } }
}

export default IE11RouterFix

var vm = new Vue({
el: '#app',
router,
store,
mixins: [IE11RouterFix],
components: {
App,
},
template: '<App/>'
});

第6个问题是过了一段时候发现的,IE会自动的缓存请求的结果,那么对系统中的一些操作是有影响的,比如说是在数据保存完成之后回到列表页的刷新,取到的数据是缓存中的数据。怎么办,我们可以在axios的请求拦截器中自动为请求地址添加时间戳,保证每次的请求的地址是不一样的。

总结

以上耗时一天的IE兼容就完成了,目前只能兼容到IE11,IE10,其他的我已经放弃了,就算再兼容完成后,系统再IE10下的表现也不是特别的好,感觉比较卡,再IE11下也只能说是正常。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery cookie插件代码类
May 26 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
浅谈小程序 setData学问多
Feb 20 #Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 #Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 #Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 #Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 #Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 #Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 #Javascript
You might like
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
JavaScript 参考教程
2006/12/29 Javascript
js tab效果的实现代码
2009/12/26 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
python调用java的Webservice示例
2014/03/10 Python
Python实现发送email的几种常用方法
2014/08/18 Python
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
flask框架中的cookie和session使用
2021/01/31 Python
采购部部门职责
2013/12/15 职场文书
销售部主管岗位职责
2013/12/18 职场文书
职业生涯规划书的格式
2013/12/29 职场文书
餐饮收银员岗位职责
2014/02/07 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
党支部书记岗位职责
2015/02/15 职场文书
社区重阳节活动总结
2015/03/24 职场文书
运动会广播稿20字
2015/08/19 职场文书