I can't open a PDF at a tab in a browser from a html link.
<a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" target="_blank">PDF</a>
Problem:
But, if I open the link directly on the browser (https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf), that will open in the browser without any issue.
How to solve this?
You can get around it with a proxy script (on the same domain):
Save code below as test.php, and start server with php -S localhost:1234 test.php. Go to http://localhost:1234.
if(isset($_GET['url']) && strpos($_GET['url'],"http") > -1) {
header('Content-type: application/pdf');
echo file_get_contents($_GET['url']);
exit;
}
?>
<a href="?url=https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" target="_blank">PDF</a>
With this code you can download the pdf through a proxy (api.allorigins.win) which avoids Same-origin policy problems.
After that the pdf is saved with window.URL.createObjectURL and opened in a new window.
<script>
function loadPdf(url)
{
var req = new XMLHttpRequest();
req.open("GET", "https://api.allorigins.win/raw?url=" + encodeURIComponent(url), true);
req.responseType = "blob";
req.onreadystatechange = function ()
{
if (req.readyState === 4 && req.status === 200){
var blob=new Blob([req.response], {type: 'application/pdf'});
var link=document.createElement('a');
link.target = "_blank";
link.href=window.URL.createObjectURL(blob);
link.click();
}
};
req.send();
}
</script>
<a href="javascript:loadPdf('https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf');">PDF</a>