CODEWITHSUNDEEP
javascripthtmlgoogle-chromepdfblob
Polaris64
Polaris64

Reputation: 115

Issue with anchor href set to a "blob:" URL using a target of "_blank" in Chrome

I am developing a website which allows users to download a PDF version of a page. The current solution is to render the generated HTML to a PDF on the server, which returns the Base64-encoded PDF as a result. A Blob is created from this data, followed by an ObjectURL as follows: -

const blob = new Blob([B64A.decode(pdfdata)], {type: 'application/pdf'});
dataURL = (window.URL || window.webkitURL).createObjectURL(blob);

The dataURL (which is in the form "blob:http://www.example.com/abcd1234-abcd-abcd-abcd-abcd1234efa") is then assigned to the href attribute of an anchor tag. The target attribute is also set to "_blank" so that the generated PDF is opened in a new tab.

This worked absolutely fine up until around a week ago. In Firefox, everything still works, however in Chrome there is a problem. When clicking the link, a tab quickly opens and then immediately closes. Removing the target attribute causes everything to work properly, although the PDF is loaded into the current tab which is not what I want. Nothing is logged to the console, so I am not getting any clues from there.

Does anyone have any ideas as to why this is happening? As this has only just started happening I am assuming it's an issue with the latest version of Chrome (I am running 57.0.2987.98 (64-bit) on Linux, although a colleague also has the same issue with Chrome on Windows 10).

EDIT: I just created a CodePen example to demonstrate this: https://codepen.io/anon/pen/OpOGbE

Click the button and two links should be generated. The first should open normally in the same page. The second should open in a new tab, but does not in Chrome (for me it displays the same behaviour as mentioned above).

While running this test I just noticed that in an incognito window the issue seems not to exist, and the new tab opens correctly...

Upvotes: 3

Views: 3533

Answers (1)

user1693593
user1693593

Reputation:

It seem to be a temporary bug in Chrome. The code works with current Canary (beta) version of Chrome (v.59.0.3044.1) as of this writing.

As a temporary workaround you could try using the original Base-64 data and just prepend a data-uri header to it, then use this as source for href:

const dataURL = "data:application/pdf;base64," + pdfdata;

Upvotes: 5

Related Questions