html怎么把文字分栏-ag凯发k8国际

简介我们可以直接在浏览器端使用html2canvas，对整个或局部页面进行“截图”。但这并不是真的截图，而是通过遍历页面dom结构，收集所有元素信息及相应样式，渲染出canvas image。由于html2canvas只能将它能处理的生成canvas image，因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与，整个图片都由客户端浏览器生成，使用很方便。使用使用的api也很简洁，下面代码可以将某个元素渲染成canvas：html2canvas(element, { onrendered: function(canvas) { // canvas is the final rendered element }});通过onrendered方法，可以将生成的canvas进行回调，比如插入到页面中：html2canvas(element, { onrendered: function(canvas) { document.body.appendchild(canvas); }});做个小例子(demo1)代码如下： html2canvas example one ...

it is a title

stone giant ...

stone giant

coming ...

以一团石头...

write by linwalker @2017 html2canvas(document.body, { onrendered:function(canvas) { document.body.appendchild(canvas) } }) 这个例子将页面body中的元素渲染成canvas，并插入到body中。jspdf库可以用于浏览器端生成pdf。文字生成pdf使用方法如下：// 默认a4大小，竖直方向，mm单位的pdfvar doc = new jspdf();// 添加文本‘download pdf’doc.text('download pdf!', 10, 10);doc.save('a4.pdf');图片生成pdf使用方法如下：// 三个参数，第一个方向，第二个单位，第三个尺寸格式var doc = new jspdf('landscape','pt',[205, 115])// 将图片转化为dataurlvar 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])// 将图片转化为dataurlvar 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。单页将demo1的例子修改下：