Weird effects after direct DOM manipulation

[szekelyisz]

Hi, I want to trigger the browser's file download functionality so that it presents the save as dialog. Using Firefox 88.0.1. Here's how I'm trying to do it:

function download(url: string, filename: string) {
  console.log(filename);
  const link = document.createElement('a');
  link.setAttribute('href', url);
  link.setAttribute('download', filename);
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

It works, but when I call this function, the JS console is cleared. At the top the very first message I see is the value of filename, and some more [WDS]messages after that. At the same time the Inspector goes blank, and Inspect from the context menu doesn't do anything anymore. Everything keeps working though as far as the app is concerned. The only way to get the DOM back into the Inspector again is to reload the entire app.

I guess the problem is that Quasar doesn't like messing with the DOM directly? How can I achieve equivalent functionality then? Thanks!

[ontwikkelfabriek]

@szekelyisz

I guess the problem is that Quasar doesn't like messing with the DOM directly?

Not just Quasar but in Vue it's bad practice to directly manipulate the DOM.
https://www.danvega.dev/blog/2019/04/18/tips-for-vue-developers-avoid-directly-manipulating-the-dom/

How can I achieve equivalent functionality then?

Take a look at this:
https://quasar.dev/quasar-utils/other-utils#export-file

[szekelyisz]

Not just Quasar but in Vue it's bad practice to directly manipulate the DOM.
https://www.danvega.dev/blog/2019/04/18/tips-for-vue-developers-avoid-directly-manipulating-the-dom/

Unfortunately this didn't help with the click() method. If I point the href and download attributes to Vue instance variables, and request the element even via $refs, I still get the original element with attributes set to initial values even if I set the reactive properties to something else before. Maybe I should have called $forceUpdate() or $nextTick() before, but I didn't test that.

Take a look at this:
https://quasar.dev/quasar-utils/other-utils#export-file

Thanks. I already tried this before (just with js-file-download), but back then I thought it's more suitable for me to trigger the browser's native download function. Then I realized that it's actually better this way. It works now.

[rstoenescu]

Just took a look at js-file-download. It uses the same principle as our exportFile() util.

[rstoenescu]

Check the browser support for the download attribute on an <A> tag and revisit its documentation. What seems to happen for you is that the browser navigates to that URL, so away from your website/app :)
This has nothing to do with Quasar or with Vue.

[szekelyisz]

Yes exactly that was happening. Turns out the Content-Type of the returned file was set to text/plain so the browser was trying to render it. Set it to application/octet-stream, all problems gone and the download attribute works also as expected. 👍