What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
If doc.addHTML() fails, replace it with jsPDF’s maintained doc.html() method. addHTML is a legacy plugin API that jsPDF maintainers say is no longer supported; the replacement uses html2canvas and an asynchronous workflow. In a browser app, install and import the dependencies your build needs, wait for the render to finish, and check element size and image-origin rules if the PDF is blank or incomplete.
Why jsPDF addHTML fails
addHTML belongs to an older jsPDF HTML plugin. The maintainers have said they will no longer support fromHTML and addHTML. Old examples may still compile, but their callback and rendering assumptions can fail with newer jsPDF or html2canvas versions. The supported migration is doc.html().
That distinction matters because doc.html() does not simply rename the old call. It renders DOM content through html2canvas, which returns a Promise, and then adds the rendered result to a PDF. Your code needs to handle asynchronous completion, and the browser must be able to access the element and its resources.
| Legacy approach | Maintained approach |
|---|---|
doc.addHTML(element, callback) |
await doc.html(element, options) or use its callback |
| Relies on a legacy plugin and older rendering conventions | Uses jsPDF’s HTML method with html2canvas |
| May expect html2canvas to exist as a browser global | In module builds, resolve the optional dependency through your package setup |
Migrate to doc.html()
Install and import dependencies
In a module-based browser project, add jsPDF and the html2canvas package required by your package setup. jsPDF’s HTML method depends on html2canvas; if you pass an HTML string rather than a DOM element, jsPDF also identifies DOMPurify as an optional dependency. A package import does not necessarily create a global variable named html2canvas, so do not rely on a legacy script-tag example when using a bundler.
#1 Best Overall
![MixPad Free Multitrack Recording Studio and Music Mixing Software [Download]](https://m.media-amazon.com/images/I/71ltIxIuz1L._SL160_.jpg)
- Create a mix using audio, music and voice tracks and recordings.
- Customize your tracks with amazing effects and helpful editing tools.
- Use tools like the Beat Maker and Midi Creator.
- Work efficiently by using Bookmarks and tools like Effect Chain, which allow you to apply multiple effects at a time
- Use one of the many other NCH multimedia applications that are integrated with MixPad.
The example below targets an existing DOM element with the ID invoice. Run it in a browser after that element has been rendered and made visible.
import { jsPDF } from 'jspdf';
const element = document.querySelector('#invoice');
if (!element) {
throw new Error('Could not find #invoice');
}
const doc = new jsPDF();
await doc.html(element, {
margin: [10, 10, 10, 10],
autoPaging: 'text',
html2canvas: {
scale: 2,
useCORS: true,
windowWidth: element.scrollWidth,
windowHeight: element.scrollHeight
},
callback: (pdf) => pdf.save('invoice.pdf')
});This uses jsPDF’s callback to save after rendering. Keep the call inside an async function or an environment that supports top-level await. Alternatively, use the Promise flow and save after it resolves:
async function exportInvoice() {
const element = document.querySelector('#invoice');
if (!element) throw new Error('Could not find #invoice');
const doc = new jsPDF();
await doc.html(element, {
margin: [10, 10, 10, 10],
autoPaging: 'text',
html2canvas: {
scale: 2,
useCORS: true,
windowWidth: element.scrollWidth,
windowHeight: element.scrollHeight
}
});
doc.save('invoice.pdf');
}What the options do
marginsets the PDF page margins. The example uses 10 units on each side.autoPaging: 'text'asks the HTML renderer to paginate text content rather than treating the whole element as one page-sized image. Inspect the output for your layout, especially when content contains complex positioning.scalecontrols the html2canvas render scale. A higher scale can improve detail, but creates a larger canvas and may run into browser canvas limits on long pages.useCORS: trueasks html2canvas to attempt cross-origin image loading under CORS rules. It cannot override a server that does not permit cross-origin access.windowWidthandwindowHeightprovide the dimensions used for rendering. For long content, setting them to the element’sscrollWidthandscrollHeighthelps avoid capturing only the visible portion.callbackruns with the completed PDF in the sample. Saving there ensures the PDF is ready before the download begins.
Check the element and rendering context
Before adjusting PDF settings, confirm that the selected element exists when the call runs. A selector that returns null, an element hidden with CSS, or content that has not finished loading can produce an error or an incomplete capture. If your page fills the element asynchronously, call doc.html() only after that content is available.
html2canvas is Promise-based: calling html2canvas(element, options?) resolves to a canvas. This direct diagnostic helps separate a rendering problem from a jsPDF pagination or save problem:
import html2canvas from '@html2canvas/html2canvas';
const element = document.querySelector('#invoice');
if (!element) throw new Error('Could not find #invoice');
const canvas = await html2canvas(element, {
windowWidth: element.scrollWidth,
windowHeight: element.scrollHeight,
useCORS: true
});
console.log(canvas.width, canvas.height);If the direct canvas is blank or missing content, investigate element visibility, dimensions, assets, and browser rendering before changing PDF output options.
Troubleshoot common errors and bad output
addHTML is not a function, no callback, or failures after an upgrade
The code is calling the legacy API, or the old plugin is not present in the jsPDF build. Replace addHTML with doc.html() and update the control flow to wait for its asynchronous render. Older examples may pass an onrendered option to html2canvas; that callback convention does not match the current Promise-based API.
html2canvas is not defined or “You need either html2canvas or rasterizeHTML”
The legacy implementation checks for a global html2canvas or rasterizeHTML and throws if neither exists. In a bundled app, install and import the needed package or configure the supported jsPDF build so its optional dependency can be resolved. Do not assume that importing a module creates the browser global expected by old code.
Blank pages, partial canvas, or clipped content
Canvas size limits can cause an oversized render to come back blank or partially drawn without a useful exception. Set windowWidth and windowHeight from the target element’s scroll dimensions. If that still exceeds the browser’s practical canvas capacity, lower scale or render the document in smaller sections. Very tall pages are especially likely to stress canvas limits.
Recommended Free Tools
PDF styling differs from the webpage
html2canvas reconstructs an image from DOM elements and supported CSS; it is not a pixel-perfect browser screenshot. Its maintainers explain that CSS properties must be implemented individually, so complete CSS support is not possible. If a particular shadow, layout effect, or other property renders incorrectly, simplify or remove that effect and test again. When exact browser rendering is a requirement, use a real-browser rendering approach instead of expecting html2canvas to reproduce every CSS feature.
Rank #4
![DeskFX Free Audio Effects & Audio Enhancer Software [PC Download]](https://m.media-amazon.com/images/I/41fXbDohyuS._SL160_.jpg)
- Transform audio playing via your speakers and headphones
- Improve sound quality by adjusting it with effects
- Take control over the sound playing through audio hardware
Images disappear or the canvas is tainted
Images generally need to be same-origin or served with appropriate cross-origin permissions. useCORS: true can request CORS-enabled resources, but it cannot bypass the image host’s response policy. Serve images from your own origin, configure the asset server to permit the requesting origin, or use a proxy that is authorized to return those assets. Cross-origin iframes are a separate restriction: browser security prevents html2canvas from reading their contentDocument.
It works in a browser but fails in Node.js
html2canvas needs browser facilities such as window, document, and computed styles. It is a client-side library and cannot render a Node.js DOM as if it were a browser page. For server-side PDF or screenshot generation, run the page in a headless browser such as Puppeteer or Playwright and capture it in that browser context.
A reliable migration checklist
- Record the installed jsPDF and html2canvas versions so you can reproduce the behavior you are migrating from.
- Replace
addHTMLandfromHTMLusage withdoc.html(). - Install or configure html2canvas for the application’s module and bundler setup; include DOMPurify if you pass an HTML string and your setup requires it.
- Move saving into the render callback or after the awaited call completes.
- Check that the target element exists, is visible, and has finished loading its content before capture.
- Set render dimensions from
scrollWidthandscrollHeightfor content extending beyond the visible viewport. - Check image response headers and origins; treat cross-origin iframes as inaccessible to html2canvas.
- Lower render scale or divide extremely large content into sections if output is blank or clipped.
- Keep html2canvas in a browser runtime; use a headless browser for server-side rendering.
Or skip the browser setup
If the goal is to capture a public webpage as an image or PDF rather than export a specific live DOM element from your app, ScreenshotNeo offers a URL-based API. It is not a drop-in replacement for jsPDF’s doc.html() or a fix for a broken addHTML call; it is an alternative when you want a service to capture a page by URL. See the ScreenshotNeo website and API documentation.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsBest Value
![MixPad Multitrack Recording Software for Sound Mixing and Music Production Free [Mac Download]](https://m.media-amazon.com/images/I/51kaO82jYOL._SL160_.jpg)
- Mix an audio, music and voice tracks
- Record single or multiple tracks simultaneously
- Intuitive tools to split, trim, join, and many other editing features
- Loaded with audio effects including EQ, compression, reverb, and more.
- Load an audio file and export to all popular audio formats from studio quality wav to high compression formats
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpCookie banners are accepted and removed before capture, along with supported newsletter popups and chat widgets. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed; response headers identify the page verdict and billing status. An MCP server provides screenshot tools for AI agents, and the free plan includes 1,000 screenshots a month without a card; paid plans start at $5 for 3,000 screenshots. Sign up for 1,000 free screenshots a month with no card.
Frequently Asked Questions
Does jsPDF’s HTML method create searchable PDF text?
The html2canvas-based rendering path turns the page representation into canvas content, so do not assume its output preserves selectable or searchable text like a text-native PDF workflow.
Can html2canvas capture content inside a cross-origin iframe?
No. Browser security prevents it from reading a cross-origin iframe’s document. Capture accessible same-origin content or use a browser-side approach with access to the content.
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.
