码农苏

码农苏 查看完整档案

上海编辑山西大同大学  |  数字媒体技术 编辑北京微智信业  |  前端开发 编辑填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

码农苏 赞了回答 · 2018-02-28

解决html 自动调整文字间距

你想要的是文字两端对齐.

.test1 {
    text-align:justify;
    text-justify:distribute-all-lines;/*ie6-8*/
    text-align-last:justify;/* ie9*/
    -moz-text-align-last:justify;/*ff*/
    -webkit-text-align-last:justify;/*chrome 20+*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
    .test1:after{
        content:".";
        display: inline-block;
        width:100%;
        overflow:hidden;
        height:0;
    }
}

来源: http://www.cnblogs.com/rubylo...

关注 3 回答 2

码农苏 回答了问题 · 2018-02-28

行内元素不是没有margin属性吗?为什么img起作用?

Html元素一共分为3中,行内元素,块级元素,行内块级元素;分别对应display的inline,block,inline-block.

关注 9 回答 8

码农苏 发布了文章 · 2018-02-28

将HTML页面转换为PDF文件并导出

目前,在大多数的管理系统中,都会有这样一个功能:根据相关的条件查询相应的数据,并生成可视化报表,然后可导出为PDF文件。本文只展现生成可视化报表之后导出PDF文件的过程,生成可视化的报表可使用Echarts,D3js等框架。

1.需要引入的文件

html2canvas.js(根据实际情况选择相应的版本)
jspdf.min.js(根据实际情况选择相应的版本)

2.实现思路

(1)在body中将需要生成PDF的HTML复制一份,切记:如果元素中含有ID,则必须重新给定
(2)将新的元素设置为position:absolute; 脱离文档流,因为处于文档流中被浏览器遮挡的部分不会生成PDF。
(3)利用html2canvas.js将新的元素生成图片
(4)利用jspdf.min.js将图片生成PDF文件并保存到本地。

3.实现代码

(1)HTML代码
 
/*将要生成PDF的HTML代码*/
<div id="pdf">
………………………………
</div> 

(2)JS代码

/*复制元素,注意ID*/
$("body").append('<div id="pdf1">…………………………………………………………</div>');
/*设置新元素样式*/
 $("#pdf1").css({
    "background-color": "#fff",
    "position": "absolute",
    "top": "0px",
    "z-index": "-1",
    "height": $("#pdf").height()
});
/*html2canvas生成图片,jspdf生成PDF文件*/
html2canvas($("#pdf1"), {
    background: "#fff",
    allowTaint: true,
    taintTest: false,
    onrendered:function(canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        var pageHeight = contentWidth / 592.28 * 841.89;
        var leftHeight = contentHeight;
        var position = 0;
        var imgWidth = 595.28;
        var imgHeight = 592.28/contentWidth * contentHeight;
        var pageData = canvas.toDataURL('image/jpeg', 1.0);
        var img = new Image();
        img.src = pageData;
        var pdf = new jsPDF('p', 'pt', 'a4');
        img.onload = function() {
            if (leftHeight < pageHeight) {
                pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
            } else {
                while(leftHeight > 0) {
                    pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                    leftHeight -= pageHeight;
                    position -= 841.89;
                    if(leftHeight > 0) {
                        pdf.addPage();
                    }
                }
            }
            pdf.save('report_pdf_' + new Date().getTime() + '.pdf');
            $("#pdf1").remove();
        }
    },
})

以上为笔者在项目中的部分核心代码,如有问题,欢迎指正。

查看原文

赞 11 收藏 16 评论 3

码农苏 发布了文章 · 2018-02-22

angularjs利用$http异步上传Excel文件

1.文件上传框html代码如下

<form id="fileForm" enctype="multipart/form-data">
    <button id="import_asset" type="button" ng-click="import_asset()">上传文件</button>
    <input id="file_asset" type="file" style="display: none;"/>
</form>
*注意: 设置form的enctype属性值为:multipart/form-data

2:js代码如下:

$scope.import_asset = function () {
    $("#file_asset").click();
};
$("#file_asset").on("change", function(){
    var formData = new FormData();
    var file = document.getElementById("file_asset").files[0];
    if(file.name){
        var fileName = file.name.substring(file.name.lastIndexOf(".") + 1);
        if(fileName =="xlsx" || fileName =="xls"){
            formData.append('file', file);
            $http({
                method:"post",
                url:commonService.projectName + "/so/assetmanage/upload",
                data:formData,
                headers : {
                    'Content-Type' : undefined
                },
                transformRequest : angular.identity
            }).then(function (response) {
                if(response.status == 200){
                    alert("文件上传成功!!!");
                }else{
                    alert("文件上传失败!!!");
                }
            });
        }else{
            alert("文件格式不正确,请上传以.xlsx,.xls 为后缀名的文件。");
            $("#file_asset").val("");
        }
    }
});
查看原文

赞 1 收藏 1 评论 0

码农苏 发布了文章 · 2018-02-06

Express下采用bcryptjs进行密码加密

前几天利用Express开发了个小项目,开发登录注册模块时,采用bcryptjs进行密码加密,总结了一下内容:
Express下bcryptjs的使用步骤:
1.安装bcryptjs模块

npm install bcryptjs --save

2.在需要加密的模块中引入bcryptjs库

var bcrypt = require('bcryptjs');

3.设置加密强度

var salt = bcrypt.genSaltSync(10);

4.注册时生成HASH值,并插入数据库

router.post('/register', function(req, res, next){
    // 从连接池获取连接
    pool.getConnection(function(err, connection) {
        // 获取前台页面传过来的参数
        var param = req.query || req.params;
        /*生成HASH值*/
        var hash = bcrypt.hashSync(param.pwd,salt);
        // 建立连接 新增用户
        connection.query(userSQL.insert, ["",hash,param.phone,"","","",0], function(err, result) {
            res.send(result);
            // 释放连接
            connection.release();
        });
    });
});

5.登录时验证HASH值,并插入数据库

router.post('/login', function(req, res, next){
    // 从连接池获取连接
    pool.getConnection(function(err, connection) {
        // 获取前台页面传过来的参数
        var param = req.query || req.params;
        // 建立连接 根据手机号查找密码
        connection.query(userSQL.getPwdByPhoneNumber, [param.phone], function(err, result) {
            if(bcrypt.compareSync(param.pwd,result[0].password)){
                res.send("1");
                connection.query(userSQL.updateLoginStatusById, [1,result[0].id], function(err, result) {
                });
            }else{
                res.send("0");
            }
            // 释放连接
            connection.release();
        });
    });
});

以上采用的是bcryptjs的同步用法,下面介绍异步用法:
生成hash密码:

bcrypt.genSalt(10, function(err, salt) {
    bcrypt.hash("B4c0/\/", salt, function(err, hash) {
        // Store hash in your password DB.
    });
});

密码验证:

bcrypt.compare("B4c0/\/", hash).then((res) => {
    // res === true
});
查看原文

赞 0 收藏 0 评论 0

码农苏 发布了文章 · 2018-02-06

让所有浏览器支持HTML5 video视频标签

1.兼容video标签的必要性

随着HTML5的定稿,在HTML5的时代里,基本上只要一个 video 标签加一个视频的src链接地址就可以播放视频了,对于开发人员来讲真是“酷毕了”。但是,纵观国内市场低版本浏览器的占有率,还没有到可以放弃兼容的那个时候,这样对于前端开发人员来说,就务必要把低版本兼容性问题这个大大的坑填平。

2.低版本浏览器都支持video标签解决方案

只要您的页面中引用html5media.min.js即可!
html5media.min.js工作原理:
通过js将src链接地址中的视频文件转化为flash,进行播放。

3.所需干货:

html5media.min.js下载地址:html5media.min.js
在页面上(头部或底部)这样引用html5media.min.js:

<!--[if lt IE 9]>
     <script data-original="js/html5media.min.js"></script>
<![endif]-->

注意
在html5media.min.js的同级目录下需要有以下两个文件:
flowplayer.controls.swf
lowplayer.swf

查看原文

赞 5 收藏 4 评论 0

码农苏 关注了用户 · 2018-02-06

李十三 @lishisan

知道的越多,不知道的越多。

青团社招聘:前端技术专家

简历发至邮箱:lishixuan@qtshe.com

关注 16688

码农苏 关注了用户 · 2018-02-06

keke @keke233

好好学习,天天向上~

关注 8403

码农苏 关注了用户 · 2018-02-06

边城 @jamesfancy

从事软件开发 20 年,在软件分析、设计、架构、开发及软件开发技术研究和培训等方面有着非常丰富的经验,近年主要在研究 Web 前端技术、基于 .NET 的后端开发技术和相关软件架构。

关注 11119

码农苏 关注了用户 · 2018-02-06

Aaaaaaaty @aaaaaaaty

天猫营销平台持续招人中,服务端、客户端、前端、算法;base 杭州;有需要请发送简历到tianyu.aty@alibaba-inc.com;注明来自[sf]

关注 2008

认证与成就

  • 获得 17 次点赞
  • 获得 3 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 3 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-02-06
个人主页被 456 人浏览