| 前端难点，坑点总结 | 您所在的位置：网站首页 › 开发原神的难点 › 前端难点，坑点总结 |
前端难点，坑点总结
|
问题总结
前言登录验证码图片显示post下载文件js调用ie浏览器的打印功能打印网页上内容移动端适配不同的屏幕ie9浏览器异步上传文件ie浏览器 input标签会出现ie自带叉号使用flex布局，文字超出部分变省略号移动端1px边框实现总结
前言
最近工作上遇见一些难点和坑，花费了不少时间去解决，所以想着先把这些难点和坑记录下来，方便下次查找。同时希望可以有需要的童鞋。 登录验证码图片显示后台返回的登录验证码图片是以流的形式返回的。所以这里需要使用到Uint8Array和String.fromCharCode这2个api。Uint8Array表示一个8位无符号整型数组，用来存储返回来的流。String.fromCharCode()根据指定的 Unicode 编码中的序号值来返回一个字符串。这里我是使用axios进行请求的，同是需要指定返回的类型是arraybuffer，代码如下： axios .get(url, { responseType: "arraybuffer" }) .then(res => { if (res.status == 200) { this.captcha = "data:image/png;base64," + btoa( new Uint8Array(res.data).reduce( (data, byte) => data + String.fromCharCode(byte), "" ) ); } else { } }) .catch(() => {}); post下载文件出于安全的考虑，后台使用post进行文件下载。这里主要是使用到了FileReader这个文件读取对象和原生的html标签a。大概思路如下：使用FileReader中的readAsDataURL读取后台返回的blob内容，一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。然后动态生成一个a标签，将Base64字符串挂载到a标签的href属性中，然后添加到网页中，触发a标签的点击事件，最后把a标签移除。这里我使用的是axios进行请求的，同是需要指定返回的类型为blob，代码如下： axios .post(url, params, { responseType: "blob" }) .then(res => { if (res.status == 200) { const fileName = `${new Date()}.xls`; let blob = res.data; let reader = new FileReader(); reader.readAsDataURL(blob); reader.onload = e => { let a = document.createElement("a"); a.download = fileName; a.href = e.target.result; document.body.appendChild(a); a.click(); document.body.removeChild(a); }; } else { } }) .catch(error => {}); js调用ie浏览器的打印功能打印网页上内容这里是调用ie浏览器的打印功能，而且还是打印iframe里面的内容。其他浏览器，如谷歌，火狐等等，实现起来很简单。这里就不说其他浏览器了。只说ie。先简单说一下需求吧。首先用户选中一条数据进行打印，然后以弹框的形式显示要打印的内容，确认无误后调用ie的浏览器打印功能进行打印。 要使用e的浏览器打印功能，需要手动开启打印功能。开启步骤如下： 1、点击IE浏览器右上角设置图标选择 Internet选项→安全→internet→自定义级别，对未标记为可安全执行脚本的ActiveX初始化并执行，选择提示 2、点击IE浏览器右上角设置图标选择 Internet选项→安全→受信任的站点→站点→取消勾选对该区域的所有站点要求服务器验证(https:)(s)→添加 3、若以上设置仍无法进行打印，请将“Internet选项→安全→受信任的站点→自定义级别”、 “Internet选项→安全→internet→自定义级别” 处的关于“ActiveX控件和插件”下的内容全部设置为启动 同是需要注意以下2点： 1、你要打印什么内容就显示什么内容，其余的不需要显示，可以使用以下的媒体查询来控制打印的时候显示什么，隐藏什么 @media print { .print { display: block; padding-top: 20px; } /* 去掉页眉页脚 */ @page { size: auto; margin: 0mm; } }2、背景颜色是不能被打印出来的，但可以打印图片，可以使用图片来代替背景颜色 js调用ie浏览器打印功能代码如下 if (!!window.ActiveXObject || "ActiveXObject" in window) { try { var HKEY_Root, HKEY_Path, HKEY_Key; HKEY_Root = "HKEY_CURRENT_USER"; HKEY_Path = "\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"; var Wsh = new ActiveXObject("WScript.Shell"); HKEY_Key = "header"; //设置页眉（为空） Wsh.RegWrite(HKEY_Root + HKEY_Path + HKEY_Key, ""); HKEY_Key = "footer"; //设置页脚（为空） Wsh.RegWrite(HKEY_Root + HKEY_Path + HKEY_Key, ""); //设置下页边距（0） HKEY_Key = "margin_bottom"; Wsh.RegWrite(HKEY_Root + HKEY_Path + HKEY_Key, "0"); HKEY_Key = "margin_left"; //设置左页边距（0） Wsh.RegWrite(HKEY_Root + HKEY_Path + HKEY_Key, "0"); HKEY_Key = "margin_right"; //设置右页边距（0） Wsh.RegWrite(HKEY_Root + HKEY_Path + HKEY_Key, "0"); HKEY_Key = "margin_top"; //设置上页边距（8） Wsh.RegWrite(HKEY_Root + HKEY_Path + HKEY_Key, "0"); document.body.className += " ext-ie"; document.execCommand("print", false, null); } catch (error) { } } else { } 移动端适配不同的屏幕移动端采用的是rem+flex布局的，设计稿的基准是以375为基准的。 1、根据不同的屏幕修改根元素html的字体大小。代码如下: document.addEventListener('DOMContentLoaded', () => { let fontSize = window.innerWidth / 10 fontSize = fontSize > 50 ? 50 : fontSize const html = document.querySelector('html') html.style.fontSize = fontSize + 'px' })2、提供2个方法进行px和rem之间的换算，代码如下 function realPx(px) { const maxWidth = window.innerWidth > 500 ? 500 : window.innerWidth return px * (maxWidth / 375) } function px2rem(px) { const ratio = 375 / 10 return px / ratio }3、css换算单位，这里使用的是sass，代码如下 $ratio: 375 / 10; @function px2rem($px) { @return $px / $ratio + rem; }4、重置样式，这个目的是为了网页在不同的浏览器中表现出来的效果一致 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } a { text-decoration: none; -webkit-backface-visibility: hidden; } li { list-style: none; } html, body { width: 100%; height: 100%; overflow: hidden; user-select: none; } body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } html, body { font-family: 'PingFangSC-Light', 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', 'Arial', 'sans-serif'; } ie9浏览器异步上传文件ie9是不支持使用ajax进行异步上传文件的，这里借助了jquery.js和jquery.form.js，原理方面大家可以上网百度一下，主要是借助了iframe。 这里有一点需要切记的是，后台必须返回json字符串，不能直接返回json，否则ie9会误认为返回的是什么json文件，然后出现下载的弹框提示。 html代码如下 上传控件js代码 let self = this; var ajaxFormOption = { resetForm: true, success: function(res) { }, error: function(e) { } }; $("#ajaxForm").ajaxSubmit(ajaxFormOption); ie浏览器 input标签会出现ie自带叉号ie10以上可以通过css样式清除input里面叉号,css代码如下: ::-ms-clear, ::-ms-reveal{display: none;}但是ie9通过css样式是清除不了input里面的叉号,但是可以给input设置宽度，从而隐藏自带的叉号。宽度的临界值是137px，超过137px叉号是不能消失的，小于或者等于137px就可以隐藏叉号。至于为什么是临界值是137px，那是因为那个叉号就是出现在距离input标签左侧137px的位置。所以当input标签宽度小于137px的时候，叉号并不是真正的清除，而是相当于overflow: hidden被隐藏了 使用flex布局，文字超出部分变省略号使用flex布局的时候，子元素使用了flex:1这个属性来占满剩下的宽度，但是超出部分的文字不能变成省略号，而是把元素给撑开了。这是因为如果没有设置width,当内部元素的内容大小超过平均分配的剩余空间时,元素的宽度等于内容大小。所以宽度要设置成0，直接设置width为0可以保证元素宽度平分父元素宽度 overflow: hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/* 超出部分显示省略号 */ white-space: nowrap;/*规定段落中的文本不进行换行 */ flex:1; width:0 移动端1px边框实现使用css3的媒体查询+transform的scale -webkit-device-pixel-ratio 指的是像素比 /* 实现1px边框 */ .scale-1px { position: relative; border: none; } @media only screen and (-webkit-device-pixel-ratio:2){ .scale-1px:after { content: ''; position: absolute; height: 1px; width: 100%; bottom: 0; left: 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; } } @media only screen and (-webkit-device-pixel-ratio:3){ .scale-1px:after { content: ''; position: absolute; height: 1px; width: 100%; bottom: 0; left: 0; -webkit-transform: scaleY(0.333); transform: scaleY(0.333); -webkit-transform-origin: 0 0; transform-origin: 0 0; } } 总结目前就遇见这些相对比较难，坑的问题，后续要是遇见其他的问题，我会更新这篇文章。 |
【本文地址】