通过javascript创建文件 [英] create file by javascript

查看:76
本文介绍了通过javascript创建文件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



我想用javascript创建文件

找到此链接



http://jsfiddle.net/UselessCode/qm5AG/ [ ^ ] [ ^ ]

想要使用这个javascript函数

我把它放到脚本表中



 <   html  >  
< head >
< meta http-equiv = 内容类型 < span class =code-a ttribute> content = text / HTML; charset = UTF-8 >
< title > < / title >
< script >
function (){
var textFile = null
makeTextFile = function (text){
var data = new Blob([ text],{type:' text / plain'});

// 如果我们要替换以前的generat ed文件我们需要
// 手动撤销对象URL以避免内存泄漏。
if (textFile!== null ){
窗口 .URL.revokeObjectURL(文本文件);
}

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';
},);
})();
< / script >
< / head >
< body >
< textarea id = < span class =code-keyword> textbox
> 在此输入内容< / textarea > < 按钮 id = 创建 > 创建文件< /按钮 >
< a download = info.txt id < span class =code-keyword> = downloadlink style = display:none > 下载< / a >
< / body >
< / html >



但它不起作用下载链接不会出现

任何帮助?

解决方案

问题



如果看到左侧在框架和扩展部分下的面板中,它表示使用No-Library(纯JS)并且将在onLoad上激活脚本。这个东西由jsfiddle网站自动处理。



但是如果你在浏览器中运行页面并看到开发者工具的控制台,它会指出以下问题.. 。

 TypeError:create is null 

create.addEventListener('click',function(){



解决方案



所以,我们只需要在窗口上调用脚本就好了。

  window  .onload =  function (){
var textFile = null

makeTextFile = function (text){
var data = new Blob([text],{type: ' text / plain'});

// 如果我们要替换以前生成的文件,我们需要
// 手动撤销对象URL以避免内存泄漏。
if (textFile!== null ){
window .URL.revokeObjectURL(文本文件);
}

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';
},);
};



演示



[演示]用JavaScript生成文件 [ ^

Hi,
I want to create file using javascript
found this link

http://jsfiddle.net/UselessCode/qm5AG/[^][^]
want to use this javascript function
I put it into script table

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script>
            (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);
})();
    </script>
    </head>
    <body>
        <textarea id="textbox">Type something here</textarea> <button id="create" >Create file</button> 
        <a download="info.txt" id="downloadlink" style="display: none">Download</a>
    </body>
</html>


but it's not working download link doesn't appear
any help ?

解决方案

Problem


If you see the left side panel under "Frameworks and Extensions" section, it says that "No-Library (pure JS)" is used and script will be activated on "onLoad". This thing is automatically handled by jsfiddle website.

But if you run the page in browser and see the console of developer tool, it will point out the below issue...

TypeError: create is null

create.addEventListener('click', function () {


Solution


So, we just need to call the script on window onload like.

window.onload = 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);
        };


Demo


[Demo] Generate File in JavaScript[^]


这篇关于通过javascript创建文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆