增加导出按钮
ActiveReportsJS提供导出API，在理论的业务场景中，能够依据本人的需要进行自定义导出。
上面咱们就来看看如何自定义增加导出按钮
1、ActiveReportsJS增加按钮API
viewer.toolbar.addItem();
2、导出API
导出Excel
function runExcel() { var ARJS = GC.ActiveReports.Core; var Excel = GC.ActiveReports.XlsxExport; var settings = { sheetName: '快递单', pageSettings: { size:'A4', orientation: 'portrait' } } var pageReport = new ARJS.PageReport(); pageReport.load('Quotation.rdlx-json') .then(function() { return pageReport.run() }) .then(function(pageDocument) { return Excel.exportDocument(pageDocument, settings) }) .then(function(result) { result.download('arjs-excel') }); }导出PDF
function runPdf() { var ARJS = GC.ActiveReports.Core; var PDF = GC.ActiveReports.PdfExport; var settings = { info: { title: '快递单', author: 'GrapeCity inc.', }, pdfVersion:"1.7" } var pageReport = new ARJS.PageReport(); pageReport.load('Quotation.rdlx-json') .then(function() { return pageReport.run() }) .then(function(pageDocument) { return PDF.exportDocument(pageDocument, settings) }) .then(function(result) { result.download('arjs-pdf') }); }导出Htmlfunction runHtml(){ var ARJS = GC.ActiveReports.Core; var html= GC.ActiveReports.HtmlExport; var pageReport = new ARJS.PageReport(); pageReport.load('reports/MonthSurvey.rdlx-json') .then(function() { return pageReport.run() }) .then(function(pageDocument) { return html.exportDocument(pageDocument) }) .then(function(result) { result.download('arjs-html') }); }**
3、工具栏增加导出按钮(导出 Excel、PDF、Html)**
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>ActiveReportsJS sample</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="/dist/ie-polyfills.js"></script> <script src="/dist/ar-js-core.js"></script> <script src="/dist/ar-js-designer.js"></script> <script src="/dist/ar-js-viewer.js"></script> <script src="/dist/ar-js-xlsx.js"></script> <script src="/dist/ar-js-pdf.js"></script> <script src="/dist/ar-js-html.js"></script> <script src="/dist/designer/zh-locale.js"></script> <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" /> <link rel="stylesheet" type="text/css" href="/styles/ar-js-ui.css" /> <link rel="stylesheet" type="text/css" href="/styles/ar-js-viewer.css" /> <link rel="stylesheet" type="text/css" href="/styles/ar-js-designer.css" /> <style> #viewer-host { margin: 0 auto; width: 100%; height: 100vh; } </style><body onload="load()"> <div class="container"> <div style="width:100% ;height:800px;" id="root" ></div> </div> <script> function load() { viewer = new ActiveReports.Viewer('#root', { language: 'zh' }); var svgExcelLogo = atob('PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA4OC4wMzAwNjYgODYiIHZlcnNpb249IjEuMSIgaWQ9InN2ZzIiIGlua3NjYXBlOnZlcnNpb249IjAuNDguMy4xIHI5ODg2IiBzb2RpcG9kaTpkb2NuYW1lPSJ3b3JkLnN2ZyI+IDxtZXRhZGF0YSBpZD0ibWV0YWRhdGExMjYiPiA8cmRmOlJERj4gPGNjOldvcmsgcmRmOmFib3V0PSIiPiA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4gPGRjOnRpdGxlPjwvZGM6dGl0bGU+IDwvY2M6V29yaz4gPC9yZGY6UkRGPiA8L21ldGFkYXRhPiA8ZGVmcyBpZD0iZGVmczEyNCIgLz4gPHNvZGlwb2RpOm5hbWVkdmlldyBwYWdlY29sb3I9IiNmZmZmZmYiIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiBib3JkZXJvcGFjaXR5PSIxIiBvYmplY3R0b2xlcmFuY2U9IjEwIiBncmlkdG9sZXJhbmNlPSIxMCIgZ3VpZGV0b2xlcmFuY2U9IjEwIiBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxMjgwIiBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSI5NjAiIGlkPSJuYW1lZHZpZXcxMjIiIHNob3dncmlkPSJmYWxzZSIgaW5rc2NhcGU6em9vbT0iMS4wOTA1OTgzIiBpbmtzY2FwZTpjeD0iMzQ0Ljg5NDQyIiBpbmtzY2FwZTpjeT0iNTMuNzUiIGlua3NjYXBlOndpbmRvdy14PSIwIiBpbmtzY2FwZTp3aW5kb3cteT0iMCIgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ic3ZnMiIgZml0LW1hcmdpbi10b3A9IjAiIGZpdC1tYXJnaW4tbGVmdD0iMCIgZml0LW1hcmdpbi1yaWdodD0iMCIgZml0LW1hcmdpbi1ib3R0b209IjAiIC8+IDxwYXRoIGQ9Im0gNDYuMDQsMCA1Ljk0LDAgYyAwLDIuNjcgMCw1LjMzIDAsOCAxMC4wMSwwIDIwLjAyLDAuMDIgMzAuMDMsLTAuMDMgMS42OSwwLjA3IDMuNTUsLTAuMDUgNS4wMiwwLjk2IDEuMDMsMS40OCAwLjkxLDMuMzYgMC45OCw1LjA2IC0wLjA1LDE3LjM2IC0wLjAzLDM0LjcxIC0wLjAyLDUyLjA2IC0wLjA1LDIuOTEgMC4yNyw1Ljg4IC0wLjM0LDguNzUgLTAuNCwyLjA4IC0yLjksMi4xMyAtNC41NywyLjIgLTEwLjM2LDAuMDMgLTIwLjczLC0wLjAyIC0zMS4xLDAgMCwzIDAsNiAwLDkgbCAtNi4yMSwwIEMgMzAuNTMsODMuMjMgMTUuMjYsODAuNjcgMCw3OCAwLDU0LjY3IDAsMzEuMzQgMCw4LjAxIDE1LjM1LDUuMzQgMzAuNywyLjcxIDQ2LjA0LDAgeiIgaWQ9InBhdGgxMCIgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgc3R5bGU9ImZpbGw6IzIwNzI0NSIgLz4gPHBhdGggZD0ibSA1MS45OCwxMSBjIDExLDAgMjIsMCAzMywwIDAsMjEgMCw0MiAwLDYzIC0xMSwwIC0yMiwwIC0zMywwIDAsLTIgMCwtNCAwLC02IDIuNjcsMCA1LjMzLDAgOCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IC0yLjY3LDAgLTUuMzMsMCAtOCwwIDAsLTEuMzMgMCwtMi42NyAwLC00IDIuNjcsMCA1LjMzLDAgOCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IC0yLjY3LDAgLTUuMzMsMCAtOCwwIDAsLTEuMzMgMCwtMi42NyAwLC00IDIuNjcsMCA1LjMzLDAgOCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IC0yLjY3LDAgLTUuMzMsMCAtOCwwIDAsLTEuMzMgMCwtMi42NyAwLC00IDIuNjcsMCA1LjMzLDAgOCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IC0yLjY3LDAgLTUuMzMsMCAtOCwwIDAsLTEuMzMgMCwtMi42NyAwLC00IDIuNjcsMCA1LjMzLDAgOCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IC0yLjY3LDAgLTUuMzMsMCAtOCwwIDAsLTIgMCwtNCAwLC02IHoiIGlkPSJwYXRoNDgiIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIHN0eWxlPSJmaWxsOiNmZmZmZmYiIC8+IDxwYXRoIGQ9Im0gNjMuOTgsMTcgYyA0LjY3LDAgOS4zMywwIDE0LDAgMCwyLjMzIDAsNC42NyAwLDcgLTQuNjcsMCAtOS4zMywwIC0xNCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IHoiIGlkPSJwYXRoNTgiIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIHN0eWxlPSJmaWxsOiMyMDcyNDUiIC8+IDxwYXRoIGQ9Im0gMjkuNjIsMjYuMzcgYyAyLjI2LC0wLjE2IDQuNTMsLTAuMyA2LjgsLTAuNDEgLTIuNjcsNS40NyAtNS4zNSwxMC45NCAtOC4wNywxNi4zOSAyLjc1LDUuNiA1LjU2LDExLjE2IDguMzIsMTYuNzYgLTIuNDEsLTAuMTQgLTQuODEsLTAuMjkgLTcuMjIsLTAuNDYgLTEuNywtNC4xNyAtMy43NywtOC4yIC00Ljk5LC0xMi41NiAtMS4zNiw0LjA2IC0zLjMsNy44OSAtNC44NiwxMS44NyAtMi4xOSwtMC4wMyAtNC4zOCwtMC4xMiAtNi41NywtMC4yMSAyLjU3LC01LjAzIDUuMDUsLTEwLjEgNy43LC0xNS4xIC0yLjI1LC01LjE1IC00LjcyLC0xMC4yIC03LjA0LC0xNS4zMiAyLjIsLTAuMTMgNC40LC0wLjI2IDYuNiwtMC4zOCAxLjQ5LDMuOTEgMy4xMiw3Ljc3IDQuMzUsMTEuNzggMS4zMiwtNC4yNSAzLjI5LC04LjI1IDQuOTgsLTEyLjM2IHoiIGlkPSJwYXRoNzIiIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIHN0eWxlPSJmaWxsOiNmZmZmZmYiIC8+IDxwYXRoIGQ9Im0gNjMuOTgsMjggYyA0LjY3LDAgOS4zMywwIDE0LDAgMCwyLjMzIDAsNC42NyAwLDcgLTQuNjcsMCAtOS4zMywwIC0xNCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IHoiIGlkPSJwYXRoOTAiIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIHN0eWxlPSJmaWxsOiMyMDcyNDUiIC8+IDxwYXRoIGQ9Im0gNjMuOTgsMzkgYyA0LjY3LDAgOS4zMywwIDE0LDAgMCwyLjMzIDAsNC42NyAwLDcgLTQuNjcsMCAtOS4zMywwIC0xNCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IHoiIGlkPSJwYXRoMTA4IiBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiBzdHlsZT0iZmlsbDojMjA3MjQ1IiAvPiA8cGF0aCBkPSJtIDYzLjk4LDUwIGMgNC42NywwIDkuMzMsMCAxNCwwIDAsMi4zMyAwLDQuNjcgMCw3IC00LjY3LDAgLTkuMzMsMCAtMTQsMCAwLC0yLjMzIDAsLTQuNjcgMCwtNyB6IiBpZD0icGF0aDExNCIgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgc3R5bGU9ImZpbGw6IzIwNzI0NSIgLz4gPHBhdGggZD0ibSA2My45OCw2MSBjIDQuNjcsMCA5LjMzLDAgMTQsMCAwLDIuMzMgMCw0LjY3IDAsNyAtNC42NywwIC05LjMzLDAgLTE0LDAgMCwtMi4zMyAwLC00LjY3IDAsLTcgeiIgaWQ9InBhdGgxMjAiIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIHN0eWxlPSJmaWxsOiMyMDcyNDUiIC8+IDwvc3ZnPg=='); //xlsxExportButton using svg icon var svgHTMLLogo = atob('PHN2ZyB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMiAzMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzIgMzI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+ICAuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6IzE1N0VGQjt9IDwvc3R5bGU+PHRpdGxlPjwvdGl0bGU+PGRlc2M+PC9kZXNjPjxnIGlkPSJQYWdlLTEiPiA8ZyBpZD0iaWNvbi03Ni1kb2N1bWVudC1maWxlLWh0bWwiPiA8cGF0aCBpZD0iZG9jdW1lbnQtZmlsZS1odG1sIiBjbGFzcz0ic3QwIiBkPSJNMTksMjZ2MmMwLDEuMS0wLjksMi0yLDJIMmMtMS4xLDAtMi0wLjktMi0yVjVjMC0xLjEsMC45LTIsMi0yaDEwdjYgYzAsMS4xLDAuOSwyLDIsMmg1djJINmMtMS43LDAtMywxLjMtMywzdjdjMCwxLjcsMS4zLDMsMywzSDE5TDE5LDI2TDE5LDI2eiBNMTMsM3Y2YzAsMC42LDAuNSwxLDEsMWg1TDEzLDNMMTMsM3ogTTYsMTQgICAgYy0xLjEsMC0yLDAuOS0yLDJ2N2MwLDEuMSwwLjksMiwyLDJoMjNjMS4xLDAsMi0wLjksMi0ydi03YzAtMS4xLTAuOS0yLTItMkg2TDYsMTR6IE0yOSwyMnYxaC01di03aDF2NkgyOUwyOSwyMnogTTE0LDE3djZoMXYtNiBoMnYtMWgtNXYxSDE0TDE0LDE3eiBNMTAsMTl2LTNoMXY3aC0xdi0zSDd2M0g2di03aDF2M0gxMEwxMCwxOXogTTIwLjUsMTlMMTksMTZoLTAuNUgxOHY3aDF2LTVsMSwyaDAuNUgyMWwxLTJ2NWgxdi03aC0wLjVIMjIgTDIwLjUsMTlMMjAuNSwxOXoiLz48L2c+PC9nPjwvc3ZnPg=='); //htmlExportButton 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")); } }; 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")); } }; 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")); } }; //Add ExportExcel button viewer.toolbar.addItem(xlsxExportButton); viewer.toolbar.addItem(pdfExportButton); viewer.toolbar.addItem(htmlExportButton); viewer.registerFont("fonts/fontsConfig.json").then(function () { viewer.open('reports/钻头应用状况.rdlx-json'); }); } </script></body></html>**4、预览展现
**