[成都|荣耀师兄]JS-郑明月|2017年03月03日的日报-技能树.IT修真院

发表于： 2017-03-03 20:57:22

2 1425

一、今天完成的事情：

1.挑选出了项目中要用到的时间插件，在试插件的时候，卡在了很奇怪的位置，后面自己想明白之后觉得很傻逼；

2.人才报告查看页面中一直没有想到好的方法，现在差不多想出了比较好的解决方法了；

3.解决了2说的问题，3就没有问题了

二。明天要做的事情

1.完成方案评审

2.ui没有出图的话，就自己改一下代码，搭一下框架咯；

三、遇到的问题：

1.在选择时间插件的时候，一直报错，找不到问题，我就一直以为是插件本身的问题，百度无果，谷歌了一下，发现。。。我引用js文件的顺序错了。。。很尴尬，这也给我提了醒，时刻注意他们的关系，不然这种错误出了，代码没有问题，给自己坑几个小时进去就不划算了；

2.找到了人才查看页面如何做的方法；

首先我们的需求是这个页面展示人才的各种信息，包括基本信息和三张雷达图、一张百度脑图，我们一开始的想法是我这边将base64位的图填入相应字段，传给后端，让后端将图片上传至金山云，然后将获取的url填入相应字段，返回给我，我来进行页面的渲染操作。然后下载人才报告的时候，又需要后端将数据填入表格中，然后将地址返回给我，我填入下载的download链接中。这样做存在两个问题：第一个问题是将这么长一串base64编码传给后端响应时间是不是会太久，后端是否能正确保存？第二个问题是：模板我提供给后端，他如何填入数据，而且后端也说数据的渲染操作应该交给前端来做。后面我们提出了解决方案：

我用拼字符串的形式，将代码上传至后端，后端通过读取我的html代码，生成模板，返回给我链接，我将链接添加进download标签中供用户下载，但是这样做，问题太多了，首先我这边图片的问题还是没有解决，依然需要上传一串base64的图片给后端，而且拼字符串真的太太太烦了！！

经过一番查找，首先找到了html转换为canvas打印到页面中的方法，然后又找到了将img转换为png格式的方法，html转换为png我们使用到html2canvas插件，将转换成的canvas存为pdf并提供给用户下载使用到的是jspdf插件，这两个插件完美解决了我们的问题（虽然现在人才列表中的所有内容都需要把css写在标签的style属性中）现在该页面的逻辑是这样子：当用户进入页面的时候，我实例化三个雷达图和一个百度脑图，并分别给他们生成base64为的图，然后通过jq，获取到我需要显示这几张图的节点id，将这几张图加入img的src标签中，这样用户就能正常看到以图片显示的雷达图和脑图了。然后当用户点击下载的时候，会通过html2canvas截取出人才列表中的报告部分，转换为pdf格式，用户就会弹出下载pdf的下载框了；

代码：

$('#testid').attr('src',data);//data是base64图片，过长没截
$scope.test1= '郑明月'
$scope.click = function () {
    html2canvas(document.getElementById('test1')).then(function(canvas) {
        var image = new Image();
        image.src  = canvas.toDataURL('image/jpeg',1.0);
        var pdf = new jsPDF();
        pdf.addImage(image.src, 'JPEG',0,0);
        var down = document.getElementById('down')
        pdf.save('人才档案.pdf')
    });
}