导出
集成导出功能
ActiveReportsJS 报表查看器支持以下常用的导出格式：
PDF
表格类数据CSV导出
Excel (.xlsx)
HTML
配置Viewer导出面板
添加相关导出文件
<script src="https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-pdf.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-tabular-data.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-html.js"></script>配置Viewer可提供的导出格式：
var viewer = new ActiveReports.Viewer("#viewer-host");
viewer.availableExports = ["pdf"];使用 ActiveReportsJS Viewer 导出面板
将可用的导出格式添加到查看器-
添加对应导出脚本,
初始化查看器组件, 然后
添加一个 div 元素来绑定查看器。
以下是完整的代码：
<head>
<title>ActiveReportsJS Viewer: Exporting</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/ar-js-viewer.css" />
<script type="text/javascript" src="scripts/ie-polyfills.full.js"></script>
<script type="text/javascript" src="scripts/ar-js-core.js"></script>
<script type="text/javascript" src="scripts/ar-js-viewer.js"></script>
<!--scripts for Exporting-->
<script type="text/javascript" src="scripts/ar-js-xlsx.js"></script> <!--export to Excel-->
<script type="text/javascript" src="scripts/ar-js-pdf.js"></script> <!--export to PDF-->
<script type="text/javascript" src="scripts/ar-js-html.js"></script> <!--export to HTML-->
</head>
<body onload="load()">
<div id="ARJSviewerDiv" style="height: 100%"></div>
<script>
function load() {
const viewer = new ActiveReports.Viewer('#ARJSviewerDiv', { ShowAbout: true });
viewer.open('/reports/InvoiceList.rdlx-json');
// show or hide available export formats
viewer.availableExports = ['pdf', 'xlsx']; // hides html export
}
</script>
</body>在 ActiveReportsJS Viewer 工具栏中添加自定义按钮。
如果在viewer的工具栏中添加自定义按钮来代替默认导出按钮，可在按钮点击时，使用viewer.export方法传递导出格式和导出设置。以下是添加自定义按钮的完整代码：
<head>
<title>Export from custom buttons added on viewer's toolbar</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/ar-js-viewer.css" />
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css">
<script type="text/javascript" src="scripts/ie-polyfills.full.js"></script>
<script type="text/javascript" src="scripts/ar-js-core.js"></script>
<script type="text/javascript" src="scripts/ar-js-viewer.js"></script>
<script type="text/javascript" src="scripts/ar-js-xlsx.js"></script>
<script type="text/javascript" src="scripts/ar-js-pdf.js"></script>
<script type="text/javascript" src="scripts/ar-js-html.js"></script>
<script>
var viewer;
var pdfExportButton;
var xlsxExportButton;
var htmlExportButton;
</script>
</head>
<body onload="load()">
<div id="ARJSviewerDiv" style="height: 100% ;width: 100%"></div>
<script>
function load() {
viewer = new ActiveReports.Viewer('#ARJSviewerDiv');
//add Excel and HTML export icons as svg
var svgExcelLogo = '<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="24" height="24" viewBox="0 0 88.030066 86" version="1.1" id="svg2" inkscape:version="0.48.3.1 r9886" sodipodi:docname="word.svg"> <metadata id="metadata126"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <defs id="defs124" /> <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1280" inkscape:window-height="960" id="namedview122" showgrid="false" inkscape:zoom="1.0905983" inkscape:cx="344.89442" inkscape:cy="53.75" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="svg2" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" /> <path d="m 46.04,0 5.94,0 c 0,2.67 0,5.33 0,8 10.01,0 20.02,0.02 30.03,-0.03 1.69,0.07 3.55,-0.05 5.02,0.96 1.03,1.48 0.91,3.36 0.98,5.06 -0.05,17.36 -0.03,34.71 -0.02,52.06 -0.05,2.91 0.27,5.88 -0.34,8.75 -0.4,2.08 -2.9,2.13 -4.57,2.2 -10.36,0.03 -20.73,-0.02 -31.1,0 0,3 0,6 0,9 l -6.21,0 C 30.53,83.23 15.26,80.67 0,78 0,54.67 0,31.34 0,8.01 15.35,5.34 30.7,2.71 46.04,0 z" id="path10" inkscape:connector-curvature="0" style="fill:#207245" /> <path d="m 51.98,11 c 11,0 22,0 33,0 0,21 0,42 0,63 -11,0 -22,0 -33,0 0,-2 0,-4 0,-6 2.67,0 5.33,0 8,0 0,-2.33 0,-4.67 0,-7 -2.67,0 -5.33,0 -8,0 0,-1.33 0,-2.67 0,-4 2.67,0 5.33,0 8,0 0,-2.33 0,-4.67 0,-7 -2.67,0 -5.33,0 -8,0 0,-1.33 0,-2.67 0,-4 2.67,0 5.33,0 8,0 0,-2.33 0,-4.67 0,-7 -2.67,0 -5.33,0 -8,0 0,-1.33 0,-2.67 0,-4 2.67,0 5.33,0 8,0 0,-2.33 0,-4.67 0,-7 -2.67,0 -5.33,0 -8,0 0,-1.33 0,-2.67 0,-4 2.67,0 5.33,0 8,0 0,-2.33 0,-4.67 0,-7 -2.67,0 -5.33,0 -8,0 0,-2 0,-4 0,-6 z" id="path48" inkscape:connector-curvature="0" style="fill:#ffffff" /> <path d="m 63.98,17 c 4.67,0 9.33,0 14,0 0,2.33 0,4.67 0,7 -4.67,0 -9.33,0 -14,0 0,-2.33 0,-4.67 0,-7 z" id="path58" inkscape:connector-curvature="0" style="fill:#207245" /> <path d="m 29.62,26.37 c 2.26,-0.16 4.53,-0.3 6.8,-0.41 -2.67,5.47 -5.35,10.94 -8.07,16.39 2.75,5.6 5.56,11.16 8.32,16.76 -2.41,-0.14 -4.81,-0.29 -7.22,-0.46 -1.7,-4.17 -3.77,-8.2 -4.99,-12.56 -1.36,4.06 -3.3,7.89 -4.86,11.87 -2.19,-0.03 -4.38,-0.12 -6.57,-0.21 2.57,-5.03 5.05,-10.1 7.7,-15.1 -2.25,-5.15 -4.72,-10.2 -7.04,-15.32 2.2,-0.13 4.4,-0.26 6.6,-0.38 1.49,3.91 3.12,7.77 4.35,11.78 1.32,-4.25 3.29,-8.25 4.98,-12.36 z" id="path72" inkscape:connector-curvature="0" style="fill:#ffffff" /> <path d="m 63.98,28 c 4.67,0 9.33,0 14,0 0,2.33 0,4.67 0,7 -4.67,0 -9.33,0 -14,0 0,-2.33 0,-4.67 0,-7 z" id="path90" inkscape:connector-curvature="0" style="fill:#207245" /> <path d="m 63.98,39 c 4.67,0 9.33,0 14,0 0,2.33 0,4.67 0,7 -4.67,0 -9.33,0 -14,0 0,-2.33 0,-4.67 0,-7 z" id="path108" inkscape:connector-curvature="0" style="fill:#207245" /> <path d="m 63.98,50 c 4.67,0 9.33,0 14,0 0,2.33 0,4.67 0,7 -4.67,0 -9.33,0 -14,0 0,-2.33 0,-4.67 0,-7 z" id="path114" inkscape:connector-curvature="0" style="fill:#207245" /> <path d="m 63.98,61 c 4.67,0 9.33,0 14,0 0,2.33 0,4.67 0,7 -4.67,0 -9.33,0 -14,0 0,-2.33 0,-4.67 0,-7 z" id="path120" inkscape:connector-curvature="0" style="fill:#207245" /> </svg>';
var svgHTMLLogo = '<svg xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve" width="24" height="24"><style type="text/css"> .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#157EFB;} </style><title></title><desc></desc><g id="Page-1"> <g id="icon-76-document-file-html"> <path id="document-file-html" class="st0" d="M19,26v2c0,1.1-0.9,2-2,2H2c-1.1,0-2-0.9-2-2V5c0-1.1,0.9-2,2-2h10v6 c0,1.1,0.9,2,2,2h5v2H6c-1.7,0-3,1.3-3,3v7c0,1.7,1.3,3,3,3H19L19,26L19,26z M13,3v6c0,0.6,0.5,1,1,1h5L13,3L13,3z M6,14 c-1.1,0-2,0.9-2,2v7c0,1.1,0.9,2,2,2h23c1.1,0,2-0.9,2-2v-7c0-1.1-0.9-2-2-2H6L6,14z M29,22v1h-5v-7h1v6H29L29,22z M14,17v6h1v-6 h2v-1h-5v1H14L14,17z M10,19v-3h1v7h-1v-3H7v3H6v-7h1v3H10L10,19z M20.5,19L19,16h-0.5H18v7h1v-5l1,2h0.5H21l1-2v5h1v-7h-0.5H22 L20.5,19L20.5,19z"/></g></g></svg>';
//pdfExportButton using iconCssClass
pdfExportButton = {
key: 'pdfExternalExportButton',
iconCssClass: 'mdi mdi-file',
text: "PDF Export",
title: "PDF Export",
checked: true,
enabled: true,
action: function (item) {
var settings = { title: 'Invoice List', userPassword: 'user_Pwd' };
var cancelCallback = function () {
return false;
}
viewer.export('pdf', settings, { cancel: cancelCallback })
.then(result => result.download("Exported_PDF"));
}
};
//xlsxExportButton using svg icon
xlsxExportButton = {
key: 'xlsxExternalExportButton',
icon: { type: 'svg', content: svgExcelLogo },
title: "Excel Export",
checked: true,
enabled: true,
action: function (item) {
var settings = { creator: 'Jack', password: 'Pwd' };
var cancelCallback = function () {
return false;
}
viewer.export('xlsx', settings, { cancel: cancelCallback })
.then(result => result.download("Exported_XLSX"));
}
};
//htmlExportButton using svg icon
htmlExportButton = {
key: 'htmlExternalExportButton',
icon: { type: 'svg', content: svgHTMLLogo },
title: "HTML Export",
checked: true,
enabled: true,
action: function (item) {
var settings = { autoPrint: 'true' };
var cancelCallback = function () {
return false;
}
viewer.export('html', settings, { cancel: cancelCallback })
.then(result => result.download("Exported_HTML"));
}
};
var Comic = {
name: 'Comic Sans MS',
source: 'fonts/comic.ttf',
};
/*Register specified fonts on exporting.
Makes export correct on machines where fonts are missing.*/
viewer.registerFont(Comic);
viewer.toolbar.addItem(pdfExportButton);
viewer.toolbar.addItem(xlsxExportButton);
viewer.toolbar.addItem(htmlExportButton);
viewer.toolbar.updateLayout({
default: ['pdfExternalExportButton', 'xlsxExternalExportButton', 'htmlExternalExportButton', '$navigation', '$history', '$fullscreen', '$split', '$print', '$refresh', '$galleymode', '$mousemode', '$split', '$continuousmode', '$singlepagemode', '$zoom', '$split'],
fullscreen: ['$navigation', '$fullscreen', 'print', 'galleymode'],
mobile: ['$refresh', '$mousetool']
});
// open rdlx-json file in viewer
viewer.open('/reports/InvoiceList.rdlx-json');
}
</script>
</body>不使用 viewer 预览，直接导出（一键导出）
您还可以通过代码指定导出格式和设置，在不预览的情况下导出报表并控制导出行为。
以下代码指定PDF的导出设置。
function load() {
var ARJS = GC.ActiveReports.Core;
var PDF = GC.ActiveReports.PdfExport;
var onProgressCallback = function (pageCount) {
console.log(pageCount);
}
var settings = {
info: {
title: 'Invoice List',
subject: 'This is the Invoice List',
author: 'John K',
keywords: 'PDF; import; export'
},
security:
{
userPassword: 'user_Pwd',
ownerPassword: 'owner_Pwd',
permissions: {
printing: 'lowResolution',
modifying: true,
annotating: true,
copying: true,
contentAccessibility: false,
documentAssembly: false
}
},
fonts: [
{
name: 'SimSun-ExtB',
source: '/fonts/simsunb.ttf'
},
{
name: 'Matura MT Script Capitals',
source: '/fonts/MATURASC.TTF',
},
{
name: 'Stencil',
source: '/fonts/STENCIL.ttf'
}
]
}
var pageReport = new ARJS.PageReport();
pageReport.load('/reports/InvoiceList.rdlx-json')
.then(() => pageReport.run())
.then(pageDocument => PDF.exportDocument(pageDocument, settings, onProgressCallback))
.then(result => result.download('InvoiceList'));
}注意:
默认PDF版本（1.3）只允许设置4种基本权限类型：打印、修改、复制和批注。所有其他权限都需要PDF 1.4+。
在Adobe Acrobat Reader（可能在其他阅读器应用程序中）中，文档程序集始终显示为“不允许”，因为此应用程序根本不允许合并文档。
PDF导出设置说明 |
|---|
标题 - 文件标题。 |
作者 - 显示在查看器应用程序的文档属性中的作者的名称。 |
关键字 - 与文档关联的关键字。 |
主题 - 文件主题。 |
用户密码 - 可以在读卡器中输入的用户密码。如果该值保留为空，则不会提示用户输入密码，但用户将受到指定权限的限制。 |
所有者密码 - 可以在读卡器中输入的所有者密码，允许完全访问文档，而不考虑指定的用户权限。 |
允许打印 - 允许以低或高分辨率打印文档。 |
允许复制 - 允许从文档中复制内容。 |
允许修改 - 允许在文档中编辑。 |
允许注释 - 允许添加或编辑注释。 |
允许内容可访问性 - 允许文本提取或可访问性。 |
允许文档组装 - 允许组合PDF文档。 |
pdf版本 - 允许设置pdf版本-1.3、1.4、1.5、1.6、1.7和1.7ext3。 |
打开时打印 - 指示打开后是否应打印文档。 |
文件名 - 导出的PDF文档的名称。 |
Excel
以下代码指定Excel的导出设置。
function load() {
var ARJS = GC.ActiveReports.Core;
var PDF = GC.ActiveReports.XlsxExport;
var onProgressCallback = function (pageCount) {
console.log(pageCount);
}
var settings = {
info: {
creator: 'Jack'
},
sheetName: 'Sheet_Details',
pageSettings: {
size:'A4',
orientation: 'landscape'
},
password: 'password'
}
var pageReport = new ARJS.PageReport();
pageReport.load('/reports/InvoiceList.rdlx-json')
.then(() => pageReport.run())
.then(pageDocument => Excel.exportDocument(pageDocument, settings, onProgressCallback))
.then(result => result.download('InvoiceList'));
}Excel导出设置说明 |
|---|
作者 - 显示在查看器应用程序的文档属性中的作者的名称。 |
方向 - Excel文档的方向-纵向或横向。 |
工作表名称 - Excel文档或工作表的名称。 |
密码 - 打开Excel文档的密码。 |
文件名 - 导出的Excel文档的名称。 |
HTML
以下代码指定HTML的导出设置。
function load() {
var ARJS = GC.ActiveReports.Core;
var HTML = GC.ActiveReports.HtmlExport;
var onProgressCallback = function (pageCount) {
console.log(pageCount);
}
var settings = {
autoPrint: true,
multiPage: true,
renderOptions: {
galleyMode: true //property available only through API
}
}
var pageReport = new ARJS.PageReport();
pageReport.load('/reports/InvoiceList.rdlx-json')
.then(() => pageReport.run())
.then(pageDocument => HTML.exportDocument(pageDocument, settings, onProgressCallback))
.then(result => result.download('InvoiceList'));
}HTML导出设置的描述 |
|---|
标题 - 文件标题。 |
另存为 - 将导出的HTML另存为存档文件。 |
打开时打印 - 表示打开时是否打印文档。 |
文件名 - 导出的HTML文档的名称。 |
导出限制
PDF打印预设不可用。
不支持PDF/A格式。
无法添加水印。
没有字体回退属性来定位丢失的字形。
只能导出JPG和PNG图像。不导出GIF、BMP、EMF、TIFF和WMF。
不支持竖排文字。
textDecoration属性-不支持上横线。
Excel
不支持斜线
HTML
HTML不是最好的打印格式。可以使用其他格式导出。
下表列出了PDF或Excel导出中不支持的属性。
属性 | 支持PDF格式 | 支持Excel格式 |
|---|---|---|
报表 - Bookmark | 是 | 否 |
文本框 - CharacterSpacing | 是 | 否 |
文本框 - LineSpacing | 否 | 否 |
图像 - Alignment | 是 | 否 |
图像 - Action | 是 | 否 |
图像 - BackgroundRepeat | 否 | 否 |
图像 - Sizing | 否 | 是 |
形状 - RoundingRadius | 是 | 否 |
形状 - Style | 是 | 否 |
表格 - AutoMergeMode | 否 | 否 |
表格 - WritingMode | 否 | 否 |
直线 - LineWidth | 是 | 否 |
子报表 - SubstituteThemesOnSubreport | 否 | 否 |
矩表 - WritingMode | 否 | 否 |