To preview an Excel workbook in a browser, read the selected file as bytes, parse it with a spreadsheet library such as SheetJS, choose a worksheet, and render its cell data. The standard SheetJS approach is XLSX.read(bytes) followed by XLSX.utils.sheet_to_html(worksheet). That produces an HTML table for inspecting data—not a complete reproduction of Excel’s formatting, charts, or interactive features.
What a JavaScript Excel preview does—and does not—show
A browser preview usually means showing worksheet values in a web page. With SheetJS, you can convert a worksheet into an HTML table, or use the parsed workbook data to build a custom grid. Either way, parsing workbook data is distinct from rendering the workbook exactly as Excel does.
SheetJS describes its Community Edition in terms of extracting and generating spreadsheet data; its product overview places styling and additional rich features in Pro. If precise formatting or richer Excel-like presentation is a requirement, verify that the chosen solution supports the specific features you need and test it with representative workbooks. The available documentation does not establish a comprehensive feature-by-feature fidelity matrix.
Do not assume that parsing alone reproduces formulas, merged cells, styles, hidden sheets, charts, or every other workbook feature. Decide which of these matter to your users, then check their behavior in the preview rather than treating a successful parse as proof of visual or behavioral equivalence.
#1 Best Overall
Preview a workbook selected from the user’s computer
In a standalone browser page, ask the user to choose a file with an <input type="file">. Read the selected file with the browser File API’s arrayBuffer() method, pass those bytes to XLSX.read(), and render the chosen worksheet. This is the appropriate browser flow because web pages generally cannot read arbitrary local filesystem paths by passing a filename to XLSX.readFile().
1. Add the file input and preview container
<input id="excel-file" type="file" accept=".xlsx,.xls,.xlsm,.xlsb,.ods">
<div id="preview"></div>The accept attribute is a chooser hint, not validation that the file is supported or safe. Check the library’s supported formats and handle parsing failures in your application. The example lists common spreadsheet extensions but does not promise that every feature in every file using those extensions will be preserved.
2. Load SheetJS
Make sure the SheetJS browser build is loaded before the handler runs, and that XLSX is available in the page. The handler below assumes that setup has already been completed, so it can focus on the file-to-preview flow.
Rank #2
3. Read, select, and render a worksheet
const input = document.querySelector("#excel-file");
const preview = document.querySelector("#preview");
input.addEventListener("change", async () => {
const file = input.files?.[0];
if (!file) return;
preview.textContent = "Reading workbook…";
try {
const bytes = await file.arrayBuffer();
const workbook = XLSX.read(bytes);
const sheetName = workbook.SheetNames[0];
if (!sheetName) {
preview.textContent = "This workbook has no worksheets to preview.";
return;
}
const worksheet = workbook.Sheets[sheetName];
preview.innerHTML = XLSX.utils.sheet_to_html(worksheet);
} catch (error) {
console.error("Could not preview workbook", error);
preview.textContent = "Could not read this workbook. Choose another file or check that it is a supported spreadsheet.";
}
});This displays the first worksheet. The workbook’s SheetNames array contains the names you can use to let a user choose another sheet. For example, populate a select control with those names, then render workbook.Sheets[selectedName] when the selection changes. Check that the selected name exists before looking up the worksheet.
The example assigns generated HTML to innerHTML because the SheetJS utility returns HTML markup. If your application accepts untrusted workbook files, assess the HTML-rendering and content-handling risks for your application, and do not insert unrelated untrusted HTML into the page. A custom renderer that creates DOM nodes and assigns cell text with textContent may give you more control over how values are displayed.
Choose the right worksheet and presentation
Show a sheet picker when the workbook has multiple sheets
Use workbook.SheetNames to list available sheets and let the user select one. A single-sheet preview can default to the first name, but a multi-sheet workbook should not silently imply that the first sheet is the whole workbook. An empty sheet-name list should be handled as an empty or unsupported workbook rather than indexed blindly.
Use an HTML table for inspection, not Excel fidelity
XLSX.utils.sheet_to_html(worksheet) is a quick way to expose cell data as a table. If you need sorting, keyboard navigation, virtualization, custom validation, or a particular visual design, use the parsed data to build a grid suited to your application. If you need Excel-like styling or richer workbook features, confirm that the library or product tier you select supports those features; do not infer support from the fact that the workbook parsed.
Decide how to handle dates and row counts
By default, SheetJS stores date cells as numeric cells with number formats. Its cellDates option converts date codes to JavaScript Date objects. Your renderer’s choices affect what users see, so test representative date cells and decide whether to display formatted spreadsheet values or JavaScript date values.
For large worksheets, SheetJS documents sheetRows as an option to limit how many worksheet rows are parsed. A row limit can bound the preview work, but it also means the preview is incomplete. Make that limitation visible to users if you apply it, and test performance against the workbook sizes your application expects; no general performance figure is established here.
Rank #4
Preview a workbook from a URL
A remote workbook follows the same parsing pipeline after download: fetch the response, check its status, read the body as an ArrayBuffer, and pass those bytes to XLSX.read(). Keep the response binary. Do not convert arbitrary workbook bytes to UTF-8 text.
async function loadWorkbookFromUrl(url) {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Download failed: ${response.status}`);
}
const bytes = await response.arrayBuffer();
return XLSX.read(bytes);
}
async function previewFirstSheetFromUrl(url, previewContainer) {
try {
const workbook = await loadWorkbookFromUrl(url);
const sheetName = workbook.SheetNames[0];
if (!sheetName) {
previewContainer.textContent = "This workbook has no worksheets to preview.";
return;
}
previewContainer.innerHTML = XLSX.utils.sheet_to_html(
workbook.Sheets[sheetName]
);
} catch (error) {
console.error("Could not download or preview workbook", error);
previewContainer.textContent = "Could not download or read this workbook.";
}
}The remote host must allow the browser request. If the request is cross-origin, browser access rules can prevent your page from reading the response even when the URL opens in a browser tab. Check the request in your browser’s developer tools and configure the file host or your server-side download path to allow the intended access. Also distinguish an HTTP download failure from a parsing failure so you can show a useful error.
Troubleshooting common preview failures
XLSX is not defined: The SheetJS browser build was not loaded, or the handler ran before it was available. Load the library and confirm the script order or module import.- No preview appears after file selection: Confirm that the input’s
changehandler is attached and that a file was selected. Show a loading or error message rather than leaving the preview blank. XLSX.readFile()cannot open a local file: A browser page generally cannot access arbitrary filesystem paths that way. Read the user-selected file withfile.arrayBuffer()and pass the bytes toXLSX.read().- A URL works in a tab but not in
fetch(): The remote server may not permit browser cross-origin access. Check the network error and response headers; use a permitted host or a server-side request where appropriate. - Download fails or the parser rejects the response: Check
response.okand the status code before parsing. A login page, error document, interrupted download, or non-workbook response is not a valid workbook byte stream. - Dates look unexpected: Decide whether to retain SheetJS’s default numeric cells and number formats or use
cellDatesto produce JavaScriptDateobjects, then format them intentionally in the preview. - The preview omits rows: Check whether parsing uses
sheetRows. If it does, disclose the limit and provide a way to inspect the remainder if the workflow requires it. - Formatting or features differ from Excel: An HTML table is a data preview, not a promise of full Excel rendering. Test required workbook features and choose a richer rendering approach if data-only inspection is insufficient.
Keep browser previews responsive and dependable
Reading a local file avoids a network download, but parsing and building a large HTML table still takes work. Keep the initial preview bounded when appropriate, make truncation clear, and test with files close to the largest your users are expected to select. The documentation establishes the sheetRows limit as a way to constrain parsed rows; it does not establish a universal safe file size or timing target.
Free tools Windows power users keep installed
One-click scans. No signup required.
For remote files, handle both network and parsing errors. Preserve bytes with arrayBuffer(), check HTTP status, and account for cross-origin restrictions. Do not report every failure as “invalid workbook” when the actual cause may be a blocked request or a server error.
Finally, scope the implementation correctly. Microsoft’s Excel JavaScript APIs are an Office add-in interface, not a general replacement for parsing an uploaded workbook in a standalone web page. Preview APIs in that track are subject to change and are not intended for production while they remain in preview. Choose that route only when the application is an Office add-in and the API status meets your production requirements.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server, not an Excel workbook parser: use the JavaScript workflow above to render spreadsheet contents first. If your next step is capturing a screenshot of a web page displaying that preview, one GET request can return an image or PDF. See the ScreenshotNeo API documentation.
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Before capture, ScreenshotNeo accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and the response identifies the page verdict and billing status in headers. An MCP server gives Claude, Cursor, and other MCP clients tools for screenshots, page information, and PDF capture. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. These features apply to capturing rendered web pages, not parsing Excel files. Learn about ScreenshotNeo, or sign up for 1,000 free screenshots a month with no card.
Recommended Free Tools
Frequently Asked Questions
Can I preview a workbook without uploading it to a server?
Yes. A browser page can read a user-selected file through the File API and parse its bytes locally with a JavaScript spreadsheet library.
Does an Excel preview made with SheetJS show the workbook exactly as Excel does?
No. Converting a worksheet to HTML is a data-table approach; it should not be treated as full-fidelity Excel rendering.
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.
