Web开发方面、专注于Web
1月13
客户要求在手机端页面能直接点击电话可以打电话的功能,测试了下在H5页面调用手机打电话和发短信的功能按以下步骤:
<head>里面加上:

<meta name="format-detection" content="telephone=yes"/>
  

需要拨打电话的地方:
<a href="tel:400-0000-688">400-0000-688</a>
  

发短信:
<a href="sms:18688888888">发短信</a>
  
点击 页面上的电话号码 ,页面会调用手机的电话接口。
1月4
工作中发现一个问题。当我用HttpURLConnection去连接读取一个获取每年的节假日接口信息时,老是会发生这个403错误,通过浏览器访问时显示状态码为304,但量使用代码HttpURLConnection去请求会报403的错误,这个引起了IOException,导致获取的直一直为空,但是我使用浏览器请求这个接口时时就没问题。 google后知道了答案。原来如果用java代码HttpURLConnection去连的话 http header 中的User-Agent就为空,解决方法就是在连接之前先设置这个属性。

节假日获取接口:http://timor.tech/api/holiday/year/2022
12月31
公司有个项目运维管理平台中用户管理模块添加用户时填写用户邮箱反馈说不能带点,如heck.jiang@heckjj.com这种,这明显不合理呀,而且这种情况也很常见。如下图:
点击在新窗口中浏览此图片
于是乎拉下前端代码发现,校验邮箱的正则是这样的“{ required: true, message: '请输入正确的邮箱', pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, trigger: 'blur' }”,明显达到期望,自己重新写了一个如下:
^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$
用校验工具校验了一下,成功匹配到了heck.jiang@heckjj.com这个邮箱。


12月29
最近在做项目时有一个这样需求,上传文件需要显示预览,当我了解之后,我以为和普通的下载一样呢,结果后台返回的是文件流格式,据说这是因为后台是分布式部署,不能持久化存储,没办法,只能前端来处理这个文件流了,用ajax请求图片资源,服务器以文件流的形式返回。

1、返回类型需要设置为“blob”,所以需要用原生ajax,不能使用jq(原因:jquery将返回的数据转换为了string,不支持blob类型)(当然,你也可以引入组件拓展jq的能力,我知道的有一个:jquery-ajax-blob-arraybuffer.js);

2、使用FileReader将文件流转换成base64格式;

3.1、然后通过模拟点击a标签下载该文件;

3.2、或者可以设置在img元素的src属性上,在当前页面显示出来。

var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);    // 也可以使用POST方式,根据接口
  xhr.responseType = "blob";  // 返回类型blob
  // 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑
  xhr.onload = function () {
    // 请求完成
    if (this.status === 200) {
      // 返回200
      var blob = this.response;
      var reader = new FileReader();
      reader.readAsDataURL(blob);  // 转换为base64,可以直接放入a表情href
      reader.onload = function (e) {
        // 转换完成,创建一个a标签用于下载
        var a = document.createElement('a');
        a.download = 'data.xlsx';
        a.href = e.target.result;
        $("body").append(a);  // 修复firefox中无法触发click
        a.click();
        $(a).remove();
      }
    }
  };
  // 发送ajax请求
  xhr.send()


xhr.open('POST', CONTACT_ACTION_FILES_DOWNLOAD, true);
            xhr.setRequestHeader("Accept", "application/json;q=0.5");
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.responseType = "blob";  // 返回类型blob
            // 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑
            xhr.onload = function () {
                // 请求完成
                if (this.status === 200) {
                    var blob = this.response;
                    var reader = new FileReader();
                    reader.readAsDataURL(blob);  // 转换为base64,可以直接放入a表情href
                    reader.onload = function () {
                        $("#imgTest").attr("src", reader.result);
                    }
                }
            };
// 发送ajax请求
xhr.send("filePath=" + filePath);

下载文件
export const downloadStream = (method = 'GET', url, downloadName) => {
  const ctoken = getCookie('AIB_TOKEN')
  if (ctoken) {
    let xmlResquest = new XMLHttpRequest();
    xmlResquest.open(method, url, true);
    xmlResquest.setRequestHeader("Content-type", "application/json;charset=UTF-8");
    //这里需要在请求头添加该参数,已防止CSRF
    xmlResquest.setRequestHeader("csrfToken", hashStr(ctoken));
    xmlResquest.responseType = "blob";
    xmlResquest.onload = function (oEvent) {

      let content = xmlResquest.response;
      let elink = document.createElement('a');
      elink.download = downloadName;
      elink.style.display = 'none';
      let blob = new Blob([content]);
      elink.href = URL.createObjectURL(blob);

      document.body.appendChild(elink);
      elink.click();
      document.body.removeChild(elink);
    };
    xmlResquest.send();
  }

}
12月6
var userAgent=navigator.userAgent
if(userAgent.index0f("OPR")> -1){
//0pera浏览器,因为Opera浏览器的userAgent也有Chrome和Safari,所以要写在前面 alert("Opera");
}else if(userAgent.index0f("Version")>-1&&userAgent.index0f("Safari")> -1){
//没有更好的办法判断Safari浏览器,只能通过version(版本号)的英又来断,因为别的游览器版本号不是这样写的 alert("Safari"):
}else if(userAgent.index0f("Chrome")> -1){
//谷歌浏览器也有可能是使朋Chrome内核的其他谢览器 alert("Chrome");
}else if(userAgent.index0f("Firefox")>-1){
//火狐浏览器
alert("Firefox");
}else if(userAgent.index0f("compatible")>-1 &&userAgent.index0f("MSIE 10.0")> -1){
//IE 10.0
alert("IE 10.0");
}else if(userAgent.index0f("compatible")>-1&& userAgent.index0f("MSIE 9.0")> -1){
//IE 9.0
alert("IE 9.0");
}else if(userAgent.index0f("compatible")>-1 &&userAgent.index0f("MSIE 8.0")> -1){
//IE 8.0
alert("IE 8.0");
helse if(userAgent.index0f("compatible")>-1&& userAgent.index0f("MSIE 7.0")> -1){
//IE 7.0
alert("IE 7.0");

各浏览器的navigator.userAgent

浏览器  navigator.userAgent
谷歌  Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
火狐  Mozilla/5.0 (Windows NT 10.0; WOW64; rv:53.0) Gecko/20100101 Firefox/53.0
Opera  Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36 OPR/45.0.2552.635
Safari  Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.1 Safari/603.1.30
IE11.0  Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko
IE10.0  Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
IE9.0  Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
IE8.0  Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
IE7.0  Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
Windows NT 区别系统版本

系统版本  Windows NT
win 10  Windows NT 10.0
win 8  Windows NT 6.2
win 7  Windows NT 6.1
vista  Windows NT 6.0
win xp  Windows NT 5.1
win 2000  Windows NT 5.0

12月1
对于weboffice这个active插件的使用上提供点说明。

  首先在官网上下载weboffice7

     下载weboffice7-exe.rarweboffice7-x86.rar。解压后有个weboffice.exe和weboffice.cab

  1、要使用这个插件,首先你得先在电脑安装weboffice.exe

  由于这是activex插件,只支持ie,所以chrome,firefox是不支持的。所以有个ffactivex-setup-r39.rar可以提供兼容,这个需要先安装,再安装weboffice.exe 。weboffice.exe和ffactivex-setup-r39这两个安装包在你自己的web系统上可以写个js判断是否已经安装,是否ie,没有的话提供下载。

  2、安装后,在你页面上的某个固定的div内嵌入个<object> 对象,这个<object>就是offcie对象。。可以看官网上的weboffice7-demo.rar。里面有个LoadWebOffice.js。我把内容拷出来,如下面。


var s = ""
s += "<object id=WebOffice1 height=768 width='100%' style='LEFT: 0px; TOP: 0px'  classid='clsid:E77E049B-23FC-4DB8-B756-60529A35FAD5' codebase='WebOffice.cab#Version=7,0,1,0'>"
s +="<param name='_ExtentX' value='6350'><param name='_ExtentY' value='6350'>"
s +="</OBJECT>"
document.write(s)
就是返回一个object对象,其中之前下载weboffice.cab需要把地址写在codebase内。这个object对象的id是weboffice1,var obj=document.getElementById("WebOffice1") ;用obj就可以调用对这个offcie的各种操作了。具体api可以看官网提供的最后一个weboffice7-SDK.rar 。 如下面例子中就是在td内引入<object>。

<TD class=TableData vAlign=top width="85%">
        <!-- -----------------------------== 装载weboffice控件 ==--------------------------------- -->
      <SCRIPT src="LoadWebOffice.js"></SCRIPT>
            <!-- --------------------------------== 结束装载控件 ==----------------------------------- -->
            </TD>
  3、假如需要兼容chrome和firefox。。在不同的浏览器下,这个<object>对象有不同的写法,具体可以参考论坛代码链接

  这个插件可以实现web在线offcie编辑,保存,修订,套红,印章等功能。勉强能用吧。。兼容的插件ffactivex-setup-r39其实是firefox的activex兼容,用在chrome需要在npi上启用,而且兼容效果比在firefox下差。

11月17
前言
最近在项目中,有一个导出pdf功能,需要纯前端来实现,调研了多种pdf导出方式,最终决定使用html2canvas+jsPDF来实现需求。

本文就简单介绍一下html2canvas+jsPDF导出pdf的实现,网上大部分实现导出pdf都是以分页为主的,本文还将附上不分页导出pdf的实现方法。(只附js代码)

html2canvas+jsPDF导出pdf原理:通过html2canvas将遍历页面元素,并渲染生成canvas,然后将canvas图片格式添加到jsPDF实例,生成pdf。



安装:
npm install html2canvas --save

npm install jsPDF --save



配置:
main.js文件里面配置(引入、挂载)

import html2canvas from 'html2canvas'
import jsPDF from 'jsPDF '
Vue.prototype.html2canvas = html2canvas
Vue.prototype.jsPDF = jsPDF
或者--------------------------------------------------------------------------------

index.html页面直接引入js文件:

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
11月1
   需求就是到某一个固定的时间就需要一个按钮不显示了,如果试用new Date() 这个获取的是客户端的时间不是服务器时间,客户如果改了本机的时间那这个按钮就没有控制住。找了很多前辈的代码我自己也总结一下,下次使用的时候也方便我查找,也给不知道的小伙伴分享一下。

1.获取服务器时间:

var now = new Date($.ajax({async: false}).getResponseHeader("Date"));
2.new Date()用法:

获取年:
var currentYear = now.getFullYear();
获取月:
var currentMonth = now.getMonth();
获取日:
var currentDay = now.getDate();
获取小时:
var currentHours = now.getHours();
获取分钟:
var currentMinutes = now.getMinutes();
获取秒:
var currentSeconds = now.getSeconds();
获取毫秒:
var currentMilliseconds = now.getMilliseconds();
获取当前日期:
var currentDate = now.toLocaleDateString();
获取当前时间:
var currentTime = now.toLocaleTimeString();
获取日期和时间:
var dateTime = now.toLocaleString();
获取当前星期几:
var currentWeek = now.getDay();
获取完成年份:
var currentFullYear = now.getFullYear();

5月7
我重启idea不行,rebuild也不行,mvn reimport也不行。
最后我删除了一个文件的import语句,然后IDEA自动编译,就正常了。

ps : 我保证各项配置,jdk , project structure, java compiler等等都是正常的。因为项目之前没有出错。


解决问题:idea缓存,清除一下重启(肯定是目录变动过,我就是为了扩展C盘,就先把目录改过又改回来,虽然最终目录没变 但是中间是有变更的)
点击在新窗口中浏览此图片
4月19
我现在是第一次打开抽屉子组件会发生请求,但是关闭抽屉组件,再一次打开就不请求了,数据没有改变,还是上一次的内容,导致我审批时通过的是另外一条的。
现在想要的效果是我每点击一次图标抽屉组件打开,就发送一次请求,请求最新的数据。
解决方法:

1、visible.sync:双向绑定值。
初始情况下通过该值控制 dialog显示。dialog关闭的时候,element自动设置该值为false。
当子组件执行 close 事件的时候,不仅改变了自己内部的 isShow 的值,而且还将 父组件的 visible的状态发生了改变.

2、在子组件 close 方法中,虽然已经将 isShow 改变为 false,但是并没有通知到 父组件,而在父组件中,控制弹出框的现实和隐藏是通过 show 。点击子组件的关闭按钮时,父组件的 show 没有发生改变,这时候需要用visible.sync。

点击在新窗口中浏览此图片
这样就可以每次打开就重新渲染一次子组件;但有一个不好的就是如果一直重复点击,就会重复渲染,会影响效率。
分页: 1/10 第一页 1 2 3 4 5 6 7 8 9 10 下页 最后页 [ 显示模式: 摘要 | 列表 ]