Question

我正在尝试编写一个函数，该函数将从textarea中获取值并将其下载为HTML文件。

HTML文件

<textarea id="text-val" rows="4"></textarea>
<a href="" id="dwn-btn">Download your Code</a>

JavaScript函数

function download(filename, html) {
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/html;charset=utf-8,' + encodeURIComponent(html));
    element.setAttribute('download', filename);

    element.style.display = 'none';
    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);
}


document.getElementById("dwn-btn").addEventListener("click", function(){
            var text = document.getElementById("text-val").value;
    var filename = "MyCode.html";

    download(filename, html);
}, false);

我的问题是：如果用户在textarea中放置了一些外部代码源，例如一些图像链接。我也该如何下载该图像并创建一个类似于图像的文件夹，然后将该图像放入文件夹中。

function download(filename, text) {
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    element.setAttribute('download', filename);

    element.style.display = 'none';
    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);
}

// Start file download.
document.getElementById("dwn-btn").addEventListener("click", function(){
    // Generate download of hello.txt file with some content
    var text = document.getElementById("text-val").value;
    var filename = "hello.html";
    
    download(filename, text);
}, false);

    <textarea id="text-val" rows="4"></textarea>
    <a href="" id="dwn-btn">Download your Code</a>

Answer 1

您无法在浏览器中下载文件夹。尽管您可以创建一个zip，但可以是客户端或服务器端，然后下载该zip

Answer 2

我知道这段代码没有经过优化并且有点hacky，但是您可以将其用作起点。

它将图像URL转换为base64，以便可以与下载的HTML文件内联使用。

document.getElementById("dwn-btn").addEventListener('click', function(event) {
    event.preventDefault();

    var content = document.getElementById("text-val").value;

    content.match(/(src=".+"|src='.+')/g).forEach(function(match) {
      var imageURL = match.substring(5).slice(0, -1);
      var imageElem = document.createElement("img");

      toDataURL(imageURL, function(dataUrl) {
        var regex = new RegExp(imageURL);
        content = content.replace(regex, dataUrl);
      });
    });

    setTimeout(function(){
      var blob = new Blob([content], {type: "text/html"});
      var link = document.createElement("a");

      link.download = "mydownloadedcode.html";
      link.href = window.URL.createObjectURL(blob);
      link.dispatchEvent(new MouseEvent("click"));
    }, 2000);
  });

  function toDataURL(src, callback, outputFormat) {
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function() {
      var canvas = document.createElement('CANVAS');
      var ctx = canvas.getContext('2d');
      var dataURL;
      canvas.height = this.naturalHeight;
      canvas.width = this.naturalWidth;
      ctx.drawImage(this, 0, 0);
      dataURL = canvas.toDataURL(outputFormat);
      callback(dataURL);
    };
    img.src = src;
    if (img.complete || img.complete === undefined) {
      img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
      img.src = src;
    }
  }

<textarea id="text-val" rows="4">
  <img id="imageid" src="https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0">
  <img id="imageid" src='https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0'>
</textarea>
<a href="" id="dwn-btn">Download your Code</a>

Answer 3

尝试使用此URL，可能已解决您的问题

https://viralpatel.net/blogs/create-zip-file-javascript/

https://davidwalsh.name/javascript-zip

使用JavaScript创建文件并单击下载

3 个答案: