I have html code for embedding PDF file into the web browser to view them using PDF JS library, but on running it, it gives this following error in console of web browser:
Access to fetch at 'http://www.orimi.com/pdf-test.pdf' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
pdf.min.js:1 GET http://www.orimi.com/pdf-test.pdf net::ERR_FAILED
_createStreamSink @ pdf.min.js:1
_onComObjOnMessage @ pdf.min.js:1
iframe.html:1 Uncaught (in promise) e {name: "UnknownErrorException", message: "Failed to fetch", details: "UnknownErrorException: Failed to fetch"}
Following is the code of my pdf viewer for javascript/html, please let me know how to resolve this issue. Am I missing something?:
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
<style>
#canvas_container {
width: 800px;
height: 450px;
overflow: auto;
background: #333;
text-align: center;
border: solid 3px;
}
</style>
</head>
<body>
<div id="my_pdf_viewer">
<!-- previewer -->
<div id="canvas_container">
<canvas id="pdf_renderer"></canvas>
</div>
<!-- page buttons -->
<div id="navigation_controls">
<button id="go_previous">Previous</button>
<input id="current_page" value="1" type="number"/>
<button id="go_next">Next</button>
</div>
<!-- zoomo -->
<div id="zoom_controls">
<button id="zoom_in">+</button>
<button id="zoom_out">-</button>
</div>
</div>
<script>
var myState = {
pdf: null,
currentPage: 1,
zoom: 1
}
function render() {
myState.pdf.getPage(myState.currentPage).then((page) => {
// more code here
});
var canvas = document.getElementById("pdf_renderer");
var ctx = canvas.getContext('2d');
var viewport = page.getViewport(myState.zoom);
canvas.width = viewport.width;
canvas.height = viewport.height;
page.render({
canvasContext: ctx,
viewport: viewport
});
}
pdfjsLib.getDocument('http://www.orimi.com/pdf-test.pdf').then((pdf) => {
myState.pdf = pdf;
render();
});
</script>
</body>
</html>
The above mentioned code uses pdf.js library.
