{"id":811,"date":"2024-03-01T10:39:33","date_gmt":"2024-03-01T13:39:33","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=811"},"modified":"2024-03-02T11:17:34","modified_gmt":"2024-03-02T14:17:34","slug":"salvando-arquivos-txt-com-javascript-utilizando-a-biblioteca-filesaver-js","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=811","title":{"rendered":"Salvando Arquivos TXT com JavaScript Utilizando a Biblioteca FileSaver.js"},"content":{"rendered":"\n<p>Salvar arquivos de texto usando JavaScript \u00e9 uma tarefa comum em muitos aplicativos da web. Isso pode ser \u00fatil para v\u00e1rias finalidades, como exportar dados de um formul\u00e1rio, registros de atividades ou qualquer outra informa\u00e7\u00e3o relevante para o usu\u00e1rio. Uma maneira conveniente de realizar essa tarefa \u00e9 usando a biblioteca FileSaver.js, que simplifica o processo de salvar arquivos diretamente do navegador do usu\u00e1rio. Neste artigo, vamos explorar como usar essa biblioteca para salvar arquivos de texto em JavaScript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introdu\u00e7\u00e3o \u00e0 Biblioteca FileSaver.js<\/h2>\n\n\n\n<p>FileSaver.js \u00e9 uma biblioteca JavaScript que fornece uma interface f\u00e1cil de usar para salvar arquivos gerados dinamicamente no navegador do usu\u00e1rio. Ele funciona em todos os navegadores modernos e simplifica a tarefa de salvar arquivos, eliminando a necessidade de usar APIs complicadas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Como Usar a Biblioteca FileSaver.js<\/h2>\n\n\n\n<p>Para come\u00e7ar, primeiro precisamos incluir a biblioteca FileSaver.js em nosso projeto. Voc\u00ea pode baixar a biblioteca diretamente do GitHub ou instal\u00e1-la via npm ou yarn, conforme sua prefer\u00eancia ou podemos tamb\u00e9m trabalhar via CDN (<em>Content Delivery Network<\/em> &#8211; <strong>Rede de Distribui\u00e7\u00e3o de Conte\u00fado<\/strong>).<\/p>\n\n\n\n<p>Depois de incluir a biblioteca em seu projeto, o pr\u00f3ximo passo \u00e9 criar o arquivo de texto que voc\u00ea deseja salvar. Por exemplo, vamos criar uma fun\u00e7\u00e3o que gera um arquivo de texto com conte\u00fado simples:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"757\" height=\"177\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/03\/image.png\" alt=\"\" class=\"wp-image-812\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/03\/image.png 757w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/03\/image-300x70.png 300w\" sizes=\"(max-width: 757px) 100vw, 757px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Neste exemplo, criamos uma fun\u00e7\u00e3o chamada salvarArquivo() que gera um arquivo de texto simples com o conte\u00fado &#8220;Este \u00e9 um arquivo de texto de exemplo.&#8221;. Em seguida, convertemos esse texto em um objeto Blob e usamos a fun\u00e7\u00e3o saveAs() da biblioteca FileSaver.js para salvar o arquivo com o nome &#8220;arquivo.txt&#8221;.<\/p>\n\n\n\n<p>Por fim, precisamos chamar essa fun\u00e7\u00e3o em algum evento de usu\u00e1rio, como um clique em um bot\u00e3o. Por exemplo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"401\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/03\/image-3-1024x401.png\" alt=\"\" class=\"wp-image-815\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/03\/image-3-1024x401.png 1024w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/03\/image-3-300x118.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/03\/image-3-768x301.png 768w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/03\/image-3.png 1108w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>No v\u00eddeo mostro o passo a passo de como criar um projeto utilizando a biblioteca FileSaver.js<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Salvando Arquivos TXT com JavaScript Utilizando a Biblioteca FileSaver.js\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/QHtoAgSCFrc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"pt-br\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Baixando arquivo com FileSaver&lt;\/title&gt;\n    &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/FileSaver.js\/2.0.0\/FileSaver.js\" integrity=\"sha512-UNbeFrHORGTzMn3HTt00fvdojBYHLPxJbLChmtoyDwB6P9hX5mah3kMKm0HHNx\/EvSPJt14b+SlD8xhuZ4w9Lg==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"&gt;&lt;\/script&gt;\n\n    &lt;style&gt;\n        div{\n            margin: 10px auto;\n            width: 50%;\n            min-width: 300px;\n        }\n        input,\n        textarea{\n            width: 100%;\n            min-width: 250px;\n        }\n        body{\n            background-color: rgb(197, 238, 238);\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n   \n    &lt;div&gt;\n        &lt;h3&gt;Salvar arquivo com JavaScript &lt;\/h3&gt;\n        &lt;p&gt;Nome do arquivo:&lt;\/p&gt;\n        &lt;input type=\"text\" id=\"titulo\" placeholder=\"Nome do Arquivo\" autofocus&gt;\n    &lt;\/div&gt;\n\n    &lt;div&gt;\n        &lt;p&gt;Texto&lt;\/p&gt;\n        &lt;textarea id=\"texto\" placeholder=\"Digite seu texto aqui.\"&gt;&lt;\/textarea&gt;\n    &lt;\/div&gt;\n    &lt;div&gt;\n        &lt;button onclick=\"salvar()\"&gt;\n            Salvar\n        &lt;\/button&gt;\n    &lt;\/div&gt;\n\n   &lt;script&gt; \n\n            function salvar(){\n\n                const texto  = document.getElementById('texto').value;\n                const titulo = document.getElementById('titulo').value;\n\n                var blob = new Blob(&#91;texto],\n                {type: 'text\/plain: charset=utf-8'}\n                );\n\n               saveAs(blob, titulo + '.txt');\n\n\n            }\n   \n   &lt;\/script&gt;\n   \n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Considera\u00e7\u00f5es Finais<\/h2>\n\n\n\n<p>Salvar arquivos de texto usando JavaScript \u00e9 uma tarefa comum e \u00fatil em muitos aplicativos da web. A biblioteca FileSaver.js simplifica esse processo, fornecendo uma maneira f\u00e1cil de salvar arquivos diretamente do navegador do usu\u00e1rio. Espero que este tutorial tenha sido \u00fatil para voc\u00ea entender como usar FileSaver.js para salvar arquivos de texto em JavaScript. Experimente e veja como isso pode melhorar a experi\u00eancia do usu\u00e1rio em seus aplicativos da web!<\/p>\n\n\n\n<p>Lembre-se de verificar a documenta\u00e7\u00e3o oficial da biblioteca FileSaver.js para obter mais informa\u00e7\u00f5es e exemplos avan\u00e7ados de uso. Com essa poderosa ferramenta em m\u00e3os, voc\u00ea pode facilmente implementar a funcionalidade de salvamento de arquivos em seus projetos web de forma simples e eficiente.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Salvar arquivos de texto usando JavaScript \u00e9 uma tarefa comum em muitos aplicativos da web. Isso pode ser \u00fatil para v\u00e1rias finalidades, como exportar dados de um formul\u00e1rio, registros de atividades ou qualquer outra informa\u00e7\u00e3o relevante para o usu\u00e1rio. Uma maneira conveniente de realizar essa tarefa \u00e9 usando a biblioteca FileSaver.js, que simplifica o processo de salvar arquivos diretamente do navegador do usu\u00e1rio. Neste artigo, vamos explorar como usar essa biblioteca para salvar arquivos de texto em JavaScript. Introdu\u00e7\u00e3o \u00e0 Biblioteca FileSaver.js FileSaver.js \u00e9 uma biblioteca JavaScript que fornece uma interface f\u00e1cil de usar para salvar arquivos gerados dinamicamente no navegador do usu\u00e1rio. Ele funciona em todos os navegadores modernos e simplifica a tarefa de salvar arquivos, eliminando a necessidade de usar APIs complicadas. Como Usar a Biblioteca FileSaver.js Para come\u00e7ar, primeiro precisamos incluir a biblioteca FileSaver.js em nosso projeto. Voc\u00ea pode baixar a biblioteca diretamente do GitHub ou instal\u00e1-la via npm ou yarn, conforme sua prefer\u00eancia ou podemos tamb\u00e9m trabalhar via CDN (Content Delivery Network &#8211; Rede de Distribui\u00e7\u00e3o de Conte\u00fado). Depois de incluir a biblioteca em seu projeto, o pr\u00f3ximo passo \u00e9 criar o arquivo de texto que voc\u00ea deseja salvar. Por exemplo, vamos criar uma fun\u00e7\u00e3o que gera um arquivo de texto com conte\u00fado simples: Neste exemplo, criamos uma fun\u00e7\u00e3o chamada salvarArquivo() que gera um arquivo de texto simples com o conte\u00fado &#8220;Este \u00e9 um arquivo de texto de exemplo.&#8221;. Em seguida, convertemos esse texto em um objeto Blob e usamos a fun\u00e7\u00e3o saveAs() da biblioteca FileSaver.js para salvar o arquivo com o nome &#8220;arquivo.txt&#8221;. Por fim, precisamos chamar essa fun\u00e7\u00e3o em algum evento de usu\u00e1rio, como um clique em um bot\u00e3o. Por exemplo: No v\u00eddeo mostro o passo a passo de como criar um projeto utilizando a biblioteca FileSaver.js Considera\u00e7\u00f5es Finais Salvar arquivos de texto usando JavaScript \u00e9 uma tarefa comum e \u00fatil em muitos aplicativos da web. A biblioteca FileSaver.js simplifica esse processo, fornecendo uma maneira f\u00e1cil de salvar arquivos diretamente do navegador do usu\u00e1rio. Espero que este tutorial tenha sido \u00fatil para voc\u00ea entender como usar FileSaver.js para salvar arquivos de texto em JavaScript. Experimente e veja como isso pode melhorar a experi\u00eancia do usu\u00e1rio em seus aplicativos da web! Lembre-se de verificar a documenta\u00e7\u00e3o oficial da biblioteca FileSaver.js para obter mais informa\u00e7\u00f5es e exemplos avan\u00e7ados de uso. Com essa poderosa ferramenta em m\u00e3os, voc\u00ea pode facilmente implementar a funcionalidade de salvamento de arquivos em seus projetos web de forma simples e eficiente.<\/p>\n","protected":false},"author":1,"featured_media":819,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/811"}],"collection":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=811"}],"version-history":[{"count":5,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/811\/revisions"}],"predecessor-version":[{"id":821,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/811\/revisions\/821"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/819"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}