Is this just a warning in 3.5 or is it slowing down my pdf generation?
production jsreport instances should use enterprise scale license which doesn't limit the license key usage
Sadly switching from a manual (terrible) paging solution that was using PUG to render html to Handlebars and pdfUtils has increased generation time 10x.
Thank for the additional answers Jan Blaha! Very helpful and boost my confidence. I'm unable to share more code due to my company policies, if I get time I will try to create a simple playground that can reproduce the issue I was seeing.
I'm unable to email or share our code so I guess I'm out of luck unless we purchase a support package and demo the problem over a call.
My font size problem may have been related to the width/height problem I had after changing how I was rendering indexes. I'll have to circle back to that version of code and see if it was the root cause.
It was also very very very slow rendering speeds (or never finishing) when using {{component }} and had to remove 15+ components and just embed everything in my main template to increase render speed. I thought the components were supposed to help with speed? Specifically where I was rendering a Person type of object and it used a component called Attribute like 20 times, and then I was rendering thousands of Persons.
Im frequently getting this error in the studio but re-runing the request usually fixes it, there error is not very clear as to what or why its happening but its concerning that when I move these changes to production it will continue. Is this in my code? It seems to occur after a successful run on the next attempt.
I will have to check with the company if I can do that. In a crunch to finish this as I've been trying to get a product working for a month now.
I had another problem with my workaround but was luckily able to identify that for some reason having width: 100%, height: 100% on one of my components was making only one page of the content render. There were 4 sections that should be 32 pages long and it would only render 1 page of each section.
I wasn't able to get a playground example to reproduce the issue. I'm working around the problem by not merging my index template and instead just appending it though I lose table of content links this way. I also have to hardcode my font-size to 18pt font for it to be similar to my main template with the same font at 12pt. Its really strange.
I could reproduce with my local production dataset by removing completely random entries until it was small or fast enough to render with the correct font. Something about timing? with merging a template and using pdfUtils...
My attempt to create a playground: https://playground.jsreport.net/w/anon/qR7bX8Ap
I don't think it can be reproduced here due to requiring a long run time and large dataset.
Update: I was able to produce the problem with a 25 page file that was using a 1MB sample dataset and fix/create the issue by adding or removing a small amount of data.
I'm trying to create a 200~ page PDF that includes indexes, im using pdfUtils to merge the index template and look up page numbers. It seems like if there is too much data or it takes a long time the styles specified are not respected? If I cut my data down I get the correct font size. I have wait for network idle specified on the Main and Indexes templates. I tried creating a sample to show my problem but I dont think the playground allows the longer running samples?
The font is pulled in from a handlebars component named Styles:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href={{{style.fontUrl}}} rel="stylesheet">
<style>
{{asset "../Stylesheets/base.css"}}
{{asset "../Stylesheets/legendpage.css"}}
html, body {
font-size: {{style.fontSize}};
font-family: {{{style.fontFamily}}} !important;
line-height: {{style.lineHeight}} !important;
}
...
The Main template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>{{pdfTitle}}</title>
{{component "./Styles"}}
</head>
<body>
...
{{childTemplate (htmlTemplate "./Indexes")}}
...
Here is something of an index template:
{{component "./Styles"}}
...
<section>
...
<h3>{{header}}</h3>
<ul>
{{#each entries}}
<li>
<span>{{label}}</span>
{{#each pageRef}}
<span>{{pageNumber}}</span>
{{/each}}
</li>
{{/each}}
</ul>
</section>
{{/each}}
Wrong font size on page numbers:
profile:
If I run my very small sample dataset It appears to render the font sizes fine:
We are creating a directory, and the section title is placed in the header along with the first and last subsection header something like:
"First subsection on page" <------> "Section title" <-----> "Last subsection on page"
There is also disclaimer content and page number in the footer.
We need some of the newer experimental features of css like "position: running(key)", "content: element(key)", "content: counter(page)", and "@page" media. I'm looking into Paged.js which appears to support these.
I dug a bit more and can confirm chromium does not support these yet.
I've been looking into working around this problem using css but it appears what I'm using is not recognized by jsreports or maybe chromium yet.
Can you confirm that I cannot use css like below to create header/footer and page numbers?
@page {
size: A4;
margin: 2cm;
@bottom-right-corner {
content: "Page " counter(page);
border: solid green;
}
@top-center {
font-size: 16px;
content: "Page title that could be dynamically created";
}
}
reference: https://www.w3.org/TR/css-page-3/#populating-margin-boxes
Does that mean any usage of pdfUtils will strip the tags? Its seems even if I embed my cover page template logic into my main template I still dont get the tags, is this because im using the pdfUtils to merge a header/footer template and/or a table of contents?
Do you have an eta of when the team will be getting around to this functionality, is it high on the roadmap?
Do you know if there is a limitation in pdfUtils around this functionality? I'm using pdfUtils to prepend a cover page that is an image. If I run the template for just the cover page it gets the accessibility tags, but when I run my main template and prepend the cover page template it doesn't seem to have tags.
Something like this: https://playground.jsreport.net/w/anon/lhK7cf6Z
Note: I cant seem to get the online playground to generate the tags in any scenario. It only works for me locally. Maybe due to the --export-tagged-pdf arg im still passing, or my version being 3.4.1 and the playground is version: 3.2.1 with jsreport version: 3.2.0.
Oh this is fantastic, if not a bit weird...
Having text before the image does appear to make the alt and aria-label tags work!
I also appear to need to actually download the pdf instead of try and use a screenreader on the preview in jsreports studio.
Though it doesn't detect the text which is strange.
I will look into this further, thank you so much Jan!
Good morning Jan Blaha,
I could use some more directions on how to go about this. We are using jsreport with Docker.
I'm having some trouble figuring out how to find a download and the correct version of chromium using npm.
I was able to do a npm i chromium which gives me '97', but I cant seem to find a '101' version available.
I tried this, using the latest linux revision i found here:
#Dockerfile
FROM jsreport/jsreport:3.4.1-full
...
ENV NODE_CHROMIUM_REVISION=978519
RUN npm i chromium
...
I'm not sure what to set the exe path to though, I assumed something like /app/node_modules/chromium/.
I also attempted to override the chromium version being used by puppeteer:
#Dockerfile
FROM jsreport/jsreport:3.4.1-full
...
ENV PUPPETEER_CHROMIUM_REVISION=978519
RUN npm i puppeteer
...
#jsreport.config.json
...
"chrome-pdf": {
"launchOptions": {
"args": ["--no-sandbox", "--export-tagged-pdf", "--force-renderer-accessibility"]
},
"strategy": "dedicated-process",
"timeout": 7200000
}
...
No errors but I still don't have accessible images in PDF so it may not have done anything.
Thank you for getting back to me so quickly Jan Blaha,
Reading that article from 2020 I would hope its fully supported almost 2 years later, I noticed it states:
"This feature also works with Chrome Headless when you use both the --print-to-pdf and --export-tagged-pdf flags."
and I've tried adding them to my config:
"extensions": {
"chrome-pdf": {
"launchOptions": {
"args": ["--print-to-pdf", "--export-tagged-pdf"]
}
}
}
but this causes an error in chromium (I tried with --no-sandbox as well).
Report "directoryTemplate" render failed.
Failed to launch the browser process!
[0307/181932.010233:ERROR:headless_shell.cc(199)] Print to PDF is disabled when remote debugging is enabled.
TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md
Error: Failed to launch the browser process!
[0307/181932.010233:ERROR:headless_shell.cc(199)] Print to PDF is disabled when remote debugging is enabled.
TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md
at onClose (/app/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserRunner.js:229:20)
at Interface.<anonymous> (/app/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserRunner.js:219:68)
at Interface.emit (node:events:532:35)
at Interface.emit (node:domain:537:15)
at Interface.close (node:readline:586:8)
at Socket.onend (node:readline:277:10)
at Socket.emit (node:events:532:35)
at Socket.emit (node:domain:537:15)
at endReadableNT (node:internal/streams/readable:1346:12)
at processTicksAndRejections (node:internal/process/task_queues:83:21)
The history of that flag is a bit confusing per this PR it was merged awhile ago to puppeteer but subsequently removed as it was to be supported by default and this bug says its always enabled be default as of 3 days ago. This chromium bug was also fixed saying headless will always include tags last Nov.
Do you know of any workarounds to get the accessibility tags into the PDF?
Otherwise I just need to watch this and hope it reaches 101 soon? Once it does will jsreports be using it right away or do I need to request an update?
Thank you for your help with this issue!
We need to make our PDFs 508 compliant and are currently subscribed to jsreports and are using chrome-pdf and handlebars.
The first thing I tried to do was give images descriptive text for a screen reader to pick up but it does not appear to be making it from html to pdf format.
Here is a simple example:
https://playground.jsreport.net/w/anon/kUoMvfkO
Using a mac I enable VoiceOver in the system settings to test if the PDF is accessible and it will read out the img as "unlabeled image, image. You are currently on an image."
Am I doing something wrong? Can images be made accessible in the PDF? Is there a workaround?
I'm looking for the same answer, for example when I set the 'alt' tag, the 'aria-label', the 'title', or the 'label' field on a html element such as an <img> when I render to html a screen reader can find the tag just fine, but after chrome-pdf processes and I look at the result in the studio the image is an unnamed image.