Posts made by Edward Felsenthal

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;

Hi Jan,

I did get it to work without too much difficulty. It requires that I get .ttf font files from somewhere for each font I want to use. I don't recall where I got them, but here is the process once I had the .ttf files.

In the jsreport-aws-lambda-starter-kit/data folder create a subfolder called fonts like
jsreport-aws-lambda-starter-kit/data/fonts

Then put your .ttf files in that folder.
Also add a file called fonts.conf into the same fonts folder with the contents below:
<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
<dir>/var/task/data/fonts/</dir>
<cachedir>/tmp/fonts-cache/</cachedir>
<config></config>
</fontconfig>

Note that /var/task is created by Lambda but is not visible to you.

Then in the index.js file add this line after the line let jsreport

process.env.FONTCONFIG_PATH='/var/task/data/fonts'

After that, re-run node createLambdaPackage.js per https://jsreport.net/learn/aws-lambda-serverless

Then (re) upload the zip file to your lambda function. With the addition of the .ttf files, your project will probably get a message like "The deployment package of your Lambda function "xxxxxJsreport" is too large to enable inline code editing. However, you can still invoke your function." This is unpleasant, but the fonts do work now. Here showing a unique font to prove that it works.

.invoice-box {
...
font-family: 'Goudy Stout', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}

I am using jsreport hosted in AWS Lambda. I can render the report in Times New Roman font when running it from JSReport Studio on http://localhost:5488, but after deploying to lambda and running from my nodejs project, yes the .css file containing the request for Times New Roman font is active, but that particular font doesn't render. I don't understand why and not sure how to correct.

.invoice-box {
...
font-family: 'Times New Roman', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}

OK, I have tried to follow the code you provide, but not really any luck yet. The screen prints

report has run: {}

If I debug the state.Report, it does show a PromiseState of "fulfilled"
I couldn't find any example of using jsreport with Amplify ReactJS on the internet so I wrote this code.
I think I'm missing some code and not sure how to write it.

import React from "react";
const client = require('jsreport-client')('http://localhost:5488/studio/templates/SJVbqZr9f')
class RenderReport extends React.Component {

componentDidMount() {
    var report = "";
    report = this.doRender();
    this.setState({Report: report});
  }
  doRender = async() => {
    try {
        async function renderReport () {
            const res = await client.render({
                template: {
                content: 'hello {{someText}}',
                recipe: 'html',
                engine: 'handlebars'
                },
                data: { someText: 'world!!' }
            })
            
            const bodyBuffer = await res.body()
            const report = bodyBuffer;

            // this will re render the view with new data
            return report;

            }
        }
        catch(err)
        {
            
            console.log(err);
            return(err);
        }
    }

    render() {
        if(this.state != undefined)
        {
        const reports = this.state.Report;
      
        return (
          <div>
       
              <div>report has run: {JSON.stringify(this.state.Report)}</div>

          </div>
        );
        }
        else
        return(<div>report has not run</div>);
    }

}
export default RenderReport;

jsreport looks like what I want to create statements in my amplify app. Is there any help to make this work? It's OK with me if the report isn't actually part of my app, although that would be preferable. I need to be able to load app data into a report template and have it render for the user who can then download it to PDF.

Edit: I think I see one solution... use the API to the hosted report server for this purpose.