html2画布
介绍
您可以直接在浏览器端使用html2canvas 来“截取整个页面或部分页面的屏幕截图”。然而，这并不是真正的屏幕截图；而是通过遍历页面的DOM 结构并收集所有元素信息和相应样式来渲染画布图像。
html2canvas只能生成它可以处理的canvas图像，所以渲染的结果不会100%匹配原始的。不过，它非常方便，因为不需要服务器参与，图像完全由客户端浏览器生成。
使用
使用的API 也非常简单，您可以使用以下代码将元素渲染到画布上。
html2canvas(element, { onrendered: function(canvas) { //Canvas 是最终渲染的Canvas元素}}); 可以通过onrendered方法调用，将生成的canvas插入页面等
html2canvas(element, { onrendered: function(canvas) { document.body.appendChild(canvas); }}); 创建一个小代码示例，如下所示：在线展示链接演示1
html head titlehtml2canvas example/title style type='text/css'./style /head body header nav ul lione/li. /ul /nav /header 除了h3 部分之外，它是title/h3 a href=''石巨人/a . /asidearticle img src='./Stone.png' h2Stone Giant/h2 pComing. /p p随着石球./p /article /section footerwrite by linwalker @2017/页脚脚本类型='text/javascript' src='./html2canvas.js'/脚本脚本类型='text/javascript' html2canvas(document.body, { onrendered:function(canvas) { document.body.appendChild (canvas) } } ) /script /body/html 此示例将页面正文元素渲染到画布并将其插入到正文中。
jsPDF
jsPDF 库允许您在浏览器端生成PDF。
将文本转换为PDF
如何使用它：
//默认A4 尺寸，垂直，单位为毫米PDFvar doc=new jsPDF() //添加文本'下载PDF' doc.text('下载PDF!', 10, 10);doc.save('a4 . pdf ') ;在线演示演示2
图像生成PDF
如何使用它：
//3个参数，第一个方向，第二个单位，第三个尺寸格式var doc=new jsPDF('landscape','pt',[205, 115])//图片数据Urlvar imageData='data:image/转换为png;base64,iVBORw0KGgo .';doc.addImage(imageData, 'PNG', 0, 0, 205, 115);doc.save('a4.pdf');在线演示demo3
从文本和图像生成PDF
//3个参数，第一个方向，第二个尺寸，第三个尺寸格式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 ')在线demodemo4
要生成pdf，您需要将转换后的元素添加到jsPDF 实例中。还有添加html的功能，但是由于pdf中无法生成某些元素，因此可以使用html2canvas + jsPDF将页面转换为pdf。通过html2canvas遍历页面元素并渲染生成canvas，并将canvas图像格式添加到jsPDF实例中生成PDF。
html2canvas + jsPDF
单页
修改demo1示例。
脚本类型='text/javascript' src='./js/jsPdf.debug.js'/scriptscript type='text/javascript' var downPdf=document.getElementById('renderPdf'); downPdf.onclick=function() { html2canvas(document.body, { onrendered:function(canvas) { //返回图像数据URL。参数：图像格式和分辨率（0到1） var pageData=Canvas.toDataURL('image/jpeg', 1.0); //orientation默认为vertical，size ponits，format a4[595.28,841.89] var pdf=new jsPDF('', 'pt', 'a4'); //addImage最后两个参数是要添加的图片控制大小of pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * Canvas.height ); } }) } /script 在线演示demo 5
如果转换为A4比例后页面内容的高度超过A4纸的高度，生成的PDF会发生什么情况？ 会被分页吗？
您可以尝试使用： 演示6 验证您的想法
jsPDF 提供了一个非常有用的API，称为addPage()。您可以通过pdf.addPage() 将页面添加到PDF，并通过pdf.addImage(.) 将图像分配给该PDF 以供显示。
那么如何决定在哪里分页呢？
这个问题很容易回答。设置pageHeight 会导致超过此高度的内容被放置在PDF 的下一页上。
从HTML 页面的内容生成画布图像。如果您的内容有多个页面，请使用addPage() 将第一页的图像添加到PDF。通过pdf的addImage将下一页的图片添加到pdf中。
嗯，很好！巴特，你没看到问题所在吗？
实现该方法的前提是，首先可以将整个页面内容生成的canvas图片根据pageHeight分割成相应的较小图片，然后通过addImage一张一张的添加上去。
想想你的画布来自哪里。见下文。
html2canvas(document.body, { onrendered:function(canvas) { //这里处理画布}}) 这里的body就是生成画布的元素对象，一个元素生成画布。页面画布，就是这样。
您认为可能吗？ 按照这个思路，你应该获取页面各个位置的DOM 元素，并使用htnl2canvas(element, option) 对其进行处理。不要谈论是否只找到一个DOM元素。即使找到了，在每页的高度位置
如果你累了
:) 请参阅下一个方法。
多页
我给出的想法是只生成一张画布。在这个演示中，转换元素是一个主体，如果内容超过一页，它不会改变。addPage 和addImage，但这次添加了相同的画布。
当然，这只是复制多页PDF，那么如何实现正确的分页显示呢。其实我们主要用到jsPDF的两点。
- 超出jsPDF实例格式大小的内容将不会显示（var pdf=new jsPDF('', 'pt', 'a4'); 在demo中是A4纸的大小） - addImage有两个控件的参数是PDF 内图像的大小Position 每个PDF 页面上显示的图像是相同的，但是调整图像的位置会产生分页的错觉。例如，对于第二页，将垂直偏移设置为-841.89，即A4纸的高度。超过A4纸高度的图像将不会显示，因此图像将垂直显示在第二页上。含量范围[841.89,1682.78]。这会导致诸如分页效应之类的事情。
我们看一下代码：
html2canvas(document.body, { onrendered:function(canvas) { var contentWidth=Canvas.width; var contentHeight=Canvas.height; //PDF的一页显示HTML页面生成的canvas的高度； var pageHeight=contentWidth/592.28 * 841.89; //未生成PDF 时HTML 页面的高度var leftHeight=contentHeight //页面偏移var Position=0 //PDF 图像HTML 页面生成时的A4 纸张大小var imgWidth=595.28/contentWidth * var pageData=Canvas.toDataURL('image/jpeg', 1.0); ', 'a4'); //有两个高度，需要区分。一是HTML页面的实际高度和生成的PDF的页面高度(841.89) //如果内容不超出可见范围则PDF的一页。无需寻呼。 if (leftHeight pageHeight) { pdf.addImage(pageData, 'JPEG' , 0, 0, imgWidth, imgHeight ) } else { while(leftHeight 0) { pdf.addImage(pageData, 'JPEG', 0, 位置， imgWidth, imgHeight ) leftHeight -=pageHeight -=841.89; //避免添加空白页if(leftHeight 0) { pdf.addPage() } } pdf.save('content) .pdf'); 在线演示演示7
两边留边距
添加Image时更改imgWidth并在x方向参数中设置所需的边距。具体代码如下。
var imgWidth=555.28;var imgHeight=555.28/contentWidth * contentHeight;pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight );pdf.addImage(pageData, 'JPEG', 20 , 位置， imgWidth, imgHeight); 在线演示8
版权声明：本文由今日头条转载，如有侵犯您的版权，请联系本站编辑删除。