What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Generate the PDF in the browser, turn it into a Blob, and upload it to your application server with FormData. The server—not a mailto: link—should send the email and attach the file. For a one-off, user-controlled message, let the user download the PDF and attach it in their mail app.
How the PDF gets from the browser into an email
html2canvas renders an element from the page’s DOM and styles into a canvas. jsPDF can put that rendered image into a PDF and expose the PDF as a binary Blob. The browser can upload that blob as a multipart form field; your server validates it and hands it to your email integration as an attachment. See the html2canvas overview, jsPDF output documentation, MDN’s Blob reference, and MDN’s multipart/form-data guide.
- Render the target DOM element with
html2canvas. - Add the canvas image to a
jsPDFdocument, choosing a page size and scale that suit the content. - Get the PDF as a
Blob. - Append it to
FormDatawith a filename and POST it to an authenticated server endpoint. - On the server, authorize the request, validate and limit the upload, then send the attachment through your email delivery integration.
- Show success only when the server returns the state your application means by “sent”—for example, accepted for delivery or completed.
Generate a PDF Blob in the browser
The following example assumes html2canvas and jsPDF are already loaded and available as globals. Pin and check the versions used by your application: jsPDF output signatures can vary by installed version, so confirm the blob output call against that version’s documentation. This example renders one element onto one landscape A4 page; content taller than the page needs a pagination strategy rather than silently relying on a single-page image.
async function makePdfBlob(element) {
if (!element) throw new Error('The element to export was not found.');
const canvas = await html2canvas(element, {
scale: window.devicePixelRatio || 1,
useCORS: true,
backgroundColor: '#ffffff'
});
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({ orientation: 'landscape', unit: 'mm', format: 'a4' });
const pageWidth = pdf.internal.pageSize.getWidth();
const pageHeight = pdf.internal.pageSize.getHeight();
const ratio = Math.min(pageWidth / canvas.width, pageHeight / canvas.height);
const imageWidth = canvas.width * ratio;
const imageHeight = canvas.height * ratio;
const x = (pageWidth - imageWidth) / 2;
const y = (pageHeight - imageHeight) / 2;
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', x, y, imageWidth, imageHeight);
return pdf.output('blob');
}
async function downloadPdf() {
const blob = await makePdfBlob(document.querySelector('#report'));
const objectUrl = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = objectUrl;
link.download = 'report.pdf';
link.click();
setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
}Here the canvas is scaled to fit within one A4 landscape page, preserving its proportions; the remaining space is centered. If you need portrait paper, another paper size, margins, multiple pages, or selectable text, adjust the PDF construction deliberately. A canvas image in a PDF is raster content, not the original live DOM.
#1 Best Overall
Upload the Blob to your server
Send the blob as a named file in FormData. Do not manually set the request’s Content-Type: the browser supplies the multipart boundary.
async function emailReport(reportElement, recipient) {
const pdfBlob = await makePdfBlob(reportElement);
const form = new FormData();
form.append('pdf', pdfBlob, 'report.pdf');
form.append('recipient', recipient);
const response = await fetch('/api/reports/email', {
method: 'POST',
body: form,
credentials: 'same-origin'
});
if (!response.ok) {
const message = await response.text();
throw new Error(`Email request failed (${response.status}): ${message}`);
}
return response.json();
}Protect the endpoint with your application’s authentication and authorization rules, and apply CSRF protections appropriate to your setup. A recipient supplied by the browser is input, not proof that the signed-in user may send to that address. The server should enforce upload-size limits, validate the received bytes rather than trusting a filename or MIME label, and avoid logging the PDF contents. Use idempotency or another duplicate-send safeguard if clients may retry after a timeout. These are application security and reliability precautions; the exact controls depend on your server and email integration.
Server-side email is an integration point
The browser upload completes the file handoff; it does not send email by itself. Your backend must parse the multipart request, verify the user and destination, enforce limits, and pass the accepted file bytes and filename to your chosen mail delivery integration as an attachment. The provider’s attachment API, size limits, delivery semantics and error handling are provider-specific. Do not return success merely because the browser finished uploading if the server has not accepted the email operation.
Choose the right sharing method
| Approach | Fits when | Trade-off |
|---|---|---|
| Upload, then send from the backend | The application should send automatically or control the workflow. | Requires a secured backend endpoint, validation and an email delivery integration. |
| Download and attach manually | The user should decide whether and when to send a one-off file. | The user must find the downloaded PDF and attach it in their mail app. |
mailto: handoff |
You want to prefill a recipient, subject or message for a user-operated email. | It does not provide a standard, reliable way to attach the browser’s in-memory Blob. |
Can a mailto link attach the generated PDF?
No standard mailto: parameter attaches a Blob held in browser memory. A mailto: URL can prefill supported message fields and open the user’s mail client, but it is not a file-upload or attachment transport. The MDN URI schemes reference documents the scheme; do not imply that adding a PDF Blob URL or data URL will attach the file. For manual sending, download the PDF and tell the user to attach it. For automated sending, upload it to your backend.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Preview or download without uploading
For local preview, create a blob URL with URL.createObjectURL(blob) and open it or place it in an iframe. For a download, use an anchor with a download filename as shown above. Revoke the object URL after the user has had a chance to open or save the document; revoking it immediately can make the file unavailable. See MDN’s blob URL reference.
Avoid converting large PDFs to base64 data URLs unless a specific integration requires it. Data URLs encode the bytes into a URL, and browser limits vary; they also make it easier to accidentally expose document contents through logs or copied links. See MDN’s data URL reference.
Rendering and upload troubleshooting
Remote images are missing or the canvas throws a security error
A cross-origin image can taint a canvas. useCORS: true only helps when the remote image server permits the request with suitable CORS headers; it cannot override that server’s policy. If you control the content, configure its CORS response. Otherwise, a server-side proxy may be appropriate. Do not treat allowTaint as a way to read pixels from a tainted canvas. See the html2canvas FAQ.
The PDF does not match the page’s appearance
html2canvas reconstructs the result from DOM and style information; it is not a literal capture of the browser compositor, and it supports CSS selectively. Check the project’s CSS and rendering documentation, simplify unsupported styling where feasible, and compare the generated output with the intended layout. Print-specific markup or styles can make a dedicated export view easier to control.
Recommended Free Tools
A very long page becomes blank or is cut off
Canvas dimension and area limits vary across browser engines, operating systems, GPUs and devices; there is no universal safe maximum. Large captures may render partially or fail. Split long content into sections or pages, or choose a different rendering architecture when documents are too large for a browser canvas. The html2canvas FAQ discusses these variable limits.
An iframe or embedded plugin is absent
Browser same-origin restrictions prevent the library from reading a cross-origin iframe’s contents, and plugin content is not rendered by html2canvas. If that content must appear, it needs a permitted export path of its own or a rendering approach that can access it lawfully and technically.
The upload is rejected or the user gets a misleading success state
Check the server’s size limit, multipart parser configuration, authentication and authorization, and the response returned by the email integration. Surface a useful failure to the user and keep retries from causing duplicate sends. The client filename and claimed content type are not sufficient validation; handle the received file on the server.
The code fails in Node.js
html2canvas relies on window, document and computed browser styles. It is a browser-side DOM renderer, not a Node.js page-rendering tool. For server-side generation, use a real browser automation or rendering architecture rather than invoking html2canvas in a Node process. See the html2canvas FAQ.
Crashes, 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 minuteWindows 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 reinstallBest Value
Or skip the browser setup
ScreenshotNeo is for capturing a webpage from its URL; it does not turn an arbitrary in-memory DOM element or your custom jsPDF document into an email attachment. It can fit a different case: when the PDF you want is a capture of a publicly reachable webpage, ScreenshotNeo returns a screenshot or PDF from one GET request. Its documented options include PDF page settings, and its response identifies page verdict and billing status. See ScreenshotNeo and the ScreenshotNeo 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 and failed loads are never billed. Its MCP server lets AI agents take screenshots. The Free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. To generate a PDF instead of the example’s WebP, use the PDF options documented for the API. Sign up for 1,000 free screenshots a month with no card.
Frequently Asked Questions
Can I attach a PDF Blob directly to a mailto link?
No. Use a download for manual attachment, or upload the Blob to a backend for server-side email.
Can html2canvas run without a browser?
No. It depends on browser DOM and style APIs; server-side generation needs a browser rendering approach.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsQuick 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.
