Lenka.Guo 发表于 2022-2-15 09:52:56

ActiveReports 16新特性-JSViewer及WebViewer 导出属性API 介绍

本帖最后由 Lenka.Guo 于 2022-2-22 10:12 编辑

ActiveReports 16 为WebViewer及JSViewer提供了丰富的导出能力,并支持配置各个文件类型的导出设置。

自定义xls 导出设置:

                  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>JS Viewer</title>
    <link href="jsViewer.min.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
</head>
<body onload="loadViewer()">
    <div style="width: 100%">
      <div id="viewerContainer"></div>
    </div>
    <script type="text/javascript" src="jsViewer.min.js"></script>
    <script type="text/javascript">
      let viewer;
      function loadViewer() {
            viewer = GrapeCity.ActiveReports.JSViewer.create({
                element: '#viewerContainer',
                defaultExportSettings: {
                  
                  xls: {
                        /* only rdlx */
                        EnableToggles: { value: true },
                        LayoutMode: { value: 'Galley' },
                        RightToLeft: { value: true },
                        /* only rpx */
                        FileFormat: { value: 'Xls95' },
                        AutoRowHeight: { value: true },
                        DisplayGridLines: { value: true },
                        Pagination: { value: false },
                        /* both (rdlx and rpx) */
                        MultiSheet: { value: false },
                        SheetName: { value: 'Sheet_xls' },
                        UseDefaultPalette: { value: true },
                        Orientation: { value: 'Landscape' },
                        PaperSize: { value: 'A5' },
                        Password: { value: '123456' },
                        ProtectedBy: { value: 'USER' },
                        ReadOnlyRecommended: { value: true },
                        WritePassword: { value: '123456' },
                        FileName: { value: "ar16" }
                  },
                }
            });
            viewer.openReport("DemoReport.rdlx");
      }
    </script>
</body>
</html>

                自定义.xlsx 导出设置:

<blockquote>


自定义导出doc格式设置

                  <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="theme-color" content="#000000">
   <title>JS Viewer</title>
   <link href="jsViewer.min.css" rel="stylesheet">
   <link href="index.css" rel="stylesheet">
</head>
<body onload="loadViewer()">
   <div style="width: 100%">
         <div id="viewerContainer"></div>
   </div>
   <script type="text/javascript" src="jsViewer.min.js"></script>
   <script type="text/javascript">
         let viewer;
      function loadViewer() {
             viewer = GrapeCity.ActiveReports.JSViewer.create({
               element: '#viewerContainer',
                defaultExportSettings: {
                  
                  doc: {
                      Author: { value: 'USER', visible: true },
                      BaseHref: { value: 'www.com' },
                      Generator: { value: 'Created by USER' },
                      PageHeight: { value: '10' },
                      PageWidth: { value: '5' },
                      Title: { value: 'TITLE_01' },
                      FileName: { value: 'ar16_doc', visible: true }
                  },
                }
            });
             viewer.openReport("DemoReport.rdlx");
         }
   </script>
</body>
</html>

               


自定义导出Docx设置:

                  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>JS Viewer</title>
    <link href="jsViewer.min.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
</head>
<body onload="loadViewer()">
    <div style="width: 100%">
      <div id="viewerContainer"></div>
    </div>
    <script type="text/javascript" src="jsViewer.min.js"></script>
    <script type="text/javascript">
      let viewer;
      function loadViewer() {
            viewer = GrapeCity.ActiveReports.JSViewer.create({
                element: '#viewerContainer',
                defaultExportSettings: {
                  docx: {
                        Author: { value: 'USER' },
                        CompanyName: { value: 'USER_COMPANY' },
                        DocumentCompatibilityVersion: { value: 'Word2010' },
                        DpiX: { value: 80 },
                        DpiY: { value: 80 },
                        Title: { value: 'TITLE_01' },
                        TOCAutoUpdate: { value: true },
                        Orientation: { value: 'Portrait' },
                        PaperSize: { value: 'B4' },
                        Password: { value: '123456' },
                        ReadOnlyRecommended: { value: true },
                        WritePassword: { value: '123456' },
                        FileName: { value: 'ar16_doc' }
                  },
                }
            });
            viewer.openReport("DemoReport.rdlx");
      }
    </script>
</body>
</html>

               

自定义导出PDF 设置

                  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>JS Viewer</title>
    <link href="jsViewer.min.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
</head>
<body onload="loadViewer()">
    <div style="width: 100%">
      <div id="viewerContainer"></div>
    </div>
    <script type="text/javascript" src="jsViewer.min.js"></script>
    <script type="text/javascript">
      let viewer;
      function loadViewer() {
            viewer = GrapeCity.ActiveReports.JSViewer.create({
                element: '#viewerContainer',
                defaultExportSettings: {
                  pdf: {
                        /*only for rpx*/
                        ConvertMetaToPng: { value: true },
                        ExportBookmarks: { value: false },
                        ImageInterpolation: { value: 'Auto' },
                        ImageQuality: { value: 'Highest' },
                        /*both (rdlx and rpx)*/
                        Title: { value: 'Document' },
                        Author: { value: 'USER' },
                        Subject: { value: 'PDF' },
                        Keywords: { value: 'PDF export' },
                        Application: { value: 'AR16' },
                        EmbedFonts: { value: 'All' },
                        Version: { value: 'PDF-1.5' },
                        UserPassword: { value: 'user_pwd' },
                        OwnerPassword: { value: 'owner_pwd' },
                        Encrypt: { value: true },
                        FileName: { value: 'ar16_pdf', visible: true }
                  },
                }
            });
            viewer.openReport("DemoReport.rdlx");
      }
    </script>
</body>
</html>

               

Bella.Yuan 发表于 2022-3-16 16:11:22

朱大虾0608 发表于 2022-3-16 09:00
不太懂什么是工程文件 我们这是web .net core 然后包引入的ar16的包。按道理来说 是可以设置这些默认属性 ...
您好,我这边测试后导出多个sheet是正确的,版主所给的代码“布局模式”默认是连续,所以设置“导出为多个sheet”为“是”时是不生效的,若要设置“导出为多个sheet”需要先设置导出多个sheet为“真”,然后切换布局模式为“分页”,即可成功导出为多个sheet,教程代码只是参考,具体页面导出设置您可以在代码里进行修改或者在页面进行选择后在点击“导出”按钮进行导出。具体可参考下面的附件demo进行修改。
API参考链接:https://www.grapecity.com/active ... tings-jsviewer.html

朱大虾0608 发表于 2022-3-15 12:03:04

版主啊我按照你的方式设置了, 怎么 导出多个sheet 不能设置否,分页模式 反正属性都每没生效AR16

Bella.Yuan 发表于 2022-3-15 14:34:17

朱大虾0608 发表于 2022-3-15 12:03
版主啊我按照你的方式设置了, 怎么 导出多个sheet 不能设置否,分页模式 反正属性都每没生效AR16
您好,方便的话上传一下您的工程文件(使用高级模式,上传至附件),我们看看哦!

朱大虾0608 发表于 2022-3-16 09:00:25

Bella.Yuan 发表于 2022-3-15 14:34
您好,方便的话上传一下您的工程文件(使用高级模式,上传至附件),我们看看哦!

不太懂什么是工程文件 我们这是web .net core 然后包引入的ar16的包。按道理来说 是可以设置这些默认属性的啊

Bella.Yuan 发表于 2022-3-16 09:47:16

朱大虾0608 发表于 2022-3-16 09:00
不太懂什么是工程文件 我们这是web .net core 然后包引入的ar16的包。按道理来说 是可以设置这些默认属性 ...

您好,工程文件也就是您的项目文件,方便的话移步至AR的求助中心板块直接发帖,我们有对应的同事帮您进行解决,帖子中具体描述您的问题以及对应可复现的demo或者工程文件,这样更方便快速帮您解决问题哦!

朱大虾0608 发表于 2022-3-17 15:35:36

Bella.Yuan 发表于 2022-3-16 09:47
您好,工程文件也就是您的项目文件,方便的话移步至AR的求助中心板块直接发帖,我们有对应的同事帮您进行 ...

OK了 你们另外一个远程同事帮忙看了下 是引入的JS文件太旧了, 我们是从15升级上来的, 十分感谢:lol

Bella.Yuan 发表于 2022-3-17 15:37:06

朱大虾0608 发表于 2022-3-17 15:35
OK了 你们另外一个远程同事帮忙看了下 是引入的JS文件太旧了, 我们是从15升级上来的, 十分感谢

好的,解决了就好:mj72:

zhengwei_cq 发表于 2024-1-3 17:09:17

Bella.Yuan 发表于 2022-3-17 15:37
好的,解决了就好

我是ar16,按如下配置后没有效果,请问还有别的地方配置吗:



Bella.Yuan 发表于 2024-1-3 17:24:34

zhengwei_cq 发表于 2024-1-3 17:09
我是ar16,按如下配置后没有效果,请问还有别的地方配置吗:
您好,请仔细检查一下版本,我这边使用16版本测试是正常的,您也可以直接下载置顶回帖的附件,在您本地测试对比看看。

页: [1] 2
查看完整版本: ActiveReports 16新特性-JSViewer及WebViewer 导出属性API 介绍