近碰到个需求，需要把当前页面生成 pdf，并下载。弄了几天，自己整理整理，记录下来，我觉得应该会有人需要 ：）

项目源码地址：https://github.com/linwalker/render-html-to-pdf

简介

我们可以直接在浏览器端使用html2canvas，对整个或局部页面进行“截图”。但这并不是真的截图，而是通过遍历页面DOM结构，收集所有元素信息及相应样式，渲染出canvas image。

由于html2canvas只能将它能处理的生成canvas image，因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与，整个图片都由客户端浏览器生成，使用很方便。

使用

使用的API也很简洁，下面代码可以将某个元素渲染成canvas：

html2canvas(element, {
 onrendered: function(canvas) {
 // canvas is the final rendered <canvas> element
 }
});

通过onrendered方法，可以将生成的canvas进行回调，比如插入到页面中：

html2canvas(element, {
 onrendered: function(canvas) {
 document.body.appendChild(canvas);
 }
});

做个小例子（demo1）代码如下：

这个例子将页面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, 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的例子修改下：

如果页面内容根据a4比例转化后高度超过a4纸高度呢，生成的pdf会怎么样？会分页吗？

你可以试试，验证一下自己的想法。

jsPDF提供了一个很有用的API， addPage()，我们可以通过 pdf.addPage()，来添加一页pdf，然后通过 pdf.addImage(...)，将图片赋予这页pdf来显示。

那么我们如何确定哪里分页？

这个问题好回答，我们可以设置一个 pageHeight，超过这个高度的内容放入下一页pdf。

来捋一下思路，将html页面内容生成canvas图片，通过 addImage将第一页图片添加到pdf中，超过一页内容，通过 addPage()添加pdf页数,然后再通过 addImage将下一页图片添加到pdf中。

嗯～，很好！巴特，难道没有发现问题吗？

这个方法实现的前提是 — — 我们能根据 pageHeight先将整页内容生成的canvas图片分割成对应的小图片，然后一个萝卜一个坑，一页一页 addImage进去。

What? 想一想我们的canvas是肿么来的，不用拉上去，直接看下面：

html2canvas(document.body, {
 onrendered:function(canvas) {
 //it is here we handle the canvas
 }
})

这里的 body就是要生成canvas的元素对象，一个元素生成一个canvas；那么我们需要一页一页的canvas，也就是说。。。

你觉得可能吗？ 我觉得不太现实，按这思路要获取页面上不同位置的DOM元素，然后通过 htnl2canvas(element,option)来处理，先不说能不能刚好在每个 pageHeight的位置刚好找到一个DOM元素，就算找到了，这样做累不累。

累的话 ：）可以看看下面这种方法。

多页

我提供的思路是我们只生成一个canvas，对就一个，转化元素就是你要转成pdf内容的母元素，在这篇demo里就是 body了；其他不变，也是超过一页内容就 addPage，然后 addImage,只不过这里添加的是同一个canvas。

当然这样做只会出现多页重复的pdf，那到底怎么实现正确分页显示。其实主要利用了jsPDF的两点：

• 超过jsPDF实例格式尺寸的内容不显示（ varpdf=newjsPDF('','pt','a4');demo中就是a4纸的尺寸）
• addImage有两个参数可以控制图片在pdf中的位置

虽然每一页pdf上显示的图片是相同的，但我们通过调整图片的位置，产生了分页的错觉。以第二页为例，将竖直方向上的偏移设置为 -841.89即一张a4纸的高度，又因为超过a4纸高度范围的图片不显示，所以第二页显示了图片竖直方向上[841.89,1682.78]范围内的内容，这就得到了分页的效果，以此类推。

还是看代码吧：

两边留边距

修改imgWidth，并且在addImage时x方向参数设置你要的边距，具体代码如下：

作者：linwalkerhttps://segmentfault.com/a/1190000009211079

信息加速发展的互联网时代，越来越多的科技公司为了专注核心竞争力业务以及降低软件项目成本，开始将项目中的部分业务模块分发给第三方外包公司来完成。而这样是否就意味着大幅度地降低成本了？

事实告诉我们，并没有。

本文作者作为一名外包商，以自身的经历告诉我们本可以在3天之内完成了的一个报价仅为 1500 美元的静态 HTML 页面，是如何被大型企业硬是拖成了一个为期 7 周且需要耗费 18000 美元（约为人民币12万）项目的。

不久前，我作为承包商工作，经常从一个项目跳到另一个项目。有些是短期的，工作一周左右，可很快提交我的工作成果。也有的项目会持续几个月，这期间我会攒一些钱用以休息一段时间。

我更喜欢短期工作，因为这样的工作使我可以在单位时间内收取更高的费用。这样不仅我感觉是在为自己打工，而且我觉得我不需要太努力工作就能过上还算体面的生活了。我的最高费率仍然在合理的范围之内，而且我总是提供高质量的服务。这就是我和一家大公司定下这个项目之前我的工作状态。

这家公司联系我的时候显得很着急，经理告诉我他们现在就需要一个人来搞定这件事。需要一个不怎么需要公司培训就能马上上手，而且能交付最大性能的人。不管怎么说，这刚好是我的座右铭。这个项目正是我喜欢的工作类型。它内容简短，很快就能做好，而且报酬很高。

在谈判确定好合适的费率后，我收到了一封包含说明的电子邮件。他们给了我更多关于这个项目的背景。他们的开发人员在没有事先告知的情况下就离开了，并且从未跟任何其他人汇报过项目的进展。

我们需要您毫不分心地完成此项目。在合同期限内，您将只与我们合作，并及时交付成果。我们会对给您造成的麻烦进行补偿。

任务说明很简单：阅读这些需求然后估计完成这个项目需要多长时间。这是我职业生涯中遇到的一个那类比较容易的项目之一。这是一个HTML页面，包含一些简单的动画和几个嵌入的视频。我花了一个晚上研究需求并在脑中模拟实施。这些年来，我已经学会了在能确定收到报酬之前不为客户写任何代码。

我确定了这个项目充其量也就是一天的活儿。但为了保持谨慎，我上报了20个小时，总计1500美元。毕竟这只是一个HTML页面而已，我也只能收取这么多费用。他们让我到25英里外的卫星办公室去。在为他们工作的那三天里我必须天天开车去那儿。

第二天，我到了卫星办公室。在一个购物中心，然后通过一扇秘密的门进入了一个秘密的世界，一些工作人员在他们的小隔间里安静地工作着。接待员给我看了一个我将用它来工作的全新MacBook Pro，我必须从零开始设置环境。我的确更偏向于使用公司的笔记本电脑，因为他们经常要求承包商安装一些可疑的软件。（我可不想装到自己电脑上。）

我花了一天时间下载我的工具包，设置电子邮件、SSH密钥和请求服务的授权。换句话说，我什么都没做。这就是为什么我上报了20个小时，还没开始写代码呢，光前期设置就耗费了8个小时。

第二天，我准备开始真正地干活了。有了MacBook Pro，我用它发了一封电子邮件给经理。我告诉他我已经准备好工作了，正在等待上述的资源。那天，我在我柔和灯光下的工位上待着，玩着手指，直到太阳落山。

我再次计算了一下。根据我的估计，我还只剩4个小时的时间来完成这项工作，这对单个HTML页面来说也不是不可能。但不用说，第二天，我把这剩下的4个小时花在了吃公司赞助的午餐上，伙食很不错，而且我与其他员工玩得很开心。

当预计的20小时到期时，我确保向经理发送了另一封电子邮件，让他知道我确实人一直在公司，但我没有收到我需要的资源。当然，那封电子邮件被无视了。

接下来的星期一，我犹豫地开过了这25英里。令我惊讶的是，经理已经来到卫星办公室，并热情地问候了我。他是个三十来岁，很随和很不错的人。我很不解，他并不像当初要雇我的那时候那么着急了。我们进行了友好的交谈，没有提到任何工作。后来，我们去吃午餐，他付了钱。这是美好的一天。完全没工作。

好吧你可以说我很容易形成习惯，但如果你供我吃喝并每天呵护我，我会习惯这一切。这变成了一个例程。

我来上班，花一些时间在网上阅读以及看视频。我每天发一封电子邮件，所以他们知道我确实去了公司。

然后，我会去吃午饭并和碰见的有趣的人一起玩耍。在一天结束时，我站起来，伸个懒腰，打一个当之无愧的哈欠，然后开车回家。

我习惯了。事实上，我在期待这些。当我终于收到一封带有指向我需要的资源的链接的电子邮件时，我反而有点失望。我重新开始脚踏实地，变回自己工作时的严肃脸。但是，在花了几分钟查看Zip文件后，我才注意到它缺少了我需要的大部分内容。设计师给我发了一些Adobe Illustrator文件，我无法在MacBook上打开它。

我回复了电子邮件来解释我的疑虑，而且一并问了一些其他问题以节省时间。那时，我当初上报的20个小时时间早都已经过了。我现在真的想要完成这项工作了。

点击发送后不久，我收到了一封电子邮件。只有一句：“转发给Alex”，然后Alex得到了这封电子邮件的抄送。

Alex回答说他转发给了Steve。Steve回答说Michelle是设计师，她会了解得更多一些。

Michelle的自动回复称她正在度假，所有询问都应该直接告诉她的经理。

她的经理回复说“谁是Ibrahim？(我的名字)”我的经理回复说他很抱歉还没有向大家介绍我。

作为承包商，在人们注意到我在那里工作之前，我通常就已经完成我的工作并离开那家公司了。但这次，我收到了大量欢迎的电子邮件。这样的邮件持续了一段时间，而我被迫回复那些友好地过了头的邮件。有些人很想跟我本人见面。当我说我在加利福尼亚州，离得远着呢，他们有点失望。以及羡慕，他们说他们羡慕加州美好的天气。

他们很有礼貌地无视我的电子邮件，用抄送来转移我的问题，把我问过的任何事情归为垃圾邮件。我花了很多时间，像一位考古学家在深深的电子邮件之沟内挖掘，希望找到我问题的答案。

你可以想象每当我想起我唯一的任务是构建一个静态HTML页面时，我感觉到的冒名顶替综合症（心虚，怀疑自己的回报不是理所应得的）的程度之深。原本虚报了的20个小时的项目变成了为期7周的冒险，期间我享受免费午餐，每天开车50英里，并翻看电子邮件。

当我最终完成项目时，我在GitHub上将它发送给了团队。

在不久之后，我收到了邀请，整个团队会用Google Hangout开视频会议对我的代码进行Code Review。

我花了一个多月的时间来写一个静态HTML页面，而现在整个团队都要评价我的工作？

那个什么，我要为自己说句话，这个页面也包含一些JavaScript交互，是响应式的，还包括CSS动画......好吧我真的觉得自己像个来冒名顶替的。

当然，视频会议的时间又重新安排了几次。当它终于发生时，我和我的工作已经不是会议的主题了。他们都坐在纽约某个地方的同一个房间里，像一个紧密团结的团体一样聊了一会儿。事实上，他们所说的关于我做的项目的所有内容只有：

• 人1：嘿，有人在做这个赞助页面吗？
• 人2：是的，我认为已经完成了。
• 人1：太好了，我今晚合并吧。

那天晚上回家的时候，我意识到自己正面临另一个挑战。我在这家公司工作了7个星期，而我的原始报价为1,500美元。这相当于每年11,100美元或每周214美元。或者直接说，每小时5.35美元。

这几乎还不够我付油钱的。所以，我给他们发了一张发票，我按照原来的每小时费率给他们报了7个星期，总额达18,000美元。我当然感到羞耻，但我还能怎么办呢？

就像我预期的那样，我没有收到回复。如果所有大公司都有什么相同之处，那就是他们并不急于按时支付账单。这么简单的工作要价这么多，我觉得自己像一个骗子，但话又说回来了，我又不是来做慈善的。我每天开车50英里来做这项工作，如果工作没有完成，那不是因为我不想。这是因为他们回复太缓慢了。

接下来的一周我得到了回复。这是一封来自经理的冷邮件，他把我每天的工作日分成不同的时间段。然后他把我工作的那部分时间高亮了，每天标记一个小时的午休时间。最后他用我们商定的小时费率做了一些计算。

显然，我算错了。我错误估算了总数。调整后，他们欠我的总金额是21,000美元。

请确认重新调整后的小时数，以便财务可以给您写个支票。

我很快回复了确认。

原文：https://idiallo.com/blog/18000-dollars-static-web-page

作者简介：Ibrahim Diallo，具有多年开发经验的软件工程师。

本文为 CSDN 翻译