Safari displays the contents of JSON files instead of automatically downloading them

I am facing an issue with a JavaScript code that generates a link to download a JSON file. The link is structured like this:

<a href="data:text/json;charset=utf-8,..." download="foo.json">download</a>

While the link works perfectly in Chrome and Firefox, Safari does not download the file but instead displays the JSON content in the browser window. I have tried changing the mime-type to application/octet-stream, but Safari still insists on showing the file.

Is there a way to make Safari download the file without requiring users to adjust their browser settings or resorting to zipping the file?

Thank you!

javascriptjsonsafari

Answer №1

The proper handling of MIME types is essential in this scenario. It is recommended to modify the response and set the mime type as application/json

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

Steps for creating a node.js and ejs file to deploy on 000webhost

I have developed a simple todo-app using node.js and ejs templating. My goal is to host it using 000webhost, a free web-hosting service. I successfully hosted a react app for free on this platform by running "npm run build", which converted the ...

javascriptnode.jsreactjsejsweb-hosting

Is there a way to dynamically change the helperText of a Material UI TextField using its current value through code?

I'm currently attempting to dynamically change the helperText of a Material UI TextField based on the value entered into the field. Below is my current implementation: const defaultScores = { STR: 10, DEX: 10, CON: 10, INT: 10, WIS: 10, CH ...

javascriptreactjsmaterial-ui

What is the best way to integrate a Vue component into a Knockout application?

My webpage is filled with knockout code, but I'm hoping to integrate a Vue.js component for a specific section. I attempted using controlsDescendantBindings on a surrounding tag for the Vue component, and it seems to be partially functional (I tried ...

javascriptvue.jsknockout.js

What is the best method for connecting my HTML to jQuery code?

Apologies for my lack of experience in coding, but I will try to keep this brief. To put it simply, when I insert my jQuery code directly into the HTML file below the content, it works perfectly - the element I want to animate 'hides' and then & ...

javascriptjqueryhtml

Changes to the parent state will not be reflected in the child props

When the child component PlaylistSpotify updates the state localPlaylist of its parent, I encounter an issue where the props in PlaylistSpotify do not update with the new results. I've been struggling to figure out what I'm missing or doing wrong ...

javascriptreactjscomponentsreact-propsreact-state

What is the best way to remove the hover effect from a specific element within a div?

I am looking to achieve a specific hover effect where the white part does not darken when hovering over a certain element within its child elements. Here is the HTML code I have: <div className= {css.searchBarDiv}> <div className={css.searchBar ...

javascripthtmlcssreactjs

Transform the terraform resource data, which is in the form of a map containing keys of type string

I am currently developing a custom terraform provider and have encountered an issue. I'm attempting to convert a schema.TypeList field into a struct. Here is what the TypeList looks like: "template": { Type: schema.TypeLi ...

jsongoterraformterraform-provider-gcphcl

Next.js v13 and Firebase are encountering a CORS policy error which is blocking access to the site.webmanifest file

Background: I am currently developing a website using Next.js version 13 in combination with Firebase, and I have successfully deployed it on Vercel. Upon inspecting the console, I came across two CORS policy errors specifically related to my site.webmani ...

javascriptreactjstypescriptnext.jsvercel

URL not passing on variable

Here is the code I have for a basic 'change email' script. I'm currently struggling to get it working and can't figure out what's wrong. <?php if (isset($_GET['u'])) { $u = $_GET['u']; } if (isset($_POS ...

javascriptphpajaxpostget

Mixing unpredictable and inconsequential symbols when revising a JSON document

Apologies for the lack of clarity in my problem description, but I am struggling to identify the exact nature of the issue. So, here it is. I possess a python file named edit-json.py. import os, json def add_rooms(data): if(not os.path.exists('r ...

pythonjsonfile-handling

Different ways to call an ES6 class that is bundled in the <script> tag

Currently, I am utilizing Webpack to transpile my ES6 classes. Within the bundle, there is a Service class that can be imported by other bundled scripts. class Service { constructor() { // } someMethod(data) { // } } expo ...

javascriptecmascript-6

Verify modifications prior to navigating in React or Next.js

I have a simple Next JS application with two pages. -> Home page import Header from "../components/header"; const handleForm = () => { console.log("trigger"); }; export default () => ( <> <Header /> & ...

javascriptreactjsroutesnext.js

Guide on setting up Tailwind CSS and material-tailwind concurrently within the tailwind.config.js configuration file

I am looking to integrate both Tailwind and Material Tailwind in a Next.js 14 project. Below is my customized tailwind.config.ts file (already configured with Tailwind CSS): import type { Config } from 'tailwindcss' const config: Config = { ...

javascriptnext.jsmaterial-uitailwind-cssnext.js13

Mapping inheritance in Blaze Persistence EntityViews

Currently, my microservice utilizes Quarkus in combination with Blaze Persistence. The entity model I am working with includes the following: @Entity public class Content extends BaseEntity { private boolean deleted; private boolean published; } @ ...

jsoninheritanceblaze-persistence

Nuxt's axios is encountering difficulties in managing the server's response

Having just started working with Nuxt.js, I encountered an unusual issue. There is an endpoint in my backend API that allows users to reset their password by sending a token along with a new password. Although the request is being sent correctly and the s ...

javascriptvue.jsvuejs2nuxt.js

I'm having some trouble with my middleware test in Jest - what could be going wrong?

Below is the middleware function that needs testing: export default function validateReqBodyMiddleware(req: Request, res: Response, next: NextFunction) { const { name, email }: RequestBody = req.body; let errors: iError[] = []; if (!validator.isEmai ...

javascriptnode.jstypescriptexpressjestjs

Creating a welcome screen that is displayed only the first time the app is opened

Within my application, I envisioned a startup/welcome page that users would encounter when the app is launched. They could then proceed by clicking a button to navigate to the login screen and continue using the app. Subsequently, each time the user revisi ...

javascriptangulartypescriptionic-framework

JavaScript: A step-by-step guide to extracting the file name and content from a base64 encoded CSV

I have a base64 string that was generated by encoding a csv file, const base64 = 'LS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLTExNDc2MDgwNjM5MTM4ODk4MTc2NTYwNA0KQ29udGVudC1EaXNwb3NpdGlvbjogZm9ybS1kYXRhOyBuYW1lPSJmaWxlIjsgZmlsZW5hbWU9ImNoYXJ0T2ZBY2NvdW50LmNzd ...

javascriptnode.jsstreambase64buffer

Encountering the error message "Unable to access /" on the browser when using express router

Just started working with the express Router for the first time. Here is my route.js: var express = require('express'); var router = express.Router(); router.get('/', function(req, res) { res.send('home page'); }); module.e ...

javascriptnode.jsexpress

"Encountering an Unexpected Error with Flutter/Dart JSON

There seems to be a problem with handling Json in Dart. Future Search(String tags) async{ final response = await http.get(baseURL + tags + "&limit=100",headers: {"Accept": "text/html,application/xml"}); if (response.statusCode == 200) { ...

androidjsonflutterdart