关于javascript:纯JS集成报表系列教程2

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') });

        }

导出 Html

function 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、预览展现
**