What I decided with regards to Amplify was to follow the directions to create a Lambda function to host jsreport https://jsreport.net/learn/aws-lambda-serverless
Of course, with this method of deployment, I was not using the typical amplify pattern for adding a function, so the way to call this function follows a non-standard pattern. This is the code I use to call the lambda and render the report. Sure, it's probably not very secure because of the access keys, but it works.
import React from "react";
require('dotenv').config();
const AWS = require('aws-sdk')
const fs = require('fs')
const client = require('jsreport-client')
class RenderReport extends React.Component {
componentDidMount() { //this is a non-amplify way to call Lambda! const lambda = new AWS.Lambda({ //TODO region: 'us-east-1', accessKeyId: "xxxxxxxxx", secretAccessKey: "xxxxxxxxxxx" }) lambda.invoke({ FunctionName: 'myJsreportLambda', Payload: JSON.stringify({ renderRequest: { template: { name: 'invoice-main' }, data: this.props.data } }) }, (err, res) => { if (err) { return console.error(err) } const response = JSON.parse(res.Payload) if (response.errorMessage) { console.log(response.errorMessage) console.log(response.stackTrace) } else { //Create a Blob from the PDF Stream const file = new Blob( [Buffer.from(response.body, 'base64')], { type: 'application/pdf' }); //Build a URL from the file const fileURL = URL.createObjectURL(file); //Open the URL on new Window this.setState({ Report: fileURL }) } }) } render() { if (this.state != undefined) { return ( < div > < iframe id = "statement" src = { this.state.Report } title = "Statement" / > < /div> ); } else return null; }}
export default RenderReport;
