使用 JavaScript 创建文本文件

create text file using javascript

本文关键字：文件 文本 创建 JavaScript 使用      更新时间：2023-09-26

我想使用 javascript 创建文本文件（记事本类型文件）。我的代码在下面给出，但它不起作用。向我建议创建文本文件的任何解决方案。

var txt = new ActiveXObject("Scripting.FileSystemObject");
var s = txt.CreateTextFile("D:''test.txt", true);// means file is store in my D drive.
s.WriteLine('Hello');
s.Close();   `

你可以试试这个： 

(function () {
var textFile = null,
  makeTextFile = function (text) {
    var data = new Blob([text], {type: 'text/plain'});
    // If we are replacing a previously generated file we need to
    // manually revoke the object URL to avoid memory leaks.
    if (textFile !== null) {
      window.URL.revokeObjectURL(textFile);
    }
    textFile = window.URL.createObjectURL(data);
    return textFile;
  };

  var create = document.getElementById('create'),
    textbox = document.getElementById('textbox');
  create.addEventListener('click', function () {
    var link = document.getElementById('downloadlink');
    link.href = makeTextFile(textbox.value);
    link.style.display = 'block';
  }, false);
})();
<textarea id="textbox">Type something here</textarea> <button id="create">Create file</button> <a download="info.txt" id="downloadlink" style="display: none">Download</a>

你也可以展示这个演示

以下代码片段演示了如何使用 jQuery 和 HTML5 文件 API 创建文本文件。为了简单起见，在这个例子中，我使用Bootstrap CSS框架来构建页面。

$('#btnSave').click(function() {
  if ('Blob' in window) {
    var fileName = prompt('Please enter file name to save', 'Untitled.txt');
    if (fileName) {
      var textToWrite = $('#exampleTextarea').val().replace(/n/g, 'rn');
      var textFileAsBlob = new Blob([textToWrite], { type: 'text/plain' });
      if ('msSaveOrOpenBlob' in navigator) {
        navigator.msSaveOrOpenBlob(textFileAsBlob, fileName);
      } else {
        var downloadLink = document.createElement('a');
        downloadLink.download = fileName;
        downloadLink.innerHTML = 'Download File';
        
        if ('webkitURL' in window) {
          // Chrome allows the link to be clicked without actually adding it to the DOM.
          downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
        } else {
          // Firefox requires the link to be added to the DOM before it can be clicked.
          downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
          downloadLink.click(function(){
            document.body.removeChild(event.target);
          }); 
          
          downloadLink.style.display = 'none';
          document.body.appendChild(downloadLink);
        }
        downloadLink.click();
      }
    }
  } else {
    alert('Your browser does not support the HTML5 Blob.');
  }
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="description" content="Your HTML, CSS, and JavaScript playground.">
    <title>HTML, CSS, JS Playground</title>
    <meta content="width=device-width, initialscale=1" name="viewport"> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
    
    <script>
    $(document ).ready(function() {
        //Put your java script here
    });
    </script>
</head>
<body>
    <div class="container">     
        <h1>Reading and Creating Text Files Using the HTML5 File API and jQuery</h1>
        <div class="form-group">            
            <button type="button" class="btn btn-default" id="btnOpen">Open...</button>
            <button type="button" class="btn btn-default" id="btnSave">Save</button>
        </div>      
        <input type="file" id="exampleInputFile" accept=".txt,.csv,.xml" class="hidden">
        <div class="form-group">
          <textarea class="form-control" rows="15" id="exampleTextarea"></textarea>       
        </div>
    </div>
</body>

源

相关文章：