When you're downloading a file in Safari, the filename ends up being displayed as 'unidentified'

I am encountering an issue with the code I implemented that downloads a file in Safari, but the filename appears as 'untitled'. Interestingly, it works fine in other browsers.

var saveData = (function () {
    var base64 = "data:application/msword;base64,iVBOR---<some data>---JoU8gAAAAASUVORK5CYII=";
    var uri = encodeURI(base64);
    var anchor = document.createElement('a');
    document.body.appendChild(anchor);
    anchor.href = uri;
    anchor.download = "hello";
    
    anchor.click();
    document.body.removeChild(anchor);
}());
saveData();

If you want to test this code, you can find it on JSFiddle. Click here for JSFiddle link

Answer №1

element.setAttribute("download", "hello");

Ensure that your safari version is 10.1 or higher since the download attribute is only supported for safari from 10.1 onwards, as indicated in this source.

UPDATE:

You have the option to utilize FileSaver.js, which provides support for a wide range of browsers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having difficulty linking the Jquery Deferred object with the Jquery 1.9.1 promise

I have been developing a framework that can add validation logic at runtime. This logic can include synchronous, asynchronous, Ajax calls, and timeouts. Below is the JavaScript code snippet: var Module = { Igniter: function (sender) { var getI ...

Attempting to route a selector, yet on the second attempt, the entity is successfully transferred

I am currently working on developing a function that will switch the image every half second for 10 iterations. During the final iteration, the image src will be set to the actual value. Everything seems to work fine for the first loop, however, when the s ...

Blazor JavaScript interop encountering difficulty sending parameters to C# function

I'm encountering an issue where I cannot pass arguments to a C# method from JS in Blazor. Here is the code snippet causing the problem: <button class="m-2 btn btn-secondary" @onclick="FindMultiplication">Show Sum</button& ...

The functionality of a div element appears to be impaired when attempting to include a newline character

I have a div element <div id="testResult" style="padding-left: 120px;"> My goal is to include text with newline character '\n' inside the div. However, when I view my html page, the text does not respect the newline character. $( ...

Is there a way to add an AngularJS module dependency without having to include it in the dependency array during the module definition process?

One way to ensure module dependencies are available is by defining them when declaring a module. For example: angular.module("myApp",["myDependentModule"]); As the application grows and modules accumulate more dependencies, it can become challenging to m ...

Looking for a solution to troubleshoot issues with the updateServing function in JavaScript?

I am attempting to create a function that will calculate the portion sizes for the ingredients on my website. This function is located in the Recipe.js file and appears as follows: updateServings(type) { // Servings const newServings ...

convert webpages and images to PDF with a custom watermark

Looking to convert images fetched from the server into PDF format with a watermark by clicking a button. It would be ideal if there is a plugin that allows for PDF preview with disabled user selection and copy options. The website's platform is Sales ...

Utilize the Jest moduleNameMapper for locating files: "resolver": undefined

Among the various files I have, there is a text file located in the component directory within the path: src/components/text Despite this, Jest is unable to locate the file when utilizing the webpack alias import Text from "components/text"; I ...

Transfer the html div element to the ajax request

My server-side code runs multiple bigquery queries and organizes the results in a table. The client calls this code via an ajax request. I want to send the table/div generated by the server-side code to the client so that it can be rendered there. Is this ...

Is it possible to connect a JavaScript file to an HTML document within a React application?

I have been developing a React website with the following file structure: public: index.html second.html src: index.js second.js table.js forms.js The main page (index.js) contains both a form and a table. One of the columns in the table has a link t ...

Guide on inserting text input value into the href attribute of a hyperlink

Lately, I've been facing an issue that has been troubling me for the past few hours. I have a search input field where users can enter text and click send. The entered text should then be added to the href attribute and sent to the results page for qu ...

I am facing an issue with properly linking my jQuery

After searching through numerous posts on this website, I have yet to find a solution to my problem. My issue involves trying to implement a simple jQuery function that is not functioning as expected. It appears that the jQuery link may not be properly set ...

Tips for customizing font color on Google Maps Marker Clusterer

Is there a way to adjust the font color of a markerclusterer marker? Below is my current code for customizing the marker's style: mcOptions = {styles: [{ height: 27, url: "image.png", width: 35 ...

Chrome's inability to efficiently handle chunked responses in comparison to Firefox and Safari

I am currently working on a unique test node server that sends chunked responses every two seconds with the specified headers: response.setHeader('Content-Type', 'text/plain') response.setHeader('Transfer-Encoding', 'chu ...

Tips for minimizing padding in X-Range graphs

Is there a way to reduce the overall height of my X-Range chart by adjusting the padding on the Y axis around each series? I have experimented with different properties, such as adding groupPadding: 0, pointPadding: 0, and other parameters using this jsfi ...

Opting for Mysql over MongoDB as the provider in Next.js with Next-auth

Exploring the Next.js framework for the first time, I've dived into using Next-auth to handle sign-up/login functionality based on the provided documentation. My experience so far has been smooth, especially with the MongoDB provider as recommended i ...

Is there a way to retrieve the line number of an error within a dynamically inserted <script> element?

When I dynamically create a script element and add it to the page, the errors do not give me the line numbers of the script itself, but instead provide the line number where I append the script. The following code in a .js file will result in an error mes ...

The datatable fails to render after executing a function in AngularJS

When I load the page without calling a function, the data is displayed in a datatable perfectly fine. However, if I try to generate the datatable after calling a function, it does not work. HTML: <div class="widget-body no-padding"> ...

Utilizing Visuals from a Vue Component Collection

As I attempt to publish a Vue library to npmjs, I encounter an issue with the images within it. After publishing the app to NPM and importing it into my main app, everything appears to be working correctly. However, the paths to the images in the library ...

Achieving unique proportions with HTML5 video resizing

On my page, I plan to showcase a video specifically for desktop browsers. I have devised some code to determine whether the video is in landscape or portrait orientation. The challenge lies in deciding what to do based on this orientation: If the video is ...