Merge pull request #5838 from plotly/safari-download

Fix unknown filename when exporting charts using new versions of Safari

Author: archmoj

draftlogs/5838_fix.md

@@ -0,0 +1,2 @@
+ - Fix unknown filename when exporting charts using new versions of Safari [[#5609](https://github.com/plotly/plotly.js/pull/5609), [5838](https://github.com/plotly/plotly.js/pull/5838)],
+ with thanks to @rlreamy for the contribution!

src/snapshot/filesaver.js

@@ -23,13 +23,6 @@ function fileSaver(url, name, format) {
         var blob;
         var objectUrl;
 
-        // Safari doesn't allow downloading of blob urls
-        if(Lib.isSafari()) {
-            var prefix = format === 'svg' ? ',' : ';base64,';
-            helpers.octetStream(prefix + encodeURIComponent(url));
-            return resolve(name);
-        }
-
         // IE 10+ (native saveAs)
         if(Lib.isIE()) {
             // At this point we are only dealing with a decoded SVG as
@@ -56,6 +49,13 @@ function fileSaver(url, name, format) {
             return resolve(name);
         }
 
+        // Older versions of Safari did not allow downloading of blob urls
+        if(Lib.isSafari()) {
+            var prefix = format === 'svg' ? ',' : ';base64,';
+            helpers.octetStream(prefix + encodeURIComponent(url));
+            return resolve(name);
+        }
+
         reject(new Error('download error'));
     });
 

test/jasmine/tests/download_test.js

@@ -1,9 +1,6 @@
 var Plotly = require('@lib/index');
 var Lib = require('@src/lib');
 
-var helpers = require('@src/snapshot/helpers');
-var getImageSize = require('@src/traces/image/helpers').getImageSize;
-
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 
@@ -137,51 +134,6 @@ describe('Plotly.downloadImage', function() {
         })
         .then(done, done.fail);
     }, LONG_TIMEOUT_INTERVAL);
-
-    it('should produce right output in Safari', function(done) {
-        spyOn(Lib, 'isSafari').and.callFake(function() { return true; });
-        spyOn(helpers, 'octetStream');
-
-        Plotly.newPlot(gd, textchartMock.data, textchartMock.layout)
-        .then(function() { return Plotly.downloadImage(gd, {format: 'svg'}); })
-        .then(function() { return Plotly.downloadImage(gd, {format: 'png'}); })
-        .then(function() { return Plotly.downloadImage(gd, {format: 'jpeg'}); })
-        .then(function() { return Plotly.downloadImage(gd, {format: 'webp'}); })
-        .then(function() {
-            var args = helpers.octetStream.calls.allArgs();
-            expect(args[0][0].slice(0, 15)).toBe(',%3Csvg%20class', 'format:svg');
-            expect(args[1][0].slice(0, 8)).toBe(';base64,', 'format:png');
-            expect(args[2][0].slice(0, 8)).toBe(';base64,', 'format:jpeg');
-            expect(args[3][0].slice(0, 8)).toBe(';base64,', 'format:webp');
-        })
-        .then(done, done.fail);
-    });
-
-    it('should default width & height for downloadImage to match with the live graph', function(done) {
-        spyOn(Lib, 'isSafari').and.callFake(function() { return true; });
-        spyOn(helpers, 'octetStream');
-
-        var fig = {
-            data: [{y: [0, 1]}]
-        };
-
-        gd.style.width = '500px';
-        gd.style.height = '300px';
-
-        Plotly.newPlot(gd, fig)
-        .then(function() { return Plotly.downloadImage(gd, {format: 'png'}); })
-        .then(function() {
-            var args = helpers.octetStream.calls.allArgs();
-            var blob = args[0][0];
-            expect(blob.slice(0, 8)).toBe(';base64,', 'format:png');
-            var size = getImageSize('data:image/png' + blob);
-            expect(size.width).toBe(gd._fullLayout.width, 'fullLayout width');
-            expect(size.height).toBe(gd._fullLayout.height, 'fullLayout height');
-            expect(size.width).toBe(500, 'div width');
-            expect(size.height).toBe(300, 'div height');
-        })
-        .then(done, done.fail);
-    });
 });
 
 function downloadTest(gd, format) {