Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
If html2canvas in Angular throws Error parsing CSS component value, unexpected EOF, the error means its CSS value parser reached the end of input before finding the value it expected. It does not identify the offending element or CSS declaration, and the available evidence does not support one universal Angular fix. Record the full stack and environment, reduce the capture target until the error stops, then test a narrow change to an identified property in html2canvas’s cloned document.
First identify which failure you have
CSS-related html2canvas failures are not interchangeable. Read the exact console message and stack before changing styles or configuration:
Error parsing CSS component value, unexpected EOF: a CSS component-value parse reached end-of-input before obtaining the requested value. The message describes the parser state; it does not name the declaration that triggered it.CSSStyleSheet.cssRulesaccess denied: the failure concerns access to a stylesheet’s rules. Treat it as a stylesheet-access problem, not as the EOF parser exception.- A Content Security Policy (CSP) violation: the browser reports that an action, such as applying an inline style, was blocked by policy. Diagnose the policy violation separately.
- The promise resolves but the image looks wrong: this is a rendering-support or fidelity issue, not necessarily a parser exception. html2canvas reconstructs a rendering from the DOM and CSS it understands; it is not a pixel-perfect capture of the browser’s rendered screen.
Do not start by changing CORS, CSP, or every stylesheet. Those changes target different symptoms and can add risk without addressing the value parser.
Free tools Windows power users keep installed
One-click scans. No signup required.
Collect the details needed to reproduce it
Before changing the component, record the complete error and stack, plus:
#1 Best Overall
- Installed html2canvas and Angular versions.
- Browser and browser version.
- Whether the target is inside an Angular Elements web component or Shadow DOM.
- Whether the target includes SVG or output from a third-party charting library.
- Whether a smaller descendant of the target can be captured successfully.
These details matter because a reported failure in one environment does not establish a general Angular defect. For example, a report opened on November 13, 2020 described html2canvas 1.0.0-rc.7, Chrome 86, macOS, an Angular Elements web component, and a Highcharts SVG chart. The author reported the EOF error while the local application worked, but did not confirm the cause or a fix. It is a useful example of why the environment and capture target need to be recorded, not proof that Highcharts, Angular Elements, or any particular style is responsible.
Isolate the element or style that triggers the parser
- Confirm the exact message. Copy the full error and stack. If the stack and text identify CSS component-value parsing, continue here. If the message instead names inaccessible
cssRulesor CSP, use the separate branches below. - Capture a smaller target. Temporarily call html2canvas on a simpler descendant rather than the whole component. If that works, add omitted subtrees back one at a time. If it still fails, reduce the target further. This is a diagnostic method, not a documented universal repair.
- Compare computed styles. Once removing a subtree stops the exception, inspect the computed styles of the remaining elements and narrow down the suspect element or value. A parser-level failure can point toward a value to investigate, but the message alone cannot tell you which application declaration is at fault.
- Change one identified property in the clone. Test an override or omission only after isolating a suspect. Change one property at a time, then repeat the capture in the affected browser. If the error persists, revert that test and continue narrowing the target rather than stripping unrelated styles.
A minimal capture can be made with the same target element your application uses:
import html2canvas from 'html2canvas';
const target = document.querySelector('#capture-target');
if (!target) {
throw new Error('Capture target #capture-target was not found');
}
html2canvas(target).then((canvas) => {
document.body.appendChild(canvas);
}).catch((error) => {
console.error('html2canvas capture failed:', error);
});Use the smallest relevant target first; the example does not imply that a particular selector or Angular lifecycle hook is causing your failure.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteTest a narrow change in html2canvas’s clone
html2canvas documents onCopyProperty for skipping or overriding a copied CSS property and onclone for modifying the cloned document without changing the original page. These hooks let you test a targeted change after you have identified a suspect. The documentation does not promise that either hook will automatically repair the EOF exception.
For an isolated test, an onclone callback can alter the clone’s matching element and property. Replace the selector and property below with the ones your reduction process identified; do not apply a broad override as a guess:
html2canvas(target, {
onclone: (clonedDocument) => {
const suspect = clonedDocument.querySelector('.identified-suspect');
if (suspect) {
suspect.style.removeProperty('identified-property');
}
}
}).then((canvas) => {
document.body.appendChild(canvas);
}).catch((error) => {
console.error('html2canvas capture failed:', error);
});The selector and property are deliberately names you must replace after identifying the suspect. If your issue is not tied to a particular property, this is not a meaningful fix. Prefer changing only the capture clone so the diagnostic does not alter the live application’s appearance.
Rank #3
The documented ignoreElements option and data-html2canvas-ignore attribute can exclude elements from a capture. They may help confirm whether a subtree is involved or intentionally omit it, but they are not established fixes for a CSS component-value parse error. Likewise, onError reports failed resources, while useCORS and proxy concern cross-origin image loading; use them only when the failure matches that scope.
Handle stylesheet-access errors separately
If the actual message says CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet, do not treat it as an EOF value parsing problem. A separate report opened April 8, 2020 described Angular 9.1.0 with SCSS, html2canvas 1.0.0-rc.5, Firefox 74.0.1, and Windows 10 Pro. The report asked about CORS but did not confirm a cause or resolution.
For this branch, preserve the exact error and identify which stylesheet is involved. Cross-origin image options such as useCORS or proxy are documented for loading images; they should not be assumed to grant access to a stylesheet’s cssRules. Avoid changing configuration until you have matched the actual failing resource and the browser’s reported access restriction.
Handle CSP violations separately
If browser tools report a CSP violation, inspect the blocked directive and resource in the browser’s console or security report and compare them with your site’s policy. An issue opened August 19, 2025 describes an Angular user with a strict style-src 'self' 'nonce-XXXX' policy reporting dynamically applied inline styles blocked by CSP. The issue body asks about nonce support or a workaround; it does not establish a confirmed repair.
Do not infer that weakening the policy or adding unsafe-inline is safe or proven to fix html2canvas. First establish that the CSP report corresponds to the failed capture, then assess any policy change against your application’s security requirements.
When the capture succeeds but the result is incomplete
html2canvas implements CSS properties individually and does not claim full CSS support. A property it does not support, or supports incompletely, can produce visual differences. That is distinct from the exact EOF parser exception: an unsupported property does not automatically cause that exception.
If capture completes but a visual feature is missing or different, compare the result against html2canvas’s supported-features information and FAQ, then build a small reproduction of the discrepancy. The library reconstructs an image from the DOM and supported styles rather than taking a true browser screenshot, so a successful capture is not a guarantee of pixel-for-pixel fidelity.
Troubleshooting checklist
- Same EOF message after narrowing the target: reduce it further and record the stack and computed styles of the remaining elements. The message itself does not reveal the offending declaration.
- Failure only in a web component: record whether the target is an Angular Elements or Shadow DOM component and test a smaller descendant. A historical report shows this situation has occurred, but does not establish a general web-component fix.
- Failure appears with an SVG chart: compare captures with and without the chart subtree. Do not assume the chart library is at fault unless the reduction test isolates it.
- Only certain styles look wrong: check html2canvas’s supported CSS features; treat the issue as output fidelity unless the call also throws a parser error.
- Stack mentions stylesheet access: investigate the stylesheet-access branch rather than the EOF branch.
- Browser reports CSP: identify the blocked directive and assess the policy separately; do not weaken it as a blind workaround.
- Image or other resource fails to load: use resource diagnostics and the relevant documented image-loading options only if the error actually concerns that resource.
Or skip the browser setup
If you need a clean screenshot rather than an in-browser html2canvas reconstruction, ScreenshotNeo offers a website screenshot API and MCP server. A single GET request returns a PNG, JPEG, WebP, or PDF; see the ScreenshotNeo website and API documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpCookie and consent banners, newsletter popups, and chat widgets are removed before capture. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed; responses identify the page verdict and billing status in headers. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Sign up free for 1,000 screenshots a month with no card.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
