jspdf的简单使用

jspdf 简单使用

jspdf 是一款功能强大插件,作用是利用javascript来生成pdf文档,目前遗憾的是不支持utf-8编码导致中文会乱码。

使用addHTML()方法可以解决这一问题,不过官方马上将弃用次方法 代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>HTML Test File</title>
</head>
<body>
<div style='position: absolute; left: 0; top: 0; bottom: 0; overflow: auto; width: 400px; background: #fff'>
<h1>Tdlkjg拉克丝的结果分厘卡撒酒疯了</h1>
<h1>Headings</h1>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<hr>
</div>
<script src='../js/jquery-2.1.4.min.js'></script>
<script src='../js/html2canvas.js'></script>
<script src='../js/jspdf.debug.js'></script>
<script>
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.canvas.height = 72 * 11;
pdf.canvas.width = 72 * 8.5;
pdf.addHTML($('body'), function () {
var iframe = document.createElement('iframe');
iframe.setAttribute('style', 'position:absolute;right:0; top:0; bottom:0; height:100%; width:500px');
document.body.appendChild(iframe);
iframe.src = pdf.output('datauristring');
// // pdf.output('save','test.pdf');
// pdf.save();
});
</script>
</body>
</html>

doc文档截图
新方法 不过要加载==html2pdf.js==,而且并不支持中文。

http-server 的简单使用

http-server 简单使用

  1. 第一步安装node
  2. 第二步全局安装http-server

    1
    npm install http-server -g
  3. 在你要项目的目录下打开命令行

image

  1. 运行指令
1
http-server web

这里的web是项目文件的根目录, 确保该文件下有index.html

  1. 然后会生成访问地址,访问就有结果了
1
2
3
4
5
Starting up http-server, serving web
Available on:
http://100.64.196.188:8080
http://127.0.0.1:8080
Hit CTRL-C to stop the server

插件地址:http-server 其中有详细使用方式。

leetcode 第一题 Two Sum

这是 leetcode 上算法的第一题,官方定位为简单题目,事实也是如此。题目地址

题目:给定一个整数数组,返回两个数字的返回索引,这样它们就可以添加到特定的目标。假设每个输入都只有一个结果,不会两次使用相同的元素。例如:

1
2
3
4
Given nums = [2, 7, 11, 15], target = 9,
Because nums[0] + nums[1] = 2 + 7 = 9,
return [0, 1].

解法一


1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 最简单的双重循环
var twoSum = function(nums, target) {
var d ={};
var result = [];
for (var i = 0; i < nums.length; i++) {
for (var j = 0; j < nums.length; j++) {
if (nums[i] + nums[j] === target && i !== j) {
(i < j) ? result.push(i, j) : result.push(j, i);
return result;
}
}
}
return result;
};

基本所有人都会,但是该方法算法复杂度为O(n2),运行时间过长(246ms)

解法二


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var twoSum = function(nums, target) {
var d ={};
var result = [];
for (var i = 0; i < nums.length; i++) {
var a = target - nums[i] +'';
var t = {};
d[a] = i;
}
for (var b = 0; b < nums.length; b++) {
var c = nums[b]+'';
if(d[c] !== undefined){
var x = d[c], y = nums.indexOf(nums[b]);
if (x !== y){
(y < x) ? result.push(y, x) : result.push(x, y);
return result;
}
}
}
return result;
};

这种解法是用两个单独的循环,所以运行时间大大减少(116ms)。

大概思路是先做一遍遍历,将数据以’目标值减去数组中的某个值 : 该值的索引’这样类似map的方式存储在对象d中,然后再做一次遍历根据是否是新对象的属性来判断有没有解。 这个解法是我对这道题目的思考过程,中间有很多多余的操作。

解法三


1
2
3
4
5
6
7
8
9
10
11
12
13
var twoSum = function(nums, target) {
var ans = [];
var exist = {};
for (var i = 0; i < nums.length; i++){
if (typeof(exist[target-nums[i]]) !== 'undefined'){
ans.push(exist[target-nums[i]]);
ans.push(i);
}
exist[nums[i]] = i;
}
return ans;
};

leetcode 上大佬的解法,运行时间(92ms),直接在一个循环中解决问题。

大致思路,就是遍历数组,在exis对象中存入’值’:’索引’的属性,使用typeof 判断是否有符合条件的属性,有的话存入ans,最后返回ans。

对于这个算法我本来想在ans.push(i)后加个 return ans,想这样不用把算法走完或许会再少点时间,但是时间反而多了一点。然后我又尝试用break,好像是减少了几ms,但是leetcode运行同样的算法时间都有变化,这个就算在误差内了。

这道题目虽然不是很难,但是加深了我对javascript基础的认知,也感受到了用javascript写算法与java这种面向对象语言的区别。

CSS Sticky footers 布局

部分代码

1
2
3
4
5
6
7
8
<div>
<div class="detail-wrapper clearfix">
<div class="detail-main"></div>
</div>
<div class="detail-close">
<i class="icon-close"></i>
</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
/* stylus 代码 */
.detail-wrapper
min-height: 100%
.detail-main
margin-top: 64px
padding-bottom: 64px
.detail-close
position: relative
width: 32px
height: 32px
margin: -64px auto 0 auto
clear: both
font-size: 32px

效果:

  1. 在页面主体内容不够多时 将页脚放在底部

    图一

  2. 在页面主体内容够多时 将页脚放在主体内容后面

    图二

原理简析:主体内容设置paddin-bottom 值为x,页脚将margin-top 的值设置成-x,使页脚沉入页面主体内容的padding-bottom中。因为主体内容 设置了最小高度,所以当其中内容不够多时它的高度和视口高度一样,所以页脚会和padding-bottom一样固定在下方。内容超过视口高度时,页脚就会被挤下去。

参考:CSS秘密花园: Sticky footers

css 实现手机自适应高度

本问主要参考 【CSS黑科技2】CSS百分比实现高度占位自适应(margin/padding)

基本知识点

本文依赖于一个基础却又容易混淆的css知识点:当padding/margin取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!

图一

图二

当给padding设置百分比数值的时候,其值是根据width计算的

例如:

结果图

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div.father{
width: 100px;
height: 200px;
background: red;
}
div.son{
width: 100%;
height: 0;
padding-top:100%;
background: yellow;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>