使用JavaScript單擊按鈕創建文件並下載

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

試試這個網址，可能會解決您的問題

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

https://davidwalsh.name/javascript-zip