Display document on user's device

I'm currently utilizing FileSaver.js to display an object array on the client side using HTML/Typescript.

var blob = new Blob([JSON.stringify( marray)], {type: "text/plain;charset=utf-8"});
 saveAs(blob, "Data.txt");

While it's functioning correctly, the issue lies in the fact that it automatically downloads to the default download folder. I'm looking to specify a file path along with its name. Any suggestions? Or a different approach to achieve this task. The use of fs is unsuccessful in this scenario, as it doesn't recognize fs and triggers the error 

fs.writefilesync is not a function

javascripttypescriptfilesystems

Answer №1

  1. Can you determine the user's path?

  2. It's not secure to try and access the user's file system

  3. If you inspect the source code, you'll find a basic implementation using a simple link click download

    var link = document.createElement('a')
// ...
link.href = blob
// ...
link.dispatchEvent(new MouseEvent('click'))

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

Developing a Library for Managing APIs in TypeScript

I'm currently struggling to figure out how to code this API wrapper library. I want to create a wrapper API library for a client that allows them to easily instantiate the lib with a basePath and access namespaced objects/classes with methods that cal ...

javascripttypescriptclassinheritancecomposition

Sweetalert fails to display following a successful execution of the function

Everything seems to be working fine with the Sweetalert warning after clicking the delete button, but I'm having trouble getting the confirmation alert in the ajax success function to display on the page. As a beginner in coding, I was following a tu ...

javascriptphpajaxbootstrap-4sweetalert

Tips for maintaining a loading screen for longer than 4 seconds?

I want to maintain the loading screen for a minimum of 4 seconds. However, the timer at the end does not seem to be functioning as expected. Here is the code snippet I am using: window.addEventListener("load", () => { const preload = document.querySe ...

javascripthtmlcss

Issues with retrieving data from nested nodes while parsing NOAA weather information using Javascript XML

Seeking assistance with my Javascript code, which is designed to extract weather data from NOAA xml files (obtained from this link: ). Currently, I have included a snippet of the XML as a string: var xmlDoc = $.parseXML("<data>\ <weather tim ...

javascriptjqueryxml

What steps can be taken to have Eslint/Prettier report errors and warnings within a CI environment?

Recently, I encountered an issue with my Vue app where I am using Eslint with Prettier. Even though I have set up a Github action to check the code style, running npm run lint -- --no-fix only logs the warnings and does not cause the workflow to fail. I r ...

javascriptvue.jsnpmeslintprettier

What is the method for retrieving the value of a text field in AngularJS?

I am trying to retrieve the value from a text field using AngularJS when a form is submitted. However, the code below always returns "undefined". Here is the HTML snippet: <form ng-submit="AdvanceSearchSubmit($event)" name="AdvanceSearch" novalidate& ...

javascriptangularjsformsangularjs-forms

The process of uploading data onto a map using jquery is quite inconsistent in its functionality

HTML Instructions: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1"> <me ...

javascriptjqueryajaxcouchapp

Having trouble with routing nesting in react-router v4?

I find myself in the following situation: <Wrapper> <Container> <Route exact path="/" component={UserListing} /> <Route path="/user/:id" component={UserDetails} /> <Route exact path="(/|/user/\d+)" comp ...

javascriptreactjsreact-routerreact-router-v4

Suggestions for displaying images of varying resolutions in a circular format similar to Google's style

What is the best way to display dynamic images with varying resolutions in a circle like Google? I have tried using the Bootstrap class "img-circle", but it only works for images with a resolution of 304*236. If the image resolution is different, it appear ...

javascriptjqueryhtmlasp.net-mvc-4twitter-bootstrap-3

Styling the NavDrawer button and navigation bar in React Native Router Flux

Currently in React Native Router Flux, I have a working NavDrawer component that utilizes react-native-drawer. The default hamburger menu icon on the left side of the navigation bar is what is currently displayed, but I am looking to swap it out for a cust ...

javascriptiosreactjsreact-nativereact-native-router-flux

What is the best way to incorporate quotation marks into a key-value object?

Is there a simple way to convert the following: {"position":4} to this: {"position":"4"} Are there any easy-to-use functions in JavaScript or a Node.js package that can automatically add quotes around values? ...

javascriptjsonnode.jskey-value

Issue with setting multiple values from JSON in React, causing one variable to be undefined

When making an async call to an API and setting the data received from it as a state variable inside a useEffect function, there seems to be an issue. Even though other variables render fine, the instructions variable remains undefined at the time of rende ...

javascriptarraysreactjsjsonundefined

Extract source, medium, etc. data from __utmz GA with the help of JavaScript

Is it possible to retrieve the campaign, source, and medium that Google Analytics records all at once when the page loads? If so, could I use jQuery to look up the values from __utmz? ...

javascriptjquerygoogle-analytics

Preventing the Overwriting of Parent Data by Updated Child Data in VueJS [2.6.14]

Currently utilizing vuejs 2.6.14 and encountering the following problem: Changes made in child component are reflecting in parent component without using $emit in the code. This is contrary to the typical scenario of updating data between parent and chil ...

javascriptvue.jsvuejs2vue-componentvue-props

Accessing nodejs environment variables in a VueJS single page application

Creating a single page application with the use of Vue, running it with nodejs, and encapsulating it in a docker container poses an interesting challenge. In an attempt to adhere to the principles outlined in the 12 factor app methodology, one is advised t ...

javascriptnode.jsvue.jsvuejs2

Using the jQuery Selector with multiple IDs will yield different results compared to using a single ID selector

Initially, I set up some dropdown menus to determine which one has been selected and then load the elements with no issues. However, when I added a new set of dropdowns, my existing function started applying to this one as well because it was too broad. ...

javascriptjqueryhtmlcss

Check the status of the audio source URL using JavaScript

I am currently live streaming audio to my player using the Soundcloud API. <audio></aidio> <source src="soundcloud-track-url"></source> Within my code, I have added an onerror eventListener for both the <audio> and <sourc ...

javascriptjqueryhtml5-audiosoundcloud

How can we effectively use mongoose populate in our codebase?

Hey there, I'm a newbie when it comes to nodejs and mongoose, and I could really use some assistance with mongoose populate. Can someone please help me understand this better? Thanks in Advance! Here are the schemas I'm working with: PropertySch ...

javascriptnode.jsmongodbexpressmongoose

What could be the reason for this Javascript code not functioning as intended, failing to generate a random number between 1 and 3 when I click on any of the buttons

Could someone help me with generating a random number between 1 and 3 each time I click on one of the buttons (rock, paper, scissors)? I am new to programming and not sure what I'm doing wrong. <!doctype html> <html lang="en"> <head& ...

jqueryjavascript

Signaling an Event from a module in the node_modules directory to the Vue application

Is there a way to capture an event emitted by a node module and receive it in a Vue file? Sample code from the JavaScript node module: const EventEmitter = require('events') class Find extends EventEmitter { // code snippets here } class Fin ...

javascriptnode.jsvue.jseventemitter