Reportlayer NPM

ReportLayer JavaScript SDK

Embed template-driven PDF documents in your web application. This library is for use with any JavaScript-based web application, and includes React components as well.

This library is intended for use with a ReportLayer account. For a free ReportLayer account, go to https://www.reportlayer.com.

Examples

Show a download link (React)

import React, { Component } from 'react';
import { DownloadLink } from 'reportlayer/react';

const API_KEY = '<Your API key from your ReportLayer dashboard>';
const TEMPLATE_ID = '<The report template ID, from your ReportLayer dashboard>';

class App extends Component {
  render() {
    return (
      <div>
        <DownloadLink templateId={TEMPLATE_ID} apiKey={API_KEY}>
          Click me to download the report
        </DownloadLink>
      </div>
    );
  }
}

export default App;

Display a report on-screen (React)

import React, { Component } from 'react';
import { DocumentView } from 'reportlayer/react';

const API_KEY = '<Your API key from your ReportLayer dashboard>';
const TEMPLATE_ID = '<The report template ID, from your ReportLayer dashboard>';

class App extends Component {
  render() {
    return (
      <div>
        <DocumentView templateId={TEMPLATE_ID} apiKey={API_KEY} />
      </div>
    );
  }
}

export default App;

Display a report on-screen (plain JavaScript)

import reportlayer from 'reportlayer';

const apiKey = '<Your API key from your ReportLayer dashboard>';
const templateId = '<The report template ID, from your ReportLayer dashboard>';

const data = { /* ...your data to populate the report */ };

const containerDomEl = document.querySelector('.report-container');  // Target container element

reportlayer.init(apiKey); // Only needs to be done once
reportlayer.render(containerDomEl, templateId, data)

Download a report to a file (plain JavaScript)

import reportlayer from 'reportlayer';

const apiKey = '<Your API key from your ReportLayer dashboard>';
const templateId = '<The report template ID, from your ReportLayer dashboard>';

const data = { /* ...your data to populate the report */ };

reportlayer.init(apiKey); // Only needs to be done once
reportlayer.download(templateId, data);