應用場景:
客户在創建前後端分離的應用時,前端只用於做一些基本的數據展示,如果涉及大量的數據或報表生成,建議放在服務器端展示,本文主要分享如何在服務器端使用ActiveReportsJS 實現報表導出PDF功能
Demo下載:
https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=MTIzMjQwfGMwM2JkNWVhfDE2MjM3MjI5NzF8MjkzODJ8ODgwNzA%3D
環境準備:
node.js v14.15.0+Headless 無頭瀏覽器
操作步驟:
- 添加資源文件
- 配置資源和文件
const puppeteer = require('puppeteer');
const fs = require('fs');
var static = require('node-static');
var http = require('http');
var file = new(static.Server)(__dirname + '/resources');
http.createServer(function (req, res) {
file.serve(req, res);
}).listen(9999);
const fonts = [
{
name: 'Montserrat',
source: 'Montserrat-Regular.ttf'
},
{
name: 'Montserrat',
source: 'Montserrat-Medium.ttf',
weight: 500
}
];
3. 調用瀏覽器並初始化 調用ARJS 導出PDF文件
(async () => {
const browser = await puppeteer.launch({headless: true});
const page = await browser.newPage();
await page.goto(`http://localhost:9999/host.html`);
//await page.goto(`${__dirname}/resources/host.html`);
const pdfString =await page.evaluate(({reportUrl, fonts}) =>
new Promise(async (resolve, reject) => {
// await GC.ActiveReports.Core.FontStore.registerFonts(fonts);
const report = new GC.ActiveReports.Core.PageReport();
await report.load(reportUrl);
const doc = await report.run();
const result = await GC.ActiveReports.PdfExport.exportDocument(doc, {fonts: fonts, info: {author: 'GrapeCity'}});
const reader = new FileReader();
reader.readAsBinaryString(result.data);
reader.onload = () => resolve(reader.result);
reader.onerror = () => reject('Error occurred while reading binary string');
}), {reportUrl: 'SimpleTable.rdlx-json', fonts: fonts});
const pdfData = Buffer.from(pdfString, 'binary');
fs.writeFileSync(`${__dirname}/out115.pdf`, pdfData);
console.log('done');
process.exit(0);
})();