I found the solution! It turns out the issue was that the launch options needed to be set in the library.
Here's the working code:
this.jsreport.use(JsReportChromePdf({
launchOptions: {
headless: true,
args: ["--no-sandbox", "--disable-setuid-sandbox"]
}
}));
Adding launchOptions fixed the problem. Hope this helps anyone facing the same issue! Here the reference Failed to launch the browser process no usable sandbox
Hi everyone,
I'm having trouble running JSReport in a Docker container. I keep getting the following error:
ERROR [ExceptionsHandler] Failed to launch the browser process! undefined
[74:74:0130/095024.337607:ERROR:zygote_host_impl_linux.cc(101)] Running as root without --no-sandbox is not supported. See https://crbug.com/638180.
Error: Failed to launch the browser process! undefined
2025-01-30 09:50:24 [74:74:0130/095024.337607:ERROR:zygote_host_impl_linux.cc(101)] Running as root without --no-sandbox is not supported. See https://crbug.com/638180.
I have already added the --no-sandbox and --disable-dev-shm-usage flags in my template configuration, but the issue persists.
My setup:
Node.js version: 22.13.1
NestJS version: 10
JSReport setup:
* ``` @jsreport/jsreport-core
* ``` @jsreport/jsreport-handlebars
* ``` @jsreport/jsreport-chrome-pdf
* ``` @jsreport/jsreport-pdf-utils
* ``` @jsreport/jsreport-assets
* ``` @jsreport/jsreport-scripts
* ``` @jsreport/jsreport-fs-store
Dockerfile
FROM node:22.13.1
# GET HOUR ZONE
ENV TZ=America/Tegucigalpa
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
RUN apt-get clean && apt-get update && apt-get install -y locales
RUN locale-gen en_US.UTF-8
ENV LANG en_US.UTF-8
ENV LANGUAGE en_US:en
ENV LC_ALL en_US.UTF-8
RUN apt-get update && \
apt-get upgrade -y && \
apt-get install -y --no-install-recommends \
software-properties-common \
wget \
gnupg \
git \
curl \
make \
build-essential \
gconf-service \
libgbm-dev \
libdrm2 \
libatk-bridge2.0-0 \
libxkbcommon0 \
libatspi2.0-0 \
libasound2 \
libatk1.0-0 \
libc6 \
libcairo2 \
libcups2 \
libdbus-1-3 \
libexpat1 \
libfontconfig1 \
libgcc1 \
libgconf-2-4 \
libappindicator3-1 \
libgdk-pixbuf2.0-0 \
libglib2.0-0 \
libgtk-3-0 \
libnspr4 \
libpango-1.0-0 \
libpangocairo-1.0-0 \
libstdc++6 \
libx11-6 \
libx11-xcb1 \
libxcb1 \
libxcomposite1 \
libxcursor1 \
libxdamage1 \
libxext6 \
libxfixes3 \
libxi6 \
libxrandr2 \
libxrender1 \
libxss1 \
libxtst6 \
ca-certificates \
fonts-liberation \
libappindicator1 \
libnss3 \
lsb-release \
xdg-utils && \
curl -sSL https://dl.google.com/linux/linux_signing_key.pub | apt-key add - && \
echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google.list && \
apt-get update && \
apt-get install -y --no-install-recommends google-chrome-stable && \
apt-get clean && \
rm -rf /var/lib/apt/lists/*
# Install fonts and necessary packages
RUN apt-get update && apt-get install -y \
fontconfig \
fonts-dejavu-core \
ttf-mscorefonts-installer \
--no-install-recommends
# Set the working directory
WORKDIR /PatmedServiceReport/src/app
# Copy package.json and package-lock.json
COPY package*.json ./
# Install dependencies
RUN npm install
# Install Playwright and browsers
RUN npx playwright install
# Copy the rest of the application files
COPY . .
# Build the application
RUN npm run build
# Expose the necessary port
EXPOSE 3333
# Set the entry point for the container
CMD [ "node", "dist/main" ]
Template configuration
chrome: {
marginTop: '15px',
marginBottom: '90px',
format: 'Letter',
printBackground: true,
launchOptions: {
args: ["--no-sandbox", "--disable-dev-shm-usage"]
}
}
Service using JSReport
import { Injectable, OnModuleInit } from '@nestjs/common';
import * as JsReport from '@jsreport/jsreport-core';
import * as JsReportHandlebars from '@jsreport/jsreport-handlebars';
import * as JsReportChromePdf from '@jsreport/jsreport-chrome-pdf';
import * as JsReportPdfUtils from '@jsreport/jsreport-pdf-utils';
import * as JsReportAssets from '@jsreport/jsreport-assets';
import * as JsReportScripts from '@jsreport/jsreport-scripts';
import * as JsReportFSStore from '@jsreport/jsreport-fs-store';
@Injectable()
export class ReportService implements OnModuleInit {
private jsreport: any;
async onModuleInit() {
this.jsreport = JsReport();
// Registrar extensiones
this.jsreport.use(JsReportHandlebars());
this.jsreport.use(JsReportChromePdf());
this.jsreport.use(JsReportPdfUtils());
this.jsreport.use(JsReportAssets());
this.jsreport.use(JsReportScripts());
this.jsreport.use(JsReportFSStore());
await this.jsreport.init();
}
async generateReport(template: any, data: any) {
const response = await this.jsreport.render({
template,
data,
});
return response.content;
}
}
Also I tried this, but doesnt work chrome-pdf
engine: 'handlebars',
recipe: 'chrome-pdf',
content: templateHtml,
helpers: readFileSync(
join(__dirname, '..', '..', '..', 'views/solicitudes/helpers.js'),
'utf8'
),
chrome: {
marginTop: '15px',
marginBottom: '90px',
marginLeft: '0',
marginRight: '0',
format: 'Letter',
printBackground: true
},
"extensions": {
"chrome-pdf": {
"launchOptions": {
"args": ['--no-sandbox', '--disable-setuid-sandbox']
}
}
},
pdfOperations:
I've tried several things, but I still get the error about the browser process failing to launch.
Does anyone know what might be causing this issue? Could it be related to how the Chrome browser is installed in my Docker container? demo stackblitz for download
Please help, I want to deploy this in a development environment to show a demo of the library to my bosses, but I don't know how to fix this.
Hello! Were you able to find a way to do this? I have a case where I need to iterate through the content of a PDF to identify the element that comes before a signature. This way, I can create an automatic page break and prevent the signature from being left alone on a page with only the footer.
Hi!
First of all, I want to sincerely thank you for your help with the evaluation of the last page in my document. I truly appreciate the support!
Now, I hope I’m not asking for too much, but I need help with another issue.
I’m using jsreport and I need to apply different margins to the pages, as the margins for the last page should be different from the previous ones. Specifically:
The footer changes on the last page due to unique content displayed only there.
The margin for the header on the first page is also different from the rest of the pages.
The bottom margin should change only on the last page.
I have tried using page:first and page:last with direct margin adjustments in the content container, but it doesn't seem to work as expected, and the content overlaps.
Any suggestions or best practices would be greatly appreciated!
Hello,
I'm working with JSReport integrated into my NestJS project, using chrome-pdf and pdf-utils for PDF generation. I am using Handlebars (hbs) as my template engine. I need help with two things:
I want to show a footer on every page, but on the last page, I need to include additional content in the footer. I am already using a helper function to get the page number, but the footer is not showing on all pages, or the additional content is not displaying only on the last page.
Also, the total page count returned in the PDF is incorrect. Could you guide me on how to fix this issue?
Here is my current setup:
import { Controller, Get, Res } from '@nestjs/common';
import { Response } from 'express';
import { ReportService } from 'reportes/services/jsReport.service';
import { readFileSync } from 'fs';
import { join } from 'path';
@Controller('report')
export class ReportController {
constructor(private readonly reportService: ReportService) { }
@Get()
async getReport(@Res() res: Response) {
const templateHtml = readFileSync(
join(__dirname, '..', '..', '..', `views/solicitudes/solicitud-biopsia-report.hbs`),
'utf8'
);
const template = {
engine: 'handlebars',
recipe: 'chrome-pdf',
content: templateHtml,
helpers: readFileSync(
join(__dirname, '..', '..', '..', 'views/solicitudes/helpers.js'),
'utf8'
),
chrome: {
marginTop: '15px',
marginBottom: '90px',
marginLeft: '0',
marginRight: '0',
format: 'Letter',
printBackground: true,
},
pdfOperations: [
{
type: 'merge',
template: {
engine: 'handlebars',
recipe: 'chrome-pdf',
content: readFileSync(
join(__dirname, '..', '..', '..', 'views/solicitudes/footer.hbs'),
'utf8'
),
helpers: readFileSync(
join(__dirname, '..', '..', '..', 'views/solicitudes/helpers.js'),
'utf8'
)
},
mergeToFront: false,
}
],
};
const data = {};
const report = await this.reportService.generateReport(template, data);
res.setHeader('Content-Type', 'application/pdf');
res.send(report);
}
}
Footer Template (footer.hbs):
<html>
<head>
<style>
* {
box-sizing: border-box;
}
html, body {
margin: 0px;
padding: 0px;
}
.footer {
width: 100%;
padding-bottom: 20px;
border-top: 1px solid black;
}
</style>
</head>
<body>
{{#each $pdf.pages}}
<div style="page-break-before: always;"></div>
<footer class="footer">
{{#if @last}}
<h1>This is a disclaimer (shown only on the last page)</h1>
{{/if}}
<span>Page {{getPageNumber 4}} of {{getTotalPages ../$pdf.pages}}</span>
</footer>
{{/each}}
</body>
</html>
Helper Functions:
function getPageNumber(pageIndex) {
if (pageIndex == null) {
return '';
}
return pageIndex + 1;
}
function getTotalPages(pages) {
if (!pages) {
return '';
}
return pages.length;
}
Issues:
The footer does not appear on all pages, and the additional content only appears on the last page.
The total page count is incorrect.
Environment:
Node.js version: 22.13.1
JSReport version: 4.
Note: The template works in the JSReport playground, but not in my NestJS project. https://playground.jsreport.net/w/anon/0ft5SBMO
Can anyone help me with this?
Thanks in advance!