【ARJS】 从“PDF”到“导出图片”
本帖最后由 Crystal.Li 于 2021-9-30 15:30 编辑众所周知，目前Active Reports JS可支持导出的文件类型有Pdf、Excel、Html三大类型。但是，总有一些实际应用场景，需要我们导出图片，那这时候我们该如何满足呢？
产品是标准的，但办法是灵活的。虽然标准产品目前没有直接支持导出图片，但却暴露了很多可供用户进行定制化产品的接口，所以本文就从产品所提供的接口入手，探索一下如何在标准产品中实现导出图片的功能，同时在文末会附上可直接运行的demo文件。
一、确定实现思路
在文档中，我们知道ARJS支持自定义添加按钮:
从在线示例里边，我们知道在action属性中可以给按钮定义点击后触发的事件：
所以我们可以在工具栏添加一个导出图片按钮，当点击这个按钮时实现导出图片的功能。我们知道，ARJS本身支持导出pdf，并且也提供了直接调用导出pdf的接口：export，所以我们可以先通过接口导出pdf，然后再将pdf转换为图片，最终实现导出图片的功能。
经过以上分析，我们的最终问题其实就是如何将pdf转换为图片并导出。PDF.js是一款使用HTML5 Canvas安全地渲染PDF文件以及遵从网页标准的网页浏览器渲染PDF文件的JavaScript库。我们可以通过PDF.js库将导出的pdf通过Canvas在网页上渲染出来，然后通过Canvas的toDataURL方法返回一个包含图片展示的 data URI。拿到这个URI就好办了，可以利用a标签的download属性直接对其进行下载，最终实现在ARJS中导出图片的功能。
总结，整体实现思路如下：
[*]添加导出图片按钮
[*]实现导出 pdf
[*]将 pdf 通过 pdf.js 库渲染成 <canvas>
[*]通过a标签的 download 属性将 <canvas> 保存为图片
二、代码实战
简单起见，本示例不使用任何框架集成ActiveReports JS，在纯JaveScript中集成报表，相关文档：在纯JavaScript项目中集成报表 Viewer。另外，为了在document中插入canvas元素，事先可以建立一个div元素，以供之后在该节点下插入canvas元素，同时为了界面中只有报表查看器，可以隐藏该div。最终的页面结构如下：
<body>
<div id="viewer-host"></div>
<div id="imgDiv" style="display: none"></div>
</body>
1、添加导出图片按钮 let exportImageButton = {
key: '$exportImage',
icon:{
type: 'svg',
content:'<svg role="img" xmlns="http://www.w3.org/2000/svg" width="21px" height="21px" viewBox="0 0 24 24" aria-labelledby="imageIconTitle" stroke="#205F78" stroke-width="2.2857142857142856" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#205F78"> <title id="imageIconTitle">Image</title> <rect width="18" height="18" x="3" y="3"/> <path stroke-linecap="round" d="M3 14l4-4 11 11"/> <circle cx="13.5" cy="7.5" r="2.5"/> <path stroke-linecap="round" d="M13.5 16.5L21 9"/> </svg>',
size: 'small'
},
enabled: true,
title:'导出图片',
action: function() {
//定义导出图片按钮点击事件
}
};
viewer.toolbar.addItem(exportImageButton); 接口文档：addItem。
（提示：以上在icon的content的属性中，使用了一个svg，这个示例代码中的svg来自网站：ikonate 如果大家有需要可自行下载，如果作为商用需要注意版权~）
以上代码添加之后，我们就可以在报表预览界面的工具栏看到这样一个按钮：
2、实现导出 pdf
在exportImageButton的action中定义一个exportImage方法，在这个方法中首先实现导出pdf，导出的结果包含一个pdf文件的blob对象，大家可自行打印出来看一下导出结果：
function exportImage() {
const settings = { title: 'Active Reports JS' };
viewer.export('pdf', settings).then((result) =>{
//这个result包含一个所导出pdf的blob对象
console.log(result);
});
}
3、将 pdf 通过 pdf.js 库渲染成 <canvas>
首先我们需要去pdf.js官网下载相关文件引入到项目中，我这里的示例通过cdn的方式引入：<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>引入之后，我们就可以对上一步得到的blob对象进行操作，将pdf渲染成<canvas>:
function pageToCanvasObj(page) {
const viewport = page.getViewport({scale: 1});
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
canvas.style.width = "100%";
canvas.style.height = "100%";
imgDiv.append(canvas);
return {
canvas,
renderContext: {
canvasContext: context,
viewport
}
}
}
function exportImage() {
const settings = { title: 'Active Reports JS' };
viewer.export('pdf', settings).then((result) =>{
//核心代码
//通过FileReader的接口将blob转换为ArrayBuffer
const fileReader = new FileReader();
fileReader.readAsArrayBuffer(result.data);
fileReader.onload = function() {
//为了读写ArrayBuffer对象，建立typedArray视图
const typedArrayResult = new Uint8Array(fileReader.result);
//pdf.js读取文档后渲染canvas
pdfjsLib.getDocument(typedArrayResult).promise.then(function(pdf) {
if (pdf) {
const pageNum = pdf.numPages;
for (let i = 1; i <= pageNum; i++) {
pdf.getPage(i).then((page) => {
//创建canvas，并且返回相关数据
const canvasObj = pageToCanvasObj(page);
//<canvas>渲染
page.render(canvasObj.renderContext).promise.then(() => {
//通过canvas对象的toDataURL得到图片链接
const imgUrl = canvasObj.canvas.toDataURL();
})
})
}
}
},(error) => {
alert(error);
});
};
});
}
4、通过a标签的 download 属性将 <canvas> 保存为图片
将上一步得到的imgUrl通过a标签下载：
function saveImage(index, url) {
const link = document.createElement("a");
link.href = url;
link.download = `image${index}`;
link.click();
link.remove();
}
以上就实现了在ActiveReports中导出图片的功能，其中无非是一些文件读写以及dom相关的操作。在此附上示例完整demo代码文件：
导出效果：
多谢,我实验下哈:lol
页:
[1]