Get the docx file as a blob

When sending a docx file from the backend using Express, the code looks like this:

module.exports = (req, res) => {
  res.status(200).sendFile(__dirname+"/output.docx")
}

To download and save the file as a blob in Angular, the following code snippet is used:

 $http({
   url: '/api_cv/cv/gen',
   method: "PUT",
   responseType: 'blob'
}).success(function (data, status, headers, config) {
   var blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
   var fileName = headers('content-disposition');
   saveAs(blob, 'file.docx');
}).error(function (data, status, headers, config) {
    console.log('Unable to download the file')
});

It successfully works in Chrome and Firefox. However, when tested in Safari, a new tab opens without downloading the file. In Internet Explorer (tested via Azure RemoteApp on a Mac), an error message stating, "your current security settings do not allow this file to be downloaded" appears.

The SaveAs function used is from https://github.com/eligrey/FileSaver.js/

Is there an alternative method that can work across all modern browsers and IE10+?

Answer №1

Instead of utilizing the saveAs function, have you considered trying the following approach:

var url = window.URL || window.webkitURL;
var downloadUrl = url.createObjectURL(blob);

var a = doc.createElement("a");
a.style.display = "none";

if (typeof a.download === "undefined") {
   window.location = downloadUrl;
} else {
   a.href = downloadUrl;
   a.download = fileName;
   doc.body.appendChild(a);
   a.click();
}

You can then remove the anchor element once you are done using it. I am curious if the issue lies in the saving process, as I haven't had much exposure to FileSaver. This is the method I have used previously with success.

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

Modifying the color of specific sections of SVG elements

Interested in utilizing the d3.js timeknots component, a svg visualization that includes line and circle elements. My goal is to implement a stopwatch animation that dynamically changes the color of the svg visualization over time. I am contemplating crea ...

Tracking changes in real time and calculating the sum with AJAX, PHP, and MySQL for efficient processing

Initially, I kindly request you to read this until the end. I am in dire need of assistance with my problem as I have searched for solutions but still remain clueless. Referring to the image provided, the first 'Product & Total Product' element ...

Strange behavior detected in TypeScript generic function when using a class as the generic parameter

class Class { } const f0 = <T extends typeof Class> (c:T): T => { return c } const call0 = f0 (Class) //ok const f1 = <T extends typeof Class> (c:T): T => { const a = new c() return a //TS2322: Type 'Class' is not assigna ...

Tips for showcasing live data in Material-UI's table component

My challenge lies in displaying tabular data fetched from an API in a Material-UI Table. Specifically, I aim to exhibit the fields id and name stored within groups. How can I achieve this result? Beneath is my current code snippet which runs without error ...

Using JQuery to specify an attribute as "required" along with a value does not function as expected

Something seems off with this: $("#elementId").attr("required", "true"); In Chrome and Firefox, the DOM either displays required as the attribute (with no value) or required="" (empty value). Interestingly, it doesn't make a difference what value w ...

The ancient oracle of Delphi and the modern login portal of Microsoft

I need to login to a site that utilizes . To streamline the process for end-users, I want to store credentials in an .ini file and inject them into a two-stage JavaScript online prompt. Is there a way to have Delphi run a program with a browser that auto ...

Node.js: The REST client delivers the response even before it has been officially returned

I've been experimenting with the node-rest-client REST client in Node.js. However, I'm facing an issue where when I run the code snippet below, it returns a value of null. Oddly enough, the response is printed to the console after that. Is there ...

Integrate Form.io with a SQL Server database

I'm looking for guidance on connecting SQL Server data with form.io. I've already created a basic form in the form.io application and embedded it into my project. Now, I'd like to store the submitted data in an SQL Server database. Any assis ...

Tips on accessing files saved in a one-to-many connection using Mongoose

I have multiple Schemas set up for Shops and Products. Each shop can have a variety of products, and I currently have 5 different shops with their own unique product listings. While I am able to save the products and find their corresponding IDs within eac ...

Include a Class into a label using jQuery

I am having an issue where I need to specifically add the error class to a <label> with the name attribute set to choice_16_0. However, when I try to achieve this using my code, it ends up changing all labels on the page to <label for="choice_16_0 ...

Record the clicks registered within an external jQuery UI modal window

I have a jQuery UI dialog window that contains thumbnail images. When an image is clicked, I want to retrieve the id of that specific image. I believe using data attributes can help me achieve this easily. However, I'm facing an issue where I am unab ...

The process of overriding CSS applied through JavaScript

I am using a third-party multi-select dropdown. Similar to Select2, the multi-select dropdown is created using JQuery with select2.min.js and the width of the dropdown is automatically calculated. Is there any way to apply static width to it, as I believe ...

The image could not be loaded due to a breach of the content security policy

Trying to load images from an external link in a chrome app is causing an error Refused to load the image 'unsafe:' because it violates the following Content Security Policy directive: "img-src 'self' blob: filesystem: data: ch ...

Trouble with the display none function

I am trying to achieve the following: If my shopping cart is empty, I want another div to display over the top of it. Instead of seeing the cart, users should see a message saying 'your cart is empty'. Currently, I have set the other div to dis ...

Create dynamic HTML files using Express, EJS, and FS, and deliver them using Nginx as the server instead of relying

Imagine a scenario where we have a JSON object: [ { "id": 1, "title": "Title 1", "description": "Description 1" }, { "id": 2, "title": "Title 2", ...

Display JSON data in a dynamic d3.js visualization

Using d3.js, I have created a chart that displays weekly scores when hovering over the months. To view the chart, click here: https://jsfiddle.net/qp7L1hob/1/ In my database, I maintain a table called Table pointsScored where I keep records of employee s ...

JavaScript Selenium code encountering an "Element not interactable" error with input textbox element

Currently, I am attempting to utilize Selenium in order to automate inputting a location into the search bar on weather.com. Initially, I wrote the code in Python and it seems to be functioning properly: // this works driver = webdriver.Chrome(ChromeDriver ...

The Nextjs Image was preloaded using link preload, but it remained unused after a short period following the window's load event

I've encountered an issue while working with Next.js, a React-based framework. I am attempting to display the logo.png image using the Image component provided by Next.js. My image is stored in this folder: public/img Here is the code I'm using ...

Material Style Minimal - There is a slight space between the text field and the colored line at the bottom

Having a problem with Material Design Lite text field where there is a small gap between the bottom colored line and the gray starting line. Every MDL text field example I try on my page shows the same issue. What could be causing this locally? My frontend ...

The error message indicates that the function app.address is not recognized as a valid

Using Mocha for API testing, I have set up a file to test the users routes within its own custom file. Additionally, an empty JSON file is created and cleared before and after each test. File with tests -> user-routes.spec.js : const request = require ...