How to load file from URL using PDF.js bypassing browser CORS?


The previous post has introduced how to disable the CORS (Cross-Origin Resource Sharing) of PDF.js, but PDF.js still cannot load the file from the URL, this is because the double CORS block of PDF.js and the browser. This post will figure out: ① How to bypass the browser CORS to load file with URL? ② How to load URL file using PDF.js?

Keywords: browser , CORS , website , PDF.js ,  load file from url.

Browser CORS

After we disabled the CORS verification code in viewer.js, we will find that PDF.js still cannot load the URL file correctly, and the error message becomes: “Message: Failed to fetch”, which means that our URL file restricted. It is also possible that the address of the document is wrong.

The error reported here is due to the block of the browser CORS. At this time, when you open the browser DevTools (F12 or Fn+F12), you can see the error message in the console : Access to XMLHttpRequest at ‘file:///C:/Programmer/pdfjs-2.4.456-dist/web/locale/’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

error message

Bypass browser CORS

Point to the problem of block browser CORS in loading URL file, on solution is that the server converting PDF file into a stream and render it to PDF.js, but we will not discuss such a strategy here, we care how to solve this problem only in the website. To solve this problem needs the following steps. The following files viewer.js, viewer.html and test.html are in pdfjs-2.4.456-dist\web.

Modify viewer.js

Disable the following code in viewer.js, then override the functions for loading PDF file  named webViewerLoad and Run.

					// inactivate follow original code in viewer.js

//first place
function webViewerLoad() {
	var config = getViewerConfiguration();
	window.PDFViewerApplication = pdfjsWebApp.PDFViewerApplication;
	window.PDFViewerApplicationOptions = pdfjsWebAppOptions.AppOptions;
	var event = document.createEvent("CustomEvent");
	event.initCustomEvent("webviewerloaded", true, true, {});

//second place
if (document.readyState === "interactive" || document.readyState === "complete") {
} else {
	document.addEventListener("DOMContentLoaded", webViewerLoad, true);

//third place
run: function run(config) {


inactivate code

					// rewrite webViewerLoad function
window.webViewerLoad = function webViewerLoad(fileUrl) {
	var config = getViewerConfiguration();
	window.PDFViewerApplication = pdfjsWebApp.PDFViewerApplication;
	window.PDFViewerApplicationOptions = pdfjsWebAppOptions.AppOptions;
	var event = document.createEvent('CustomEvent');
	event.initCustomEvent('webviewerloaded', true, true, {});

	if (fileUrl) {
		config.defaultUrl = fileUrl;

//rewrite run function
//modeify for browser CORS
run: function run(config) {
	var _that = this;
	//add judgement
	if (config.defaultUrl) {
		_app_options.AppOptions.set('defaultUrl', config.defaultUrl)

	_that.initialize(config).then(function() {


rewrite webViewerLoad

Modify viewer.html

Add a function in viewer.html to call the modified webViewerLoad function when viewer.html onloading.

					< script type = "text/javascript" >
	window.onload = function() {
		var pdfUrl = "";


add webViewerLoad

Dynamically load PDF

Modify the function in viewer.html to load the file according to the PDF url parameter carried in the <iframe> src.

					<script type = "text/javascript" >
	window.onload = function() {
		var all_href = location.href;
		var file_id = all_href.split('?')[1];
		var pdfUrl = file_id.split('=')[1];
		// var pdfUrl='';

modify viewer.html onload

When using <iframe> in test.html to refer to the viewer.html of PDF.js, you only need to modify the PDF URL after src=”viewer.html?file=”. That is, changing the src attribute of <iframe> to realize dynamic loading of PDF file.

					//complete test.html
<!DOCTYPE html>
		<meta charset="utf-8">
	<body data-rsssl=1>
		<iframe loading="lazy" id="pdf_container" src="viewer.html?file=" 
		frameborder="0" width="100%" height="800px"></iframe>

complete test.html


PDF.js cannot open files by URL, which limits our usage, so we have to override some functions. The main changes are as follows:

					1. Disable the CORS judgment code in viewer.js.
2. Override the webViewerLoader and run functions in viewer.js to remove the CORS restriction of the browser.
3. Add the fileride url parameter to the src attribute of the <iframe> to realize the dynamic loading of the PDF file.

This post introduces how to load PDF files from URLs in PDF.js. If you want to know how to use PDF.js to get the contents of PDF files and manipulate pdf file with code, please view the related post.

Related articles

Coming soon

Leave a Reply

Your email address will not be published. Required fields are marked *

Chaoxu Wei

Master student at Tongji University (Writer & Blogger)

Job hunting, both part-time and full-time jobs are accepted. Job recommendation please email me, thank you very much!


Edit Template

“There are many people in the world who want to work hard but can’t, and people who work too hard and are exhausted. Please don’t use your efforts only to chase your own victory, please use them to help others.”




Yangpu District, Shanghai