Download or access blob using FileSaver.js on iOS Chrome and Safari

I'm utilizing the docxtemplater library in JavaScript to generate a docx document.

It works perfectly on desktop browsers, but I'm encountering issues on iOS.

When attempting to download or open the document on iOS, a new tab opens in the browser displaying a URL like:

blob:http://mylocalServer/987788-3524-33iuhih3334434434

Unfortunately, I can't view or download the document in this new tab.

Is there a solution to retrieve the docx document on iOS?

Below is the JavaScript code for creating the docx document:

out=doc.getZip().generate({type:"blob"});
// Provide a name for the output word document
var outputName = "test.docx" ;
saveAs(out,outputName);

The saveAs function is invoked in the FileSaver.js file:

On iOS, the following code is executed after the action:

fs_error = function() {
// avoid unnecessary creation of object URLs
if (blob_changed || !object_url) {
    object_url = get_URL().createObjectURL(blob);
}
if (target_view) {
    target_view.location.href = object_url;
} else {
    var new_tab = view.open(object_url, "_blank");
    if (new_tab == undefined && typeof safari !== "undefined") {
        //Apple does not allow window.open, see http://bit.ly/1kZffRI
        view.location.href = object_url
    }
}
filesaver.readyState = filesaver.DONE;
dispatch_all();
revoke(object_url);
}

Answer №1

In order to ensure proper display and manual download on Safari running iOS 11 or newer, it is recommended to set the Blob type to

application/vnd.openxmlformats-officedocument.wordprocessingml.document
.

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

Close overlay panel in PrimeFaces calendar

One of the components I’m currently working with is an overlayPanel that contains a calendar. Here's a snippet of the code: <p:overlayPanel hideEffect="fade" showCloseIcon="true" dismissable="true" > <h:form> <p:p ...

Numerous perspectives within an angular.js application

Issue I'm currently working on creating a product list with the following initial features: Server-side pagination Server-side filtering I am facing several challenges with my current setup, but the main issue is that I can't figure out how to ...

Unable to retrieve the child value using getJSON

I am currently retrieving data from an API that provides information in a specific format. Here is an example of the JSON data I receive: { "total":1, "launches":[ { "name":"Falcon 9 Full Thrust | BulgariaSat-1", "net":"June 23, 2017 1 ...

NextJs only displays loading animation once

Currently, I am developing an app using Next.js and I am facing a challenge with implementing a loading animation. The animation I am attempting to incorporate consists of three bouncing balls which display correctly. When I launch the Next.js app with n ...

Creating a boundary: A step-by-step guide

There is an element that I need help with <div id="square"></div> This element has the ability to move around the document var square = document.getElementById("square"); document.body.onkeydown = function(e) { if (e.keyCode == 37) { ...

How can I ensure the button remains disabled until all inputs are completed in Redux form?

I am currently studying a react-redux form example that you can find at the following link: In this example, the submit button is enabled if the user fills in at least one input field. I am curious to know if there is a way to enable the button only when ...

Is the Order of a JSON Array Dependable?

When working with JSON, it's clear that relying on the ordering of key-value pairs may not be reliable. For instance, a JSON parser could interpret { "someKey" : "someValue", "anotherKey" : "anotherValue", "evenAnotherKey" : "evenAnotherV ...

Enhance the axis functionality in c3.js

My goal is to display a user's financial data for the previous week, but sometimes they may not have data for all seven days. When using c3.js, I noticed that it automatically extends the 'endpoint-value' to the end of the axis. Is there a w ...

Creating a personalized Angular filter to format various object properties in version 1.5

Trying to figure out how to create a custom Angular 1.5 filter to format values of different object properties. The HTML file includes this code inside an ng-repeat: <div>{{::object.day || object.date || 'Something else'}}</div> S ...

Connecting two COTURN servers for seamless communication

Currently, I have a total of 5 webRTC peers connected through the COTURN server (turnServer1). These peers are all behind symmetric NAT, requiring the use of the TURN server to establish connections. However, due to the media streams with audio and video b ...

apply jQuery to add a class to the parent element when clicked

I am currently facing an issue with my code. It was working fine in jsFiddle, however, when I try to use it outside of fiddle, I am getting errors and it's not working properly. $('.down-photo').click(function() { $(this).parent(&apos ...

The continuous resizing of the window is triggering a loop in flexslider when the resize function is called

I am currently working on a website that utilizes the flexslider plugin. My goal is to detect when the browser window is resized, and then reinitialize the slider so that it can adjust its size and other parameters accordingly. Initially, I was able to a ...

Nested dropdown menus in Vue.js with multiple levels of nesting

I am currently in the process of developing a Vue single page application and have encountered a challenge with a Vue element I am working on. var appCataloghi = new Vue({ el: '#appCataloghi', data: { cataloghi: oggettoCataloghi.catalog ...

I am currently implementing a unique scrollbar component to enhance the user experience within my list of options displayed in the MUI Autocomplete feature

Seeking a way to integrate a custom scroll feature from this npm package into the list of options for Material UI autocomplete. Consistency is key in my application, and the default scroll appearance on mui autocomplete doesn't quite align with the re ...

Ways to display tinyMCE content in a unique manner

I've been diving into node.js/express/mongoDB and decided to create a blog. I encountered an issue with rendering the content inputted through tinyMCE as HTML - instead, it's displaying the tags around my content. How can I properly display it as ...

Using React to organize and showcase text messages in categorized sections

I am looking to organize text messages into different sections based on when they were received: This includes messages received today, yesterday, this week, this month, and continuing in month intervals as needed... For example: https://i.sstatic.net/R ...

Binding Data to Arrays in Polymer

I'm currently diving into the world of Polymer. My goal is to connect an array with my user interface in a way that allows for dynamic updates. Each object within the array contains a changing property, and I want my UI to reflect these changes accord ...

Troublesome issue with the Focus() function in JavaScript

I'm having trouble setting the focus on a textbox with the id "txtCity." document.getElementById("txtCity").focus(); Any suggestions on how to make it work? ...

"Exploring the New Features of Bootstrap 5: Button Collapse and

I am struggling to get two buttons working with Bootstrap 5. The first button is supposed to trigger two JavaScript functions to open a bootstrap carousel. The second button is a simple collapse button designed to reveal a long text string. Unfortunately, ...

When using the .after() method to add jQuery elements, keep in mind that they will not trigger any

Here is the snippet of code provided: <s:file name="upload" id="upload"></s:file> $('input[id^="upload"]').change(function(){ alert("aa"); $(this).after('<input type="file" name="upload_3" id="upload_3"/> ...