在纯JaveScript中实现报表导出：从“PDF”到“JPG”

我们在前端报表中完成了各种工作数据的输入或内容处理之后，需要做什么？

数据的导出！

这些数据的常用导出格式有：PDF、Excel、HTML和图片几大类型。

但总有一些实际应用场景，需要的不仅仅是将现有内容导出，还需要我们对一些内容的格式进行转化。

就在前几天，葡萄刚上班，就看到客户发来下图，发生了以下对话

-葡萄，这一页可以导出吗？

-当然可以，PDF、Excel、HTML都可以。

-可是我想把这一页导出图片。

这时候问题就出现了，在我们的前端电子报表中并没有默认图片保存的格式，那这时候我们如何用已有功能进一步扩展，来实现这个功能呢？

一、确定实现思路

巧妇难为无米之炊，首先我们先整理一下手中素材。

通过阅读文档了解我们可以自定义添加按钮：

同时我们还可以在action属性中，给按钮定义点击后触发的事件：

顺着这个思路，我们可以在工具栏添加一个导出按钮，将按钮的动作设置为"点击这个按钮时实现导出图片的功能"。ARJS本身支持导出PDF，并且也提供了直接调用导出PDF的接口：export，所以我们可以先通过接口导出PDF，然后再将PDF转换为图片，最终实现导出图片的功能。

这下子，我们的最终问题就变成了是如何 将** PDF **转换为图片并导出 。

PDF.js是一款使用HTML5 Canvas安全地渲染PDF文件以及遵从网页标准的网页浏览器渲染PDF文件的JavaScript库。我们可以通过PDF.js库将导出的PDF通过Canvas在网页上渲染出来，然后通过Canvas的toDataURL方法返回一个包含图片展示的 data URL。拿到这