导出

集成导出功能

ActiveReportsJS 报表查看器支持以下常用的导出格式：

PDF
表格类数据CSV导出
Excel (.xlsx)
HTML

配置Viewer导出面板

添加相关导出文件

<script src="https://cdn.grapecity.com/activereportsjs/4.0.0/dist/ar-js-pdf.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/4.0.0/dist/ar-js-tabular-data.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/4.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

以下代码指定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打印预设不可用。
不支持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	否	否