V1
V1

在项目中使用 ActiveReportsJS

在应用程序中添加 ActiveReportsJS 需要的css和脚本文件:

  • 必须文件:

    • ar-js-viewer.css
    • ar-js-core.js
    • ar-js-viewer.js
  • 如果使用导出功能,需要引用以下文件:

    • ar-js-pdf.js
    • ar-js-xlsx.js
    • ar-js-html.js

引用本地的 ActiveReportsJS 文件

下载 ActiveReportsJS 包,并将文件复制到应用程序中的文件夹。

<head>
     <title>ActiveReportsJS</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> <!--to run in IE-->
     <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-pdf.js"></script>
     <script type="text/javascript" src="scripts/ar-js-xlsx.js"></script>
     <script type="text/javascript" src="scripts/ar-js-html.js"></script>
</head>
<body>
...
</body>

ActiveReportsJS 可以通过以下地址下载:

从 CDN 引用 ActiveReportsJS 文件

ActiveReportsJS 所有的文件都可以从 CDN 上下载,都是存放到 cdn.grapecity.com

<head>
     <title>ActiveReportsJS</title>
     <meta charset="utf-8" />

     <link rel="stylesheet" href="http://cdn.grapecity.com/activereportsjs/1.0.0/styles/ar-js-viewer.css" />
     <script type="text/javascript" src="http://cdn.grapecity.com/activereportsjs/1.0.0/dist/ie-polyfills.full.js"></script> <!--to run in IE-->
     <script type="text/javascript" src="http://cdn.grapecity.com/activereportsjs/1.0.0/dist/ar-js-core.js"></script>
     <script type="text/javascript" src="http://cdn.grapecity.com/activereportsjs/1.0.0/dist/ar-js-viewer.js"></script>
     <script type="text/javascript" src="http://cdn.grapecity.com/activereportsjs/1.0.0/dist/ar-js-pdf.js"></script>
     <script type="text/javascript" src="http://cdn.grapecity.com/activereportsjs/1.0.0/dist/ar-js-xlsx.js"></script>
     <script type="text/javascript" src="http://cdn.grapecity.com/activereportsjs/1.0.0/dist/ar-js-html.js"></script>
</head>
<body>
...
</body>

使用 npm 引用 ActiveReportsJS

ActiveReportsJS 在 npm 中在@grapecity npm 域内使用 activereports.* 包来表示,@grapecity/activereports 代表了库包。与其他 npm包一样,您需要下载安装 NodeJS

可以通过执行以下命令从 npm 中安装最新版本 ActiveReportsJS :

npm install @grapecity/activereports

@grapecity/activereports 包结构

grapecity / activereports 包含了所有可用的功能模块:

  • readme.md
  • license.md
  • package.json
  • index.js
  • index.d.ts
  • dist
    • ar-js-core.js
    • ar-js-html.js
    • ar-js-pdf.js
    • ar-js-viewer.js
    • ar-js-xlsx.js
    • ie-polyfills.full.js
  • styles
    • ar-js-viewer.css
    • dark-yellow.css
    • green.css
    • light-blue.css
  • lib
    • node_modules > @grapecity
      • ar-js-html.d.ts
      • ar-js-html.js
      • ar-js-pagereport.d.ts
      • ar-js-pagereport.js
      • ar-js-pdf.d.ts
      • ar-js-pdf.js
      • ar-js-viewer.d.ts
      • ar-js-viewer.js
      • ar-js-xlsx.d.ts
      • ar-js-xlsx.js
      • en-locale.json
      • ie-polyfills.full.js
    • ar-js-core.d.ts
    • ar-js-html.d.ts
    • ar-js-pdf.d.ts
    • ar-js-viewer.d.ts
    • ar-js-xlsx.d.ts
  • core
    • index.js
    • index.d.ts
  • viewer
    • index.d.ts
    • index.js
  • pdfexport
    • index.d.ts
    • index.js
  • xlsxexport
    • index.d.ts
    • index.js
  • htmlexport
    • index.d.ts
    • index.js

使用 @grapecity/activereports 包

使用 import 语句导入 ActiveReportsJS 模块:

  • 导入包中的所有功能:
  import * as arjs from '@grapecity/activereports'; 
  // or...
  import { Viewer, Core, PdfExport} from '@grapecity/activereports';
  • 导入指定模块:
  import * as Core from '@grapecity/activereports/core';
  import { Viewer } from '@grapecity/activereports/viewer';