Edit by @eligrey: Please tell Apple how this bug is affecting you in https://bugs.webkit.org/show_bug.cgi?id=102914 if you want this fixed.

Edit by @jimmywarting The safari bug #102914 has been marked as fixed now

according to the commit position, download attribute is fixed in WebKit v602.1.27. The latest beta build (Safari Technology Preview) is based on WebKit v602.1.25, and of course doesn't contain this patch, so there's no simple way to test.

In the meantime, if you want to support Safari 7, you'll probably want to use Downloadify (uses Flash, not HTML5).

Issues we have had with Safari

• [x] Blob is not supported
  This has been solved with Blob.js using BlobBuilder as fallback and then base64 data uri if that are not supported either
• [x] URL.createObjectUrl
  Has been covered by both FileSaver.js and blob.js Blob.js overrule createObjectUrl with it's own base64 url constructor only if it's a "fake blob" (i.e not a File or Blob representation) it will use window.URL, fallback to window.webkitURL or use it's own base64 function to create those "fake blobs" data-uri
• [ ] The "can't open blob url" issue (partly supported) - screenshot

            The page you opened redirected you to a page that isn't supported by safari
Safari can't open the page becuse Safari can't be redirected to address that begin with "blob:".

• This is mostly cased by unsupported mime type, Safari do support opening blob url, but only if it's a mimetype that safari can understand like simple plain/text or a common image like image/png.
  • This will result in a new tab from which the user can just hit ⌘+S to save it
• ATM FileSaver.js looks at the mimetype to see if it is application/octet-stream (wish is commonly used to force saving files from the server)
  If it's then it read the blob as base64 using FileReader to open a data:attachment/file" + base64 url in order to save it.
  • It's not possible to create a blob with attachment/file type directly and open it, then you will get errors like this: Failed to load resource: Frame load interrupted it has to be base64 for some reason...
  • the resulting filename will be "unknown" when doing this
• [ ] The blank page error partial supported - (formuly known as "can't open blob url", see above)
  This can easily be reproduced by doing:

window.onclick = function(){
    var blob = new Blob(["Hi"], {type: 'application/octet-stream'});
    var url = URL.createObjectURL(url);
    window.open(url);
}

If you replace window.open with location.href = you will get the Failed to load resource: Frame load interrupted and be unable to save the file that is not the case for all mimetype, mimetypes that Safari can display can be opened this way

A little side note here is that window.open only works on trusted events meaning:

• It will only be able to open the url when user interacts with the website like a onclick event (more about isTrusted event here - almost pointless becuse browser support)

I have also found out that the trusted event persist for 1000 ms, so you could do:

window.onclick = function(){
    setTimeout(function(){
        var blob = new Blob(["Hi"], {type: 'application/octet-stream'});
        var url = URL.createObjectURL(url);
        window.open(url);
    }, 950); // Any longer then 1sec will make the window.open blocked again
}

So the conclusion here about safari is

1. download attribute in safari is not supported
2. It will try other means to save the blob by opening a new url
3. If the mimetype can be rendered by safari it will be able to display it in a new tab
4. If the mimetype is application/octet-stream:
   4.1 Create a base64 link with FileReader api
   4.2 try to open a new tab using window.open + base64 url
   4.3 if it was more then 1 sec before the user interaction happened it will use the current page instead
   but that is likely going to fail because (see first example using location.href) Failed to load resource: Frame load interrupted This may still work if the mimetype is not application/octet-stream and the saveAs was not called synchronous
5. Safari don't have anything like msSaveAs()
6. safest way to force the file to be saved is to have a data:attachment/file" + base64 ready and open that link using window.open() when the user interacts with the website (or at least to it under 1 second)
7. when saving it as a attachment filename will be "unknown"

I am trying to use fileSaver.js with angular 2 , but am not able to import the module

i am getting cannot find file-saver module error .

Any help is appreciated

Hi, From the demo website it was failed to download by pressing the save button with IOS safari. It just open in a new tab and showing blob url.

Following the documentation, tried using on-click, but seem doesn't work as well.

Anyone could advise? Thanks a lot.

Hi I have been using FileSaver.js with no problems to save binary data generated in browser, but am having problems with the following code:

console.log(myData.length); // yields 13292 - which is the correct data length
var blob = new Blob([myData], {type: "application/zip"});
console.log(blob.size); // yields 13404
saveAs(blob, "data.zip"); 

Note the difference in lengths. The result is that the zip file will not unpack correctly. myData is a string containing binary data. I have also tried reading it into an array first, various different mime types (none, text, octet-stream). Any ideas?

I'm trying to save a Blob of an Excel file, but the saved file is large double than the original, and Excel says it's corrupted.

var data // = data from AJAX response, 6854 bytes
var type = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
var blob = new Blob( [ data ], { type: type } );
FileSaver.saveAs(blob, "file.xlsx");

Chrome opens the file download modal, but the saved file is 11953 bytes large and Excel says it's corrupted.

I would like to implement, if possible , a multi-connection downloader in HTML5.. To do that for extremely large files , it needs to download in chunks and join them in a whole file afterwards.

Problem is > you obviously cannot store that much information in RAM ..

1.) How would you go about doing that ? is it even possible ? 2.) Would resume support be possible on browser crash ?

Thanks !

Looks like there is a weird download issue in chrome on android. If you click on save and hit download it throws an error message as shown below "was not able to download the file because of an unknown issue".

Weird thing, the image has been actually saved and can be opened through the download list.

Chrome ver.: 58.0.3029.83 Android ver.: 7.0.0

I used FileSaver 1.3.3 with webpack and react+redux for quite a while. It works like magic!

However, currently I tried to upgrade it to 1.3.4 and found there's a module changes that cause major problems between the versions.

Previously, this syntax work in react-webpack to import and use FileSaver

import FileSaver from "file-saver"

FileSaver.saveAs(blob, "filename.pdf")

after 1.3.4, it has to be like this

import FileSaver from "file-saver"

FileSaver(blob, "filename.pdf")

I suggest changing main API like this should be done in major version like going upward to 1.4.0 instead of minor version 1.3.3->1.3.4

since this will affect those who has

"file-saver": "^1.3.3",

like this in package.json. NPM will auto increment the version in the later build

Thanks!

This is not exactly an issue, rather it is a solution ( for example a solution to: https://github.com/eligrey/FileSaver.js/issues/25 )

Solution: For all your special character needs, just use UTF-8, but additionally add a BOM to make sure the file is opened correctly. CSV for example was opened by Office Excel versions prior to Office 2007 with the wrong ANSI 1252 encoding by default. Adding a BOM will make the file open correctly (in UTF-8) in Office versions since Office 2007 (maybe needs Office SP for Office 2007)

var BOM = "\uFEFF";
var    csvData = BOM + csvData;
var blob = new Blob([csvData], { type: "text/csv;charset=utf-8" });
saveAs(blob, "myFile.csv");

It seems that the latest update to Chrome (65) has lead to the window.saveAs() to fail in Chrome Extensions or Packaged Apps .

The error helpfully suggest try target="_blank".

Do you know if we can pass a target to saveAs ?

OSx: 10.11.3 (15D21) Safari: Version 9.0.3 (11601.4.4)

If I want to download something as a file, my browser console logs:

Failed to load resource: Frame load interrupted

It looks like your demo (https://eligrey.com/demos/FileSaver.js/ --> Saving rich text) has the same issue.

Hi,

Steps to reproduce

• On an iPhone, visit https://stackblitz.com/edit/file-saver-zke5nx with the Opera browser
• Click on the "Download PDF" button.

Current behavior Opera shows the "Opera cannot open the page because the address is invalid" error:

Expected behavior Opera downloads the pdf

Thanks for your work 🙏

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Hi all! I'm using a file-saver to save a zip-files from an s3 presigned url - I get a blob from a request and pass it to a file-saver with a custom filename. Now, after the download starts, the file is downloaded in the background and only after the download is completed it immediately appears in the browser download list (and at the bottom panel of Google Chrome f.e.). But I just want to see the progress of downloading the file immediately after the download starts (with the remaining time and the total file size as in the bottom bar, usual for Google Chrome). According to this guide https://github.com/eligrey/FileSaver.js/wiki/Saving-a-remote-file#using-http-header I added 'Content-Disposition: attachment; filename=some-name.zip' header in s3 presigned url response but it didn't help. I haven't tried other options from this guide as they look like a crutch. But I can be wrong. What am I doing wrong? What could be the issue? Should I try a different approach? I'll be appreciate for any help.

Currently if you try to run saveAs from a web worker, it fails silently. Instead we should send an error to the console to communicate that saveAs can only be called from the main thread.

Fixes https://github.com/eligrey/FileSaver.js/issues/778.

Thanks for this library.

I'm getting silent failures where, when I try to download using saveAs, it fails without any error or log -- a download simply never appears.

I'm using Chrome: Version 107.0.5304.87 (Official Build) (64-bit), on Ubuntu 20.02.

Any idea whats going on?

Example code:

import {saveAs} from 'file-saver'

const blob = new Blob(['helloworld'], {
  type: "application/json",
});

saveAs(blob, 'test')