Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →The Adobe Acrobat PDF Embed API puts an interactive PDF viewer inside a web page. The minimum implementation has four parts: register an Adobe client ID for your domain, load Adobe’s viewer.js, add an adobe-dc-view container, and call AdobeDC.View.previewFile() after the SDK is ready. The example below embeds a cross-origin PDF in a 500-by-360-pixel viewer, then shows how to select layouts, restrict controls, handle protected files, integrate frameworks, and diagnose blank or blocked previews.
What you need before writing code
- An Adobe client ID created in Adobe’s PDF Embed API console.
- The website origin (scheme, host and, where relevant, port) registered for that client ID. Adobe validates that the ID is used on the registered domain.
- A PDF that the browser can fetch. For a URL-based embed, the PDF server must permit cross-origin requests (CORS).
- A browser page with a visible container. Give the container an explicit height for
SIZED_CONTAINER; a zero-height element produces an apparently missing viewer.
The service is a JavaScript viewer. It does not require visitors to install Acrobat. You can provide the document by URL, by file content, or with a file promise when your application controls delivery.
Minimal JavaScript embed
This is the smallest complete page using Adobe’s documented sequence. Replace both placeholders with your registered client ID and a PDF URL that is reachable from the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Embedded PDF</title>
<style>
#adobe-dc-view { width: 100%; max-width: 900px; height: 640px; }
</style>
</head>
<body>
<div id="adobe-dc-view"></div>
<script src="https://acrobatservices.adobe.com/view-sdk/viewer.js"></script>
<script>
document.addEventListener("adobe_dc_view_sdk.ready", function () {
const adobeDCView = new AdobeDC.View({
clientId: "<YOUR_CLIENT_ID>",
divId: "adobe-dc-view"
});
adobeDCView.previewFile({
content: {
location: { url: "https://example.com/file.pdf" }
},
metaData: { fileName: "file.pdf" }
}, {
embedMode: "SIZED_CONTAINER"
});
});
</script>
</body>
</html>- Create and register the client ID in Adobe’s console.
- Publish this page on the registered origin.
- Replace the PDF URL and filename. The filename is metadata used by the viewer; it does not have to match the URL path.
- Open the page, then check the browser console and Network panel if the viewer does not appear.
Keep the client ID in browser code only as an identifier, not as a secret. Authorization credentials for a protected PDF belong on your server.
#1 Best Overall
- Create and edit PDFs. Collaborate with ease. E-sign documents and collect signatures. Get everything done in one app, wherever you go.
- Edit text and images without jumping to another app.
- E-sign documents or request e-signatures on any device. Recipients don’t need to log in to e-sign.
- Convert PDFs to editable Microsoft Word, Excel, or PowerPoint documents.
- Share PDFs for collaboration. Commenting features make it easy for reviewers to comment, mark up, and annotate.
Choose the right embed mode
The embedMode setting changes both layout and sizing behavior.
| Mode | Viewport behavior | Best use | Important sizing detail |
|---|---|---|---|
FULL_WINDOW |
Viewer occupies the browser window. | Dedicated document-reading pages. | Plan the page around the viewer; annotation tools are not supported on phones in this mode. |
SIZED_CONTAINER |
Pages behave like slides inside a fixed box. | Product pages, presentations and precise layouts. | Set a non-zero width and height on the container. |
IN_LINE |
Pages flow with surrounding content and the viewer height is automatically sized. | Whitepapers, brochures and e-books. | Allow enough page width in the surrounding responsive layout. |
LIGHT_BOX |
Foreground overlay while the underlying page remains visible. | “Read PDF” buttons and previews. | Open it from a user action and test focus and scrolling on mobile. |
Change only the second argument to previewFile when switching modes, for example { embedMode: "FULL_WINDOW" }. Adobe’s viewer also exposes controls such as showDownloadPDF and showPrintPDF where that mode and device support them.
Control download, print, forms and annotations
Hide toolbar actions
Pass viewer configuration alongside the embed mode. For a display-only document, you can request hidden download and print controls:
Rank #2
- Perfect Adobe Acrobat Pro alternative – lifetime license for Windows 10 and 11.
- EDIT text, images, pages, hyperlinks, designs in PDF documents. ORGANIZE PDFs.
- READ and Comment on PDFs – Intuitive reading modes & document commenting and mark up tools!
- CREATE, COMBINE, SCAN and COMPRESS PDFs.
- FILL forms & Digitally Sign PDFs. Work with Digital certificates
adobeDCView.previewFile(fileSpec, {
embedMode: "SIZED_CONTAINER",
showDownloadPDF: false,
showPrintPDF: false
});These settings improve the interface but are not a security boundary. A PDF delivered to a browser can potentially be saved through browser or network tools, and mobile support differs.
Recommended Free Tools
Disable live form filling
Live form editing is enabled by default. Turn it off when the document is informational:
adobeDCView.previewFile(fileSpec, {
embedMode: "SIZED_CONTAINER",
enableFormFilling: false
});Comments and collaborative review
The API supports annotation creation, update, deletion, import, export and save callbacks. For a multi-user review, provide a reviewer name or email and persist annotation data through your callbacks. Without that identity information, comments appear under the reviewer name GUEST. Treat callback data as application data: authenticate users, authorize access to the document, and store revisions on your server.
Rank #3
- VIEW & PRINT ANY PDF
- USE LIQUID MODE FOR OPTIMAL PDF VIEWING
- EDIT PDFs
- MERGE & ORGANIZE PDFs WITH THE PDF CONVERTER
- SHARE PDFs & COLLABORATE
Delivering a PDF by URL or by file content
Public or signed URL
The URL form is simplest:
const fileSpec = {
content: { location: { url: "https://cdn.example.com/manual.pdf" } },
metaData: { fileName: "manual.pdf" }
};Configure the PDF origin to return an appropriate Access-Control-Allow-Origin value for the site that hosts the viewer. Also ensure redirects, HTTPS, range requests and the final response preserve access-control headers. A URL that works when pasted into a new tab can still fail in an embedded viewer because the browser applies CORS to the SDK’s fetch.
Protected or private documents
Do not put a long-lived bearer token in the page URL. Instead, have your application authenticate the user and provide the PDF using the file-content or file-promise form supported by the API. This keeps authorization decisions on your server and lets you issue short-lived, audience-limited access. The official samples include local-file and related delivery patterns; adapt one to your authentication model rather than exposing storage credentials.
Free tools Windows power users keep installed
One-click scans. No signup required.
Responsive and mobile behavior
Use a fluid width and a deliberate height for sized containers:
Rank #4
![Acrobat Pro | 1-Month Subscription | PDF Software |Convert, Edit, E-Sign, Protect |Activation Required [PC/Mac Online Code]](https://m.media-amazon.com/images/I/41CUq+X3jVL._SL160_.jpg)
- Create and edit PDFs. Collaborate with ease. E-sign documents and collect signatures. Get everything done in one app, wherever you go.
- Edit text and images without jumping to another app.
- E-sign documents or request e-signatures on any device. Recipients don’t need to log in to e-sign.
- Convert PDFs to editable Microsoft Word, Excel, or PowerPoint documents.
- Share PDFs for collaboration. Commenting features make it easy for reviewers to comment, mark up, and annotate.
#adobe-dc-view {
width: 100%;
height: min(80vh, 720px);
min-height: 360px;
}Test the selected mode on the actual phone and tablet browsers you support. Adobe lists three mobile limits that must shape your product promise: annotation tools are not supported on phones in FULL_WINDOW mode; printing is unsupported; and PDF download is unsupported on iOS devices but supported on Android. Do not describe desktop-equivalent print, download or annotation behavior for every mobile visitor.
React and Angular integration
The SDK is still loaded once, but the container is created by the framework and destroyed with the component. In React, use a ref for the div and initialize in useEffect after the script has dispatched adobe_dc_view_sdk.ready. In Angular, load the script in index.html or a service, then initialize in ngAfterViewInit against a ViewChild. Guard initialization so route changes do not create multiple viewers, and remove event listeners when the component unmounts. Adobe’s official samples repository includes React and Angular examples, as well as full-window, inline, lightbox, local-file, annotation, event, search-indexing and linearized-PDF examples.
Analytics and viewer events
Register an event listener or connect Adobe Analytics or Google Analytics 4 if you need usage data. Documented events include page changes, bookmark clicks, downloads, prints, external-link opens, text copies, searches and zoom changes. Adobe lists metrics such as browser and operating-system type and version, device type, embed mode, file size, page count, URL, and rendering or download performance. Design event collection around consent requirements and your own retention policy. Adobe states: “PDF Embed API doesn’t store any user-generated content and never shares user-generated content with Adobe servers.”
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Best Value
![PDF Extra 2024| Complete PDF Reader and Editor | Create, Edit, Convert, Combine, Comment, Fill & Sign PDFs | Lifetime License | 1 Windows PC | 1 User [PC Online code]](https://m.media-amazon.com/images/I/41eZq4aiipL._SL160_.jpg)
- EDIT text, images & designs in PDF documents. ORGANIZE PDFs. Convert PDFs to Word, Excel & ePub.
- READ and Comment PDFs – Intuitive reading modes & document commenting and mark up.
- CREATE, COMBINE, SCAN and COMPRESS PDFs
- FILL forms & Digitally Sign PDFs. PROTECT and Encrypt PDFs
- LIFETIME License for 1 Windows PC or Laptop. 5GB MobiDrive Cloud Storage Included.
Troubleshooting blank, blocked or incomplete previews
Blank viewer or “invalid client ID”
- Cause: The ID is misspelled, belongs to another Adobe project, or the current origin is not registered.
- Fix: Copy the ID exactly, register the deployed scheme/host/port, and test from that origin rather than from a local file.
CORS error in the console
- Cause: The PDF server does not allow the viewer page’s origin, or a redirect drops CORS headers.
- Fix: Add the required
Access-Control-Allow-Originresponse, check the final redirected URL, and inspect the failed request in DevTools. If the file is private, use supported file-content delivery instead of making storage public.
Container exists but nothing is visible
- Cause: The element ID differs from
divId, initialization runs before the SDK ready event, or CSS gives the container zero height. - Fix: Match the IDs, initialize inside
adobe_dc_view_sdk.ready, and temporarily add an explicit height and border.
PDF loads only sometimes
- Cause: Expired signed URLs, authentication redirects, server timeouts, or incomplete byte-range support.
- Fix: Log status codes and redirect locations, extend the URL lifetime for the viewing session, return the PDF with the correct content type, and test the same URL from the browser Network panel.
Controls are missing or still available
- Cause: A control option is unsupported in the selected mode or on the current device; hiding a button does not prevent saving through other means.
- Fix: Verify mode and mobile support, then enforce document authorization and watermarking on the server when confidentiality matters.
Performance, reliability and security checklist
- Serve PDFs over HTTPS with a stable URL and cache headers appropriate to their sensitivity.
- Prefer optimized or linearized PDFs for faster first-page display, and avoid unnecessarily huge scans.
- Set a clear container size to prevent layout shifts.
- Do not initialize multiple viewers for the same element during client-side route changes.
- Record failures without logging access tokens or private document contents.
- Use least-privilege, short-lived authorization for protected files and validate ownership server-side.
- Test desktop, iOS and Android separately, including print, download, forms and annotations.
Or skip the browser setup
If your goal is a rendered image or PDF of a web page rather than an interactive document viewer, ScreenshotNeo provides a single-call website screenshot API. It accepts cookie and consent banners before capture, removes more than 60 known consent platforms plus newsletter popups and chat widgets, and bills only clean shots: bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed. Its MCP server lets Claude, Cursor and other MCP clients call take_screenshot, get_page_info and capture_pdf. Every plan includes all features; 1,000 screenshots per month are free without a card, and paid plans start at $5 for 3,000 shots.
See the ScreenshotNeo API documentation for authentication and options. A cURL request is:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Create a free ScreenshotNeo account to use the monthly 1,000-shot allowance without adding a card.
Frequently Asked Questions
Can I embed a PDF that requires a login?
Yes, but do not expose a permanent storage token in the public URL. Authenticate on your server and provide the document through the API’s supported file-content or file-promise mechanism, or issue a short-lived authorized URL.
Is hiding the download button DRM?
No. It changes the viewer interface only. A browser that can render a PDF has received its data, so stronger protection requires server-side authorization and an appropriate document-protection strategy.
Does the viewer work inside an iframe?
The documented integration places Adobe’s viewer in a page container. If that page itself is framed, test the complete frame hierarchy, origin registration, CSP and browser restrictions on your supported devices.
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.
