0

テキストボックス、テキストエリア、およびファイル入力コントロールを含むコンテンツジェネレーターがあります。すべてのコントロールは HTML です。保存ボタンをクリックすると、HTML コントロールに入力されたテキストで XML ドキュメントが作成されます。最後に、ユーザーが XML ファイルをダウンロードするように求められるようにします。Javascript で XMLHTTPRequest を使用して POST メソッドを使用してこれを実行できることを願っています。XMLHTTPRequest を使用して XML ドキュメントが送信されると、次のようになります。

Chrome: HTTP ステータス コード: 304 IE10: 何も起こらない

繰り返しますが、ブラウザでユーザーに XML ファイルをダウンロードするように促したいと思います。これが私のコードです。

function generateBaseNodes() {
            var xmlString = '<?xml version="1.0"?>' +
                    '<sites>' +
                    '<site>' +
                    '<textareas>' +
                    '</textareas>' +
                    '<textboxes>' +
                    '</textboxes>' +
                    '<images>' +
                    '</images>' +
                    '</site>' +
                    '</sites>';

            if (window.DOMParser) {
                parser = new DOMParser();
                xmlDocument = parser.parseFromString(xmlString, "text/xml");
            }
            else // Internet Explorer
            {
                xmlDocument = new ActiveXObject("Microsoft.XMLDOM");
                xmlDocument.async = false;
                xmlDocument.loadXML(xmlString);
            }
            return xmlDocument;
        }

        function saveXmlFile(xmlDocument) {

            if (window.XMLHttpRequest) { // IE7+, Chrome. Firefox, Opera. Safari
                xmlhttp = new XMLHttpRequest();
            }
            else { // IE5 & IE6
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.open('POST', 'http://localhost:57326/ContentGenerator.html', true);
            xmlhttp.setRequestHeader('Content-type','text/xml');
            xmlhttp.send(xmlDocument);
        }

        $('document').ready(function () {

            $('#templateTab a').click(function (e) {
                e.preventDefault()
                $(this).tab('show')
            })

            //Create TextArea XML elements and add them
            $('#btnSave').click(function () {
                var x;
                var xmlDocument = generateBaseNodes();

                $('.content').each(function () { // Textarea

                    if ($(this).attr('id') != undefined) {

                        if ($(this).is('textarea')) {
                            // create article node with control id.
                            articleNode = xmlDocument.createElement($(this).attr('id'));
                            // append node to xmldocument
                            x = xmlDocument.getElementsByTagName('textareas')[0];
                            x.appendChild(articleNode);
                            // append text
                            articleNode.appendChild(xmlDocument.createTextNode($(this).text()));
                        }

                        if ($(this).is('input[type=text]')) { // Textbox
                            textNode = xmlDocument.createElement($(this).attr('id'));
                            x = xmlDocument.getElementsByTagName('textboxes')[0];
                            x.appendChild(textNode);

                            textNode.appendChild(xmlDocument.createTextNode($(this).text()));
                        }

                    } else { // Show error if a control does not have an ID assigned to it.
                        alert('The' + $(this).prop('type') + 'has an undefined ID.');
                    }
                });

                $('.imageContent').each(function () {
                    if ($('.imageContent input[type=file]')) {  // Image url
                        // Validate file is an image
                        switch ($(this).val().substring($(this).val().lastIndexOf('.') + 1).toLowerCase()) {
                            case 'gif': case 'jpg': case 'png':
                                imageNode = xmlDocument.createElement($(this).attr('id'));
                                x = xmlDocument.getElementsByTagName('images')[0];
                                x.appendChild(imageNode);

                                imageNode.appendChild(xmlDocument.createTextNode($(this).val()));
                                break;
                            default:
                                $(this).val('');
                                // error message here
                                alert("not an image");
                                break;
                        }
                    }
                });

                saveXmlFile(xmlDocument);
            });
        });

XML出力を投稿する必要があると思います

<sites>
 <site>
 <textareas>
  <article1>sfdsfd</article1> 
  <article2>dsfsdf</article2> 
  </textareas>
 <textboxes>
  <title>dsfdsf</title> 
  <contentHeader>sdfsdf</contentHeader> 
  <linkContent>sdf</linkContent> 
  <link>sdfsd</link> 
  <relatedContent>sdfsdf</relatedContent> 
  <contentLink>dsf</contentLink> 
  <relatedArticle>sdfa</relatedArticle> 
  <articleLink>sfdf</articleLink> 
  </textboxes>
 <images>
  <imageHeader>C:\Images\Header.png</imageHeader> 
  <articleImage>C:\Images\Main.png</articleImage> 
  <articleImage2>C:\Images\Deals.png</articleImage2> 
  </images>
  </site>
  </sites>
4

2 に答える 2

1

Filesaver.jsを使用して、ユーザーにメモリ内のファイルをダウンロードしてもらいます。

次のようなデータ URI も調べてください

<a href="data:application/octet-stream;charset=utf-8;base64,Zm9vIGJhcg==">text file</a>
于 2013-10-12T23:49:10.213 に答える
1

XML ファイルをダウンロードするようブラウザに促す方法はありますか?

うん。データをBlobに変換し、そこからURLを生成します。これを で使用できます。ダウンロード<a>属性を指定<a>すると、ブラウザーは、データを開かずに保存することを認識し、最後にクリックをシミュレートします。例えば;

function txtToBlob(txt) {
    return new Blob([txt], {type: 'plain/text'});
}

function genDownloadLink(blob, filename) {
    var a = document.createElement('a');
    a.setAttribute('href', URL.createObjectURL(blob));
    a.setAttribute('download', filename || '');
    a.appendChild(document.createTextNode(filename || 'Download'));
    return a;
}

function downloadIt(a) {
    return a.dispatchEvent(new Event('click'));
}

// and use it
var myText = 'foobar',
    myFileName = 'yay.txt';

downloadIt(
    genDownloadLink(
        txtToBlob(myText),
        myFileName
    )
);
于 2013-10-12T23:54:54.123 に答える