我们在前端报表中完成了各种工作数据的输入或内容处理之后,需要做什么?
数据的导出!
这些数据的常用导出格式有: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。拿到这