Javascript 使用具有自定义文件名的 FileSaver 保存 .txt 文件

Question

我想在使用此处提供的 FileSaver 工具保存时指定我的 .txt 文件名：

https://github.com/eligrey/FileSaver.js/

据我在网上挖掘，我发现默认情况下没有选项可以将其保存在指定的文件名下，就像这里指出的那样：

Is there any way to specify a suggested filename when using data: URI?

Save file Javascript with file name

Can't specific file name with FileSaver.js

没有可靠的方法来做到这一点。

但是我发现了一些让我完全满意的东西。该页面名为：FileSaver.js demo

https://eligrey.com/demos/FileSaver.js/

其中包括使用指定文件名保存文件的几个选项，以及 .txt 文件。

这意味着，显然存在该选项，因为他们已经使用它进行了管理。

在我检查了他们的网站后，我尝试复制他们使用的 JavaScript 代码。我的一段代码现在看起来像这样：

    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/eligrey/FileSaver.js/c3e4a45021f205a790a2699f4af7a5b85fb63e09/demo/demo.css"/>

    <script src="../js/FileSaver.js"></script>

    <script async="" src="https://cdn.rawgit.com/eligrey/Blob.js/0cef2746414269b16834878a8abc52eb9d53e6bd/Blob.js"/>
    <script async="" src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"/>
    <script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/5ed507ef8aa53d8ecfea96d96bc7214cd2476fd2/FileSaver.min.js"/>
    <script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/5ed507ef8aa53d8ecfea96d96bc7214cd2476fd2/demo/demo.min.js"/>

    <textarea class="input" id="text" placeholder="Once upon a time..."/></textarea>
    <form id="text-options">
        <label>Filename: <input type="text" class="filename" id="text-filename" placeholder="a plain document"/>.txt</label>
        <input type="submit" value="Save"/>
     </form>

但不幸的是，它没有按预期工作。

当我点击“保存”按钮时，它只会刷新页面，而不是使用 <textarea> 内容保存相关文件。

有什么办法可以在某个时候修复它吗？

Answer 1

我在这里找到了一些合理的方法，这使我的代码正常工作。

https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server

代替标准的 FileSaver.js 函数

            function saveURLtoTXTfile() {
            var Urltext = document.getElementById("text").value;

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

我们可以像这样根据标签值定义我们的文件名：

  <form id="text-options">
        <textarea class="input" id="text" rows="1" cols="30"></textarea>
        <label>Filename: <input type="text" class="filename" id="text-filename" 
  placeholder="a plain document"/>.txt</label>
        <button type="button" class="formreturn" 
  onclick="saveURLtoTXTfile();">Save survey details as a text file</button>
    </form>

   function saveURLtoTXTfile() {
            var Urltext = document.getElementById("text").value;
            var textfilename = document.getElementById("text-filename").value;
            var blob = new Blob([Urltext], {type: "text/plain;charset=utf-8"});
            saveAs(blob, textfilename);
        }

然后我们从文件名中的标签中获取值。

Answer 2

"use strict";
window.addEventListener('load', onLoaded, false);

function onLoaded(evt)
{
    // use either one.
    //var saveBtn = document.querySelector('#saveBtn');
    var saveBtn = document.getElementById('saveBtn');
    
    saveBtn.addEventListener('click', onSaveBtnClick, false);
}

function onSaveBtnClick(evt)
{
    let textData = document.querySelector('#textInput').value;
    let fileName = document.querySelector('#fileNameInput').value;
    
    alert(`${fileName}.txt - ${textData}`);
}

.panel
{
    display: block;
    width: 320px;
    margin: 16px;
    background-color: #f0e3bb;
}

    <div class='panel'>
        <h2>Saving text</h2>
        <textarea id='textInput' placeholder="a plain document"></textarea><br>
        <label><input type='text' id='fileNameInput' placeholder='filename'/>.TXT</label><br>
        <button id='saveBtn'>Save</button>
    </div>