【总结】web工作代码分类整理（持续更新）
文件、blob
文件下载失败，将Blob对象转换为Json，处理异常错误？
捕获异常：
/** 导出文件流成功失败分别干干什么
* @param {String} res 文件流或者JSON对象（错误情况下）
* @param {Boolean} blob res资源是否是blob对象，文件流 默认不传递该参数
*
* */
export function downStreamCheck(res, blob) {
let result = {};
return new Promise((resolve, reject) => {
let reader = new FileReader();
reader.onload = e => {
try {
result = JSON.parse(e.target.result);
} catch (e) {
// console.log(e)
} finally {
if (typeof result.code !== 'undefined') { // 返回错误对象
Message({
message: result.message,
type: 'error',
duration: 5 * 1000
});
} else {
resolve();
}
}
}
if (!blob) {
reader.readAsText(new Blob([res.data], {
type: 'application/octet-stream'
}));
} else {
reader.readAsText(res.data);
}
})
}
调用方式：
this.downStreamCheck(result).then(() => {
//导出文件成功后的操作
this.result=result;
})
问题地址：处理文件下载失败，如何将Blob对象转换为Json？
模拟a标签实现接口下载
如果返回的正常的文件流一般模拟a标签实现下载，如下：
/**
* @param {String} resource 文件流
* @param {String} fileType 文件类型
* @param {String} fileName 文件名 （可以响应头部读取文件名，如下）
* let resultFileName = res.headers['content-disposition'];
* let name = resultFileName.substring(resultFileName.indexOf('=')).substring(1);
* 使用方式 this.$downloadBlob(data,'application/octet-stream','download.zip');其中文件名可以从响应头截取
*
* */
export function downloadBlob(resource, fileType, fileName) {
var data = new Blob([resource], {
type: fileType
});
if ('download' in document.createElement('a')) { //非IE
var downloadUrl = window.URL.createObjectURL(data);
var anchor = document.createElement("a");
anchor.href = downloadUrl;
anchor.download = fileName;
anchor.style.display = 'none';
document.body.appendChild(anchor);
anchor.click();
window.URL.revokeObjectURL(anchor.href);
document.body.removeChild(anchor);
} else { //IE10+下载
navigator.msSaveBlob(data, fileName);
}
}
获取响应头部返回的文件名
一般下载的文件都需要从响应头部读取文件名，如下代码：
/** 从响应头部读取文件名称
* @param {res} response
* */
export function responseFileName(res) {
if (res && res.headers) {
let resultFileName = decodeURI(res.headers['content-disposition']);
return resultFileName.substring(resultFileName.indexOf('=')).substring(1);
}
return '';
}
上面三个函数一般综合起来一起使用，下面vue使用方式，代码把三个方法注册到了全局，如下：
packetDownload(params).then((res) => {
this.$downStreamCheck(res).then(() => {
let fileName = this.$responseFileName(res);
this.$downloadBlob(res.data,'application/octet-stream',fileName);
})
})
cookie、缓存、跨域通讯、XSS
设置二级域名cookie共享
也即是把cookie的domain设置为顶级域名。
function getdomain(){
var domain = document.domain;
var ip = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
if(ip.test(domain)){
return domain;
}else{
return document.domain.split('.').slice(1).join('.');
}
}
var firstDomainName = getdomain();
document.cookie="userid=888abc;domain="+firstDomainName+";path=/";
前端强制页面不缓存no-cache、no-store
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
日期相关
实现周的切换（上一周、下一周）
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style>
.con{overflow: hidden;}
.same,#time{float:left;}
#time{
width: 260px;
text-align: center;
}
</style>
</head>
<body>
<div class="con">
<button class="same" id="last-week">前一周</button>
<div id="time"></div>
<button class="same" id="next-week">下一周</button>
</div> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
var currentFirstDate;
var startTime = '';
var endTime = '';
function formatDate(date,joinStr){
if(joinStr) {
return date.getFullYear()+ joinStr + (date.getMonth()+1)+ joinStr + date.getDate();
} else {
return date.getFullYear()+'年' + (date.getMonth()+1)+'月' + date.getDate()+'日';
}
} function addDate(date,n) {
date.setDate(date.getDate()+n);
return date;
}
function setDate(date) {
var week = date.getDay()-1;
date = addDate(date,week*-1);
currentFirstDate = new Date(date);
var str = formatDate(date) + '-' + formatDate(addDate(date,6));
startTime = formatDate(addDate(date,-6),'-');
endTime = formatDate(addDate(date,6),'-');
$('#time').html(str);
}
function ajaxlist() { } $(function() {
setDate(new Date());
ajaxlist();
$('#last-week').on('click',function() {
setDate(addDate(currentFirstDate,-7));
// 接口请求
ajaxlist();
})
$('#next-week').on('click',function() {
setDate(addDate(currentFirstDate,7));
// 接口请求
ajaxlist();
})
})
</script>
</body>
</html>
其它
获取IE浏览器版本
function IEVersion(){
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if(isIE) {
userAgent.match(/MSIE (\d+\.\d+);/g);
var fIEVersion = parseFloat(RegExp["$1"]);
if(fIEVersion == 7) {
return 7;
} else if(fIEVersion == 8) {
return 8;
} else if(fIEVersion == 9) {
return 9;
} else if(fIEVersion == 10) {
return 10;
} else {
return 6;//IE版本<=7
}
} else if(isEdge) {
return 'edge';//edge
} else if(isIE11) {
return 11; //IE11
}else{
return -1;//不是ie浏览器
}
}
JS跳转到app store内应用下载页面
跳转到应用商店:
(https)|(itms-apps)://itunes.apple.com/app/id{appID}
跳转到撰写评价：
(https)|(itms-apps)://itunes.apple.com/app/id{appID}?action=write-review
跳转到查看评价：
(https)|(itms-apps)://itunes.apple.com/app/viewContentsUserReviews?id={appID}
手机端和pc端均可适用。
示例代码：
window.location.href = 'itms-apps://itunes.apple.com/app/id414478124?action=write-review'
h5 JS判断是安卓还是ios设备，跳转到对应的下载地址
;(function(){
var u = navigator.userAgent;
var ua = navigator.userAgent.toLowerCase();
var dom = document.getElementById('btn');
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(ua.match(/MicroMessenger/i)=="micromessenger") { //微信内置浏览器
dom.addEventListener('touchstart', function (event) {
},false);
}else{
if(isiOS){
dom.addEventListener('touchstart', function (event) {
//跳转到ios下载地址(示例：微信app)
window.location.href='itms-apps://itunes.apple.com/app/id414478124';
},false);
}
else if(isAndroid){
dom.addEventListener('touchstart', function (event) {
window.location.href='http://www.XXX.com/apk/demo.apk';
},false);
}else{ //PC 端
dom.addEventListener('click',function(){
//跳转到andriod下载地址
window.location.href='http://www.XXX.com/apk/demo.apk';
},false);
}
}
})();
pdf.js官网基本代码demo笔记
// atob() is used to convert base64 encoded PDF to binary-like data.
// (See also https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/
// Base64_encoding_and_decoding.)
var pdfData = atob(
'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G'); // Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf']; // The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js'; // Using DocumentInitParameters object to load binary data.
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded'); // Fetch the first page
var pageNumber = 1;
pdf.getPage(pageNumber).then(function(page) {
console.log('Page loaded'); var scale = 1.5;
var viewport = page.getViewport(scale); // Prepare canvas using PDF page dimensions
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width; // Render PDF page into canvas context
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.then(function () {
console.log('Page rendered');
});
});
}, function (reason) {
// PDF loading error
console.error(reason);
});
判断移动端、ipad设备
try {
if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
window.location.href = "https://pc.com/";
} else if(/iPad/i.test(navigator.userAgent)) {
window.location.href = "https://pad.com/"
}
} catch(e) {}
【总结】web工作代码分类整理（持续更新）的更多相关文章
- BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js
BAT 前端开发面经 —— 吐血总结 目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...
- C++入职学习篇--代码规范（持续更新）
C++入职学习篇--代码规范(持续更新) 一.头文件规范 在头文件中大家一般会定义宏.引入库函数.声明.定义全局变量等,在设计时最后进行分类,代码示范(自己瞎琢磨的,请多多指点): #ifndef T ...
- web前端面试题（持续更新）
此文是我本人在面试的时候遇到的问题和一些同学遇到的问题加资料上面的问题的总结.(将会持续更新,因为未有满意工作) 面试时有几点需要注意: 1.面试题目:根据你的等级和职位的变化,入门级到大神级,广度和 ...
- java视频教程 Java自学视频整理(持续更新中...)
视频教程,马士兵java视频教程,java视频 1.Java基础视频 <张孝祥JAVA视频教程>完整版[RMVB](东西网) 历经5年锤炼(史上最适合初学者入门的Java基础视频)(传智播 ...
- web前端开发浏览器兼容性 - 持续更新
浏览器兼容性问题又被称为网页或网站兼容性问题:不同浏览器内核及所支持的html等网页语言标准不同,不同客户端环境(如分辨率不同)造成实际显示效果未能达到预期理想效果 首先我们来看一下目前市面上常见的一 ...
- web前端开发随手笔记 - 持续更新
本文仅为个人常用代码整理,供自己日常查阅 html 浏览器内核 <!--[if IE]><![endif]--> <!--[if IE 6]><![endif ...
- zabbix常见问题整理 持续更新……
[toc] 1.zabbix仪表板错误 问题: zabbix server is not running: the information displayed may not be current 解 ...
- linux就该这么学--资料整理--持续更新
基础命令 服务管理 systemctl redhat7 systemctl start foo.service 启动服务 systemctl restart foo.service 重启服务 syst ...
- iOS开发网络资源整理-持续更新
本文记录iOS开发相关的网络社区和博客 1.objc中国 网址:http://objccn.io 简介:onevcat创建,项目的成立源于国内 Objective-C 社区对 objc.io 的翻译活 ...
随机推荐
- lynis安装和扫描Linux的安全漏洞
今天客户的服务器出了点问题需要排查具体的原因,在德国朋友的建议下用Lynis进行扫描,Lynis是Linux系统中的审计工具,能够对Linux系统的安全进行检测,在对系统进行扫描检测后,会生成安全报告 ...
- VIJOS-P1446 最短路上的统计
JDOJ 1523: VIJOS-P1446 最短路上的统计 JDOJ传送门 Description 一个无向图上,没有自环,所有边的权值均为1,对于一个点对(a,b),我们要把所有a与b之间所有最短 ...
- ESP8266 SDK开发: 测试下诱人的程序
前言 这一节测试一下诱人的程序 实现的功能,APP通过SmartConfig给Wi-Fi模块配网并绑定设备,然后通过MQTT远程控制开发板的继电器, APP显示ESP8266采集的温湿度数据. 简而言 ...
- [无效]网络流之Dinic算法
// 此博文为迁移而来,写于2015年2月6日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102vrg4.html UPDA ...
- iptables 数据走向流程
链的规则存放于哪些表中(从链到表的对应关系): PREROUTING 的规则可以存在于:raw表,mangle表,nat表. INPUT 的规则可以存在于:mangle表,filter表,(cento ...
- quick如何打开工程或者示例
quick如何打开工程或者示例 1. 那里打开工程 cc.ui.UIPushButton.new(images, {scale9 = true}) :setButtonSize(buttonWidth ...
- 配置tomcat服务器内存大小中的Xms、Xmx、PermSize、MaxPermSize 详解
1.参数的含义 -vmargs -Xms256m -Xmx512m -XX:PermSize=256M -XX:MaxPermSize=512M -vmargs 说明后面是VM的参数,所以后面的其实都 ...
- CentOS环境Tomcat配置JDK的另一种方式
如下图catalina.sh中的描述,JAVA_HOME环境变量可以配置在CATALINA_BASE/bin/目录下的setenv.sh文件中(默认这个文件是不存在的) 创建文件setenv.sh,在 ...
- GCN(Graph Convolutional Network)的简单公式推导
第一步:从前一个隐藏层到后一个隐藏层,对结点进行特征变换 第二步:对第一步进行具体实现 第三步:对邻接矩阵进行归一化(行之和为1) 邻接矩阵A的归一化,可以通过度矩阵D来实现(即通过D^-1*A来实现 ...
- Linux 就该这么学 CH06 存储结构与磁盘划分
1.一切从"/"开始 linux系统中一切都是文件,而且一切文件的路径都是从根目录(/)开始的.系统中的根目录和文件名称都是严格区分大小写的,并且文件名中不能包含/符号. 绝对路径 ...