【总结】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?

《参考:FileReader》

模拟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共享

也即是把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>

 事件

通过事件捕获实现登录拦截思路demo

document.addEventListener('click',function(event){
    if(event.target.tagName.toLowerCase() == 'a') {
        // 在此阶段可以判断是否登录,未登录进行阻止捕获
        if (event.preventDefault) {
            event.preventDefault(); 
       } else {
            event.returnValue = false;
      }
    }
},true);

 HTML5相关

canvas绘制文本内容自动换行

/** canvas中的文字字段断行
 * @param {String} textContent 绘制的文本内容
 * @param {Number} textMaxWidth 每行文本的最大宽度
 * @param {Number} drawX 绘制文本的x坐标
 * @param {Number} drawY 绘制文本的y坐标
 * @param {Number} lineHeight 文本之间的行高
 * @param {Number} lineNum 最多绘制的行数 超过设置的行数..展示, 不设置此参数自动往下断行
 * 
 * */
function textBrokenLine(textContent,textMaxWidth,drawX,drawY,lineHeight,lineNum) {
    // 创建canvas
    var canvas = document.createElement('canvas');
    canvas.id = 'canvas';
    document.body.appendChild(canvas);
    var ctx = canvas.getContext('2d');
    ctx.font = "14px 微软雅黑";
    ctx.fillStyle = 'black';

    if(ctx.measureText(textContent).width <= textMaxWidth) {
        ctx.fillText(textContent,drawX,drawY);
    } else {
        var drawTxt = ''; // 当前绘制的内容
        var drawIndex = 0; // 当前绘制内容的索引
        var drawLine = 1; // 第几行开始绘制
        for(var i = 0; i < textContent.length; i++) {
            drawTxt += textContent[i];
            if(ctx.measureText(drawTxt).width >= textMaxWidth) {
                if(lineNum) { // 有最多展示几行的参数进行特殊处理
                    if (drawLine >= lineNum) {
                        ctx.fillText(textContent.substring(drawIndex, i) + '..', drawX, drawY);
                        break;
                    } else {
                        ctx.fillText(textContent.substring(drawIndex, i + 1), drawX, drawY);
                        drawIndex = i + 1;
                        drawLine += 1;
                        drawY += lineHeight;
                        drawTxt = '';
                    }
                } else {
                    ctx.fillText(textContent.substring(drawIndex, i + 1), drawX, drawY);
                    drawIndex = i + 1;
                    drawY += lineHeight;
                    drawTxt = '';
                }
            } else {
                // 内容绘制完毕,但是剩下的内容宽度不到textMaxWidth
                if (i === textContent.length - 1) {
                    ctx.fillText(textContent.substring(drawIndex),drawX,drawY);
                }
                
            }
        } 
    }
    
    
    // 获取canvas转化结果base64
    var canvasDom = document.getElementById("canvas");
    canvasDom.style.border = "red 1px solid";
    var base64 = canvasDom.toDataURL("image/png");
    console.log(base64);
    // canvasDom.parentNode.removeChild(canvasDom);
}

// 调用
textBrokenLine('这是用户输入的一段文字,这是用户输入的一段文字,这是用户输入的一段文字',100,0,20,20);

 

其它

获取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) {}

 

posted @ 2019-09-02 21:06  风雨后见彩虹  阅读(455)  评论(0编辑  收藏