时间戳

首页 > 解决方案 > javascript中的blob创建函数保存多个文件

javascript - javascript中的blob创建函数保存多个文件

问题描述

有人可以向我解释这段代码是如何工作的。此外，输出不是我想要的。它保存 2 个文件而不是 1 个。
Javascript

function saveTextAsFile() {
     var textToWrite = document.getElementById('textArea').innerHTML;
     var textFileAsBlob = new Blob([ textToWrite ], { type: 'text/plain' });
     var fileNameToSaveAs = "file.txt";
   
     var downloadLink = document.createElement("a");
     downloadLink.download = fileNameToSaveAs;
     downloadLink.innerHTML = "Download File";
     if (window.webkitURL != null) {
       downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
     } else {
       downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
       downloadLink.onclick = destroyClickedElement;
       downloadLink.style.display = "none";
       document.body.appendChild(downloadLink);
     }
   
     downloadLink.click();
   }
   
   var button = document.getElementById('save');
   button.addEventListener('click', saveTextAsFile);
   
   function destroyClickedElement(event) {
     document.body.removeChild(event.target);
   }

HTML

    <button id="save" onclick="saveTextAsFile()">Save</button>
    <textarea id="textArea" class="Textarea" placeholder="Click to Type" cols="20"></textarea>

标签： javascripthtml

解决方案

您的代码不起作用：

  1. .valuetextarea 输入值是用not读取的.innerHTML，你没有输出所以改变： var textToWrite = document.getElementById('textArea').innerHTML; 到 var textToWrite = document.getElementById('textArea').value;

  2. 您得到 2 个文件，因为您在调用相同函数的同一个按钮上创建了 2 个相同事件，删除其中一个：

    <button id="save" onclick="saveTextAsFile()">Save</button> 这里删除onclick="saveTextAsFile()"或删除这两行：

    var button = document.getElementById('save');

    button.addEventListener('click', saveTextAsFile);

这将修复您的错误，并且就整个代码的工作方式而言，这不是代码审查网站，请访问https://codereview.stackexchange.com/或谷歌搜索每个命令并阅读其定义。

推荐阅读