jQuery-下载Textarea内容 [英] jQuery - Downloading Textarea Contents

问题描述

单击按钮时如何下载textarea值/内容?它应该像PHP:

How can I download the textarea value/contents when I click a button? It should act like PHP:

<?php
$file = 'proxies.txt';

if (file_exists($file)) {
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename="'.basename($file).'"');
    header('Expires: 0');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');
    header('Content-Length: ' . filesize($file));
    readfile($file);
    exit;
}
?>

我只是在这里找不到任何办法.我不想让它成为第二次下载的href.我只想单击一个按钮，它将下载一个包含文本区域内容的txt文件.

I just can't find any way on here to do it. I don't want it to make a href to click a second time to download. I just want to click a button and it will download a txt file containing the textarea's contents.

我当前无法使用的代码:

My current code that wont work:

$('#test').click(function() {
    contentType =  'data:application/octet-stream,';
    uriContent = contentType + encodeURIComponent($('#proxiescontainer').val());
    $(this).setAttribute('href', uriContent);
});

说明:

• #test是包装按钮的a标签；
• #proxiescontainer是textarea本身；

• #test is the a tag wrapping the button;
• #proxiescontainer is the textarea itself;

那么我如何才能将其作为textarea内容的onClick下载?

So how can I get it to be a onClick download of the textarea's contents?

我的AJAX:

var xhttp = new XMLHttpRequest();
xhttp.open("GET", "grab.php", true);
xhttp.send();
xhttp.onreadystatechange = function() {

    if (xhttp.readyState == 4 && xhttp.status == 200) {

        var t = $('#proxiescontainer').scrollTop(), $d2 = $('#proxiescontainer').replaceWith('<button type="button" id="download" class="form-control button">Download</button><textarea id="proxiescontainer" class="form-control message-input" style="height: 250px!important;">' + xhttp.responseText + '</textarea>');

        if (t){ $('#proxiescontainer').scrollTop(t + $d2.outerHeight()); }

    }

}

推荐答案

使用现有的js setAttribute()并不是jQuery方法；在DOM元素上使用删除jQuery()包装器

Using existing js setAttribute() is not a jQuery method ; to use on DOM element remove jQuery() wrapper

$('#test').click(function() {
    contentType =  'data:application/octet-stream,';
    uriContent = contentType + encodeURIComponent($('#proxiescontainer').val());
    this.setAttribute('href', uriContent);
});

或者使用Blob createObjectURL()和download属性

$("button").click(function() {
  // create `a` element
  $("<a />", {
      // if supported , set name of file
      download: $.now() + ".txt",
      // set `href` to `objectURL` of `Blob` of `textarea` value
      href: URL.createObjectURL(
        new Blob([$("textarea").val()], {
          type: "text/plain"
        }))
    })
    // append `a` element to `body`
    // call `click` on `DOM` element `a`
    .appendTo("body")[0].click();
    // remove appended `a` element after "Save File" dialog,
    // `window` regains `focus` 
    $(window).one("focus", function() {
      $("a").last().remove()
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea></textarea>
<button>download</button>

这篇关于jQuery-下载Textarea内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！