基于Vue.js的大型报告页项目实现过程及问题总结（二）

距离上一篇文章过去了二十多天了,期间一直想把第二部分写完,结果在测试过程中遇到了各种坑爹的问题,到今天才算基本完成,也许还有后续,但趁着今天有时间就写出来吧,也算对这个项目的一个总结了

遇到最大问题:

项目的需求是在一个窗口里生成所有图表,还要考虑到整套打印,所以滚动加载和分页浏览不是最好的方案,这导致数据超级多的时候(大概会生成2000多页的报告且上不封顶),会造成页面假死,疯狂占用电脑内存,低配置的电脑根本无法加载,甚至造成死机

在项目结构上我们采用数据分发的方式控制组件的渲染,由大致小每层组件都对数据进行过滤,重新组成新的数据传递给下一级,根据数据去判断显示与否,由于vue里v-if的机制如果该模块数据不存在,那么组件将不被渲染

Stone Giant

Coming ...

以一团石头...

这个例子将页面body中的元素渲染成canvas，并插入到body中

jsPDF

jsPDF库可以用于浏览器端生成PDF。

文字生成PDF

使用方法如下：

// 默认a4大小，竖直方向，mm单位的PDF
var doc = new jsPDF();

// 添加文本‘Download PDF’
doc.text('Download PDF!', 10, 10);
doc.save('a4.pdf');

图片生成PDF

使用方法如下：

// 三个参数，第一个方向，第二个单位，第三个尺寸格式
var doc = new jsPDF('landscape','pt',[205, 115])

// 将图片转化为dataUrl
var imageData = ‘data:image/png;base64,iVBORw0KGgo...’;

doc.addImage(imageData, 'PNG', 0, 0, 205, 115);
doc.save('a4.pdf');

文字与图片生成PDF

// 三个参数，第一个方向，第二个尺寸，第三个尺寸格式
var doc = new jsPDF('landscape','pt',[205, 155])

// 将图片转化为dataUrl
var imageData = ‘data:image/png;base64,iVBORw0KGgo...’;

//设置字体大小
doc.setFontSize(20);

//10,20这两参数控制文字距离左边，与上边的距离
doc.text('Stone', 10, 20);

// 0, 40, 控制文字距离左边，与上边的距离
doc.addImage(imageData, 'PNG', 0, 40, 205, 115);
doc.save('a4.pdf')

生成pdf需要把转化的元素添加到jsPDF实例中，也有添加html的功能，但某些元素无法生成在pdf中，因此可以使用html2canvas + jsPDF的方式将页面转成pdf。通过html2canvas将遍历页面元素，并渲染生成canvas，然后将canvas图片格式添加到jsPDF实例，生成pdf。

html2canvas + jsPDF

单页

将demo1的例子修改下：

关于打印大概就写这些吧,详细的教程大家可以去自行百度超多的;