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 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
Vue.use源码分析
Apr 22 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
浅谈小程序 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最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
python模拟登陆,用session维持回话的实例
2018/12/27 Python
pyqt5之将textBrowser的内容写入txt文档的方法
2019/06/21 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
德国网上药房:Apotal
2017/04/04 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
保险专业大学生职业规划书
2014/03/03 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
节能减耗标语
2014/06/21 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
房产公证委托书范本
2014/09/20 职场文书
关于JavaScript轮播图的实现
2021/11/20 Javascript
Mysql忘记密码解决方法
2022/02/12 MySQL
Python使用openpyxl模块处理Excel文件
2022/06/05 Python