jcubic@onet.pl
How to download a file in JavaScript?

To download a file in JavaScript, you can use the download attribute of the <a> tag. Here is an example:

<a href="path/to/your/file" download>Download File</a>

When this link is clicked, the file will be downloaded to the user's device.

You can also use the fetch() method to retrieve the file, and then create an object URL that points to the file using the URL.createObjectURL() method. You can then use the a.download attribute to download the file. Here is an example:

fetch('path/to/your/file') .then(response => response.blob()) .then(blob => { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = 'your-file-name.ext'; document.body.appendChild(a); a.click(); URL.revokeObjectURL(url); document.body.removeChild(a); });

This method allows you to specify the file name of the downloaded file. Note that this method is not supported in all browsers, so you may want to check for browser compatibility before using it.

jcubic@onet.pl
How about if I have text in variable and want to download that as a file?

To download text from a variable as a file, you can use the Blob constructor to create a Blob object that contains your text. You can then create an object URL that points to the Blob using the URL.createObjectURL() method, and use the a.download attribute to download the file. Here is an example:

const text = 'This is the text that you want to download'; const blob = new Blob([text], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = 'your-file-name.txt'; document.body.appendChild(a); a.click(); URL.revokeObjectURL(url); document.body.removeChild(a);

In this example, the text is stored in a Blob object with the text/plain MIME type, which indicates that it is a plain text file. You can change this to a different MIME type if you want to download the text as a different file type.

Note that this method is not supported in all browsers, so you may want to check for browser compatibility before using it.

jcubic@onet.pl
How to download HTML file that is created from contents if the page?

To download the contents of an HTML page as a file, you can use the Blob constructor to create a Blob object that contains the HTML code. You can then create an object URL that points to the Blob using the URL.createObjectURL() method, and use the a.download attribute to download the file. Here is an example:

const html = document.documentElement.outerHTML; const blob = new Blob([html], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = 'your-file-name.html'; document.body.appendChild(a); a.click(); URL.revokeObjectURL(url); document.body.removeChild(a);

In this example, the HTML code is stored in a Blob object with the text/html MIME type, which indicates that it is an HTML file. You can change this to a different MIME type if you want to download the HTML as a different file type.

Note that this method is not supported in all browsers, so you may want to check for browser compatibility before using it. Additionally, this method will only download the contents of the current page, not any external resources (such as images or stylesheets) that are included on the page.

jcubic@onet.pl
How about if I have specific element with a class that starts with ThreadLayout__NodeWrapper

To download the contents of a specific element with a class that starts with ThreadLayout__NodeWrapper, you can first use the querySelector() method to select the element using its class name. You can then use the outerHTML property to get the HTML code of the element, and use the Blob constructor and the URL.createObjectURL() method to create a Blob object and a URL that points to it. Finally, you can use the a.download attribute to download the file.

Here is an example:

const element = document.querySelector('.ThreadLayout__NodeWrapper'); const html = element.outerHTML; const blob = new Blob([html], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = 'your-file-name.html'; document.body.appendChild(a); a.click(); URL.revokeObjectURL(url); document.body.removeChild(a);

In this example, the HTML code is stored in a Blob object with the text/html MIME type, which indicates that it is an HTML file. You can change this to a different MIME type if you want to download the HTML as a different file type.

Note that this method is not supported in all browsers, so you may want to check for browser compatibility before using it. Additionally, this method will only download the contents of the selected element, not any external resources (such as images or stylesheets) that are included on the page.

jcubic@onet.pl
The quesrySelector will find full classname and I want to find element that start with a give classname but the classname is much longer with random values.

To find an element that has a class name that starts with a specific value, you can use the querySelector() method and a attribute selector that uses the ^= operator. The ^= operator will match any element whose class attribute starts with the specified value.

Here is an example:

const element = document.querySelector('[class^="ThreadLayout__NodeWrapper"]');

In this example, the querySelector() method will select the first element on the page whose class attribute starts with ThreadLayout__NodeWrapper. Note that this will match any class name that starts with ThreadLayout__NodeWrapper, regardless of the rest of the class name.

You can then use the outerHTML property to get the HTML code of the element, and use the Blob constructor and the URL.createObjectURL() method to create a Blob object and a URL that points to it. Finally, you can use the a.download attribute to download the file.

Here is an example of how to do this:

const element = document.querySelector('[class^="ThreadLayout__NodeWrapper"]'); const html = element.outerHTML; const blob = new Blob([html], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = 'your-file-name.html'; document.body.appendChild(a); a.click(); URL.revokeObjectURL(url); document.body.removeChild(a);

In this example, the HTML code is stored in a Blob object with the text/html MIME type, which indicates that it is an HTML file. You can change this to a different MIME type if you want to download the HTML as a different file type.

Note that this method is not supported in all browsers, so you may want to check for browser compatibility before using it. Additionally, this method will only download the contents of the selected element, not any external resources (such as images or stylesheets) that are included on the page.