一. HTML部分

在页面上添加了Loading效果，账票印刷开始时显示Loading效果，印刷结束后隐藏Loading效果。
ar-js-core.js是核心文件
ar-js-pdf.js用来印刷PDF
ar-js-xlsx.js用来印刷EXCEL
ar-js-locales.js用来设置语言

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @keyframes donut-spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        .donut-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20%;
        }
        .donut {
            display: inline-block;
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-left-color: #7983ff;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: donut-spin 1.2s linear infinite;
        }
        .hidden {
            display: none;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <!-- 账票打印区域 -->
    <div id="container">
        <button id="pdf">打印PDF</button>
        <hr>
        <button id="excel">打印Excel</button>
    </div>

    <!-- loading效果 -->
    <div class="donut-container hidden" id="loading">
        <div class="donut"></div>
    </div>

</body>
<!-- 核心文件 -->
<script src="https://cdn.grapecity.com/activereportsjs/4.0.0/dist/ar-js-core.js"></script>
<!-- 打印PDF -->
<script src="https://cdn.grapecity.com/activereportsjs/4.0.0/dist/ar-js-pdf.js"></script>
<!-- 打印Excel -->
<script src="https://cdn.grapecity.com/activereportsjs/4.0.0/dist/ar-js-xlsx.js"></script>
<!-- 语言 -->
<script src="https://cdn.grapecity.com/activereportsjs/4.0.0/dist/locales/ar-js-locales.js"></script>
</html>

二. 账票定义体

⏹账票定义体本质上就是通过ActiveReportsJS Designer制作的特殊json文件，该json文件用来描述账票的样式，和后台提供的json数据进行绑定。只要后台提供的json数据的格式和账票定义体绑定的json数据格式保持一致，后台的数据便可显示在账票上。

在这里插入图片描述

三. JS部分

从GC.ActiveReports对象中解构出账票印刷所需的各类对象
账票定义体是后缀为.rdlx-json的文件，本质上是一个json文件。
从后台请求账票印刷所需的json数据，然后通过账票定义体的DataSources[0].ConnectionProperties.ConnectString连接字符串将其放入账票定义体。
可以定义一个配置对象，用来配置印刷账票的相关设置
使用new Intl.DateTimeFormat来获取时间对象

window.addEventListener('load', () => {
   init();
});

function init() {

    document.querySelector("#container").addEventListener("click", async function({target: {id}}) {

        if (!id) {
            return;
        }

        // 显示loading效果
        document.querySelector("#loading").classList.remove("hidden");

        // 从GC(GrapeCity的缩写)对象中,解构出账票打印的对象
        const {
            Core: ARJS,
            PdfExport,
            XlsxExport
        } = GC.ActiveReports;

        // 模拟从后台获取的json数据
        const dataResponse = await fetch('./01-reports/sales_data_sample_2.json');
        const reportJsonData = await dataResponse.json();

        /*
            获取账票的定义体对象,
            该定义体对象一般保存在前台的静态资源文件处
        */ 
        const reportResponse = await fetch('./01-reports/SalesDataByProductLineAndDate.rdlx-json');
        const report = await reportResponse.json();

        // 将后台得到的json数据放到账票定义体中
        report.DataSources[0].ConnectionProperties.ConnectString = "jsondata=" + JSON.stringify(reportJsonData);

        // 根据账票类型进行配置
        const exportCategoryMap = new Map([
            ["pdf", {
                info: {
                    title: 'Invoice List',
                    subject: 'This is the Invoice List',
                    author: 'John K',
                    keywords: 'PDF; import; export'
                }
            }],
            ["excel", {
                info: {
                    creator: '贾飞天'
                },
                // 设置sheet页名称
                sheetName: 'Sheet_Details',
                // 印刷纸张设置
                pageSettings: {
                    size:'A4',
                    orientation: 'landscape'
                },
                // Excel文件设置的密码(该密码可以由后台返回给前台)
                password: 'password'
            }],
        ]);
        const exportSetting = exportCategoryMap.get(id);
        
        // 账票类型的Map映射
        const exportObj = new Map([
            ["pdf", PdfExport],
            ["excel", XlsxExport]
        ]).get(id);

        // 注册字体
        ARJS.FontStore.registerFonts('./02-fonts/fontsConfig.json');
        
        // 加载账票定义体对象
        const pageReport = new ARJS.PageReport({ language: "ja" });
await pageReport.load(report);

        // 获取账票导出对象
        const pageDocument = await pageReport.run();
const result = await exportObj.exportDocument(pageDocument, exportSetting);

        // 账票下载
        result.download(`账票名_${yyyyMMddHHmmssTime()}`);
        
        // 隐藏loading效果
        document.querySelector("#loading").classList.add("hidden");
    });
}

// 构造yyyyMMddHHmmss时间
function yyyyMMddHHmmssTime() {
     return new Intl.DateTimeFormat('jp', {
         	year: 'numeric', 
			month: '2-digit', 
			day: '2-digit',   
			hour: 'numeric',
			hour12: false,  
			minute: 'numeric', 
			second: 'numeric',
			fractionalSecondDigits: 3,
     }).format(new Date())
	   .replaceAll("/", "")
	   .replaceAll(":", "")
	   .replaceAll(" ", "")
	   .replaceAll(".", "");
 }

四. 效果

⏹PDF效果
在这里插入图片描述

⏹Excel效果

在这里插入图片描述

五. Vue用法

⏹package.json

"dependencies": {
	"@grapecity/activereports": "^4.0.2",
	"@grapecity/activereports-localization": "^4.0.2",
 	// ...省略...
},

⏹Vue部分

import { Core, PdfExport, XlsxExport } from "@grapecity/activereports";
import '@grapecity/activereports-localization';
import '@grapecity/activereports/xlsxexport';
import '@grapecity/activereports/pdfexport';
import '@grapecity/activereports';

// 账票印刷部分代码和纯JS代码相同...