diff --git a/draftlogs/5838_fix.md b/draftlogs/5838_fix.md new file mode 100644 index 00000000000..3d47b67b8b2 --- /dev/null +++ b/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! diff --git a/src/snapshot/filesaver.js b/src/snapshot/filesaver.js index cd4e58b2044..180d30b9b39 100644 --- a/src/snapshot/filesaver.js +++ b/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')); }); diff --git a/test/jasmine/tests/download_test.js b/test/jasmine/tests/download_test.js index ad1303332aa..3479d900a98 100644 --- a/test/jasmine/tests/download_test.js +++ b/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) {