【总结】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 的翻译活 ...
随机推荐
- ES6学习笔记 -- 尾调用优化
什么是尾调用? 尾调用(Tail Call)是函数式编程的一个重要概念,就是指某个函数的最后一步是调用另一个函数. function f(x) { return g(x) } 如上,函数 f 的最后一 ...
- 【MyEclipse】安装svn插件
svn插件包下载:http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240 重启myeclipse 看import就 ...
- java 构造实例
Person父类 package com.oracle.demo03; public class Person { private String name; private int age; //需要 ...
- C实现Linux之touch命令
Linux 的 touch 命令用来修改文件时间戳,或者新建一个不存在的文件,使用方式如下: touch [-acm][-r ref_file(参照文件)|-t time(时间值)] file(文件名 ...
- sql server 2016 AlwaysOn实现无域高可用全教程
一.简介环境:小编使用的服务器是windows server 2016(系统服务器) + sql server 2016(数据库服务器)(windows server 2016 + sql serve ...
- Java 并发系列之六：java 并发容器（4个）
1. ConcurrentHashMap 2. ConcurrentLinkedQueue 3. ConcurrentSkipListMap 4. ConcurrentSkipListSet 5. t ...
- Servlet 4.0 入门
Java™ Servlet API 是主流服务器端 Java 的基本构建块,也是 Java EE 技术的一部分,例如,用于 Web 服务的 JAX - RS.JSF (JavaServer Faces ...
- [Gamma]阶段测试报告
后端测试 我们进行了覆盖性测试,覆盖率达到77%. Beta阶段发现的Bug 项目显示的图片错误 无法使用搜索框 发布实验室项目的按钮点击无法跳转 连续点击发帖按钮可能发出多个相同的帖子 不需要点击我 ...
- IIS 安装 .net core 绑定为 https 使用SSL证书
前提条件: 自己服务器(Windows Server 2016)运行 dotnet .\Web****.dll 服务是可以使用http访问的 但由于实际情况必须使用https 思想历程,但未用: 1. ...
- 【python学习案例】python判断自身是否正在运行
需要引入psutil包: 实现思路: 1)用os.getpid()获取当前程序运行PID,将PID存入文件中 2)用psutil模块获取当前系统所有正在运行的pid 3)读取之前存入的PID,判断该P ...