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根据纬度经度查看地图处理程序
May 08 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
JS立即执行的匿名函数用法分析
Nov 04 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
解决iView Table组件宽度只变大不变小的问题
Nov 13 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
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
python基于SMTP协议发送邮件
2019/05/31 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
python相对企业语言优势在哪
2020/06/12 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
教师实习期自我鉴定
2013/10/06 职场文书
小学教师的个人自我鉴定
2013/10/26 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
欢迎词范文
2015/01/27 职场文书
java设计模式--建造者模式详解
2021/07/21 Java/Android