如何在没有Node.Js的情况下使用FileSaver.js模块?

时间:2023-01-09 18:59:17

i have visited a github code to increase effort for saving a file from javascript/html. We have some problem with to use it, because it mae for node.js. I'v found some demo.js code to save the file from demo.html itself. But, it is useless because i unfortunatly can't edit, because i wonder it just for demo.html class, and it will become crash if i make a reference to another html file.

我访问了一个github代码,以增加从javascript / html保存文件的工作量。我们在使用它时遇到一些问题,因为它可以用于node.js.我找到了一些demo.js代码来保存demo.html本身的文件。但是,它是无用的,因为我不幸地无法编辑,因为我不知道它只是针对demo.html类,如果我引用另一个html文件它将会崩溃。

This is the code File Saver.js

这是代码File Saver.js

/* FileSaver.js  * A saveAs() FileSaver implementation.  * 1.3.2  * 2016-06-16 18:25:19  *  * By Eli Grey, http://eligrey.com  * License: MIT  *   See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md  */

/*global self */ /*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */

/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js
*/

var saveAs = saveAs || (function(view) {    "use strict";   // IE <10 is explicitly unsupported     if (typeof view === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\./.test(navigator.userAgent)) {      return;     }   var
          doc = view.document
          // only get URL when necessary in case Blob.js hasn't overridden it yet       , get_URL = function() {            return view.URL || view.webkitURL || view;      }       , save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")      , can_use_save_link = "download" in save_link       , click = function(node) {          var event = new MouseEvent("click");            node.dispatchEvent(event);      }       , is_safari = /constructor/i.test(view.HTMLElement) || view.safari      , is_chrome_ios
=/CriOS\/[\d]+/.test(navigator.userAgent)       , throw_outside = function(ex) {            (view.setImmediate || view.setTimeout)(function() {
                throw ex;           }, 0);      }       , force_saveable_type = "application/octet-stream"      // the Blob API is fundamentally broken as there is no "downloadfinished" event to subscribe to         , arbitrary_revoke_timeout = 1000 * 40 // in ms         , revoke = function(file) {             var revoker = function() {
                if (typeof file === "string") { // file is an object URL
                    get_URL().revokeObjectURL(file);
                } else { // file is a File
                    file.remove();
                }           };          setTimeout(revoker, arbitrary_revoke_timeout);      }       , dispatch = function(filesaver, event_types, event) {          event_types = [].concat(event_types);           var i = event_types.length;             while (i--) {
                var listener = filesaver["on" + event_types[i]];
                if (typeof listener === "function") {
                    try {
                        listener.call(filesaver, event || filesaver);
                    } catch (ex) {
                        throw_outside(ex);
                    }
                }           }       }       , auto_bom = function(blob) {           // prepend BOM for UTF-8 XML and text/* types (including HTML)          // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF          if (/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
                return new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});            }           return blob;        }       , FileSaver = function(blob, name, no_auto_bom) {           if (!no_auto_bom) {
                blob = auto_bom(blob);          }           // First try a.download, then web filesystem, then object URLs          var
                  filesaver = this
                , type = blob.type
                , force = type === force_saveable_type
                , object_url
                , dispatch_all = function() {
                    dispatch(filesaver, "writestart progress write writeend".split(" "));
                }
                // on any filesys errors revert to saving with object URLs
                , fs_error = function() {
                    if ((is_chrome_ios || (force && is_safari)) && view.FileReader) {
                        // Safari doesn't allow downloading of blob urls
                        var reader = new FileReader();
                        reader.onloadend = function() {
                            var url = is_chrome_ios ? reader.result : reader.result.replace(/^data:[^;]*;/, 'data:attachment/file;');
                            var popup = view.open(url, '_blank');
                            if(!popup) view.location.href = url;
                            url=undefined; // release reference before dispatching
                            filesaver.readyState = filesaver.DONE;
                            dispatch_all();
                        };
                        reader.readAsDataURL(blob);
                        filesaver.readyState = filesaver.INIT;
                        return;
                    }
                    // don't create more object URLs than needed
                    if (!object_url) {
                        object_url = get_URL().createObjectURL(blob);
                    }
                    if (force) {
                        view.location.href = object_url;
                    } else {
                        var opened = view.open(object_url, "_blank");
                        if (!opened) {
                            // Apple does not allow window.open, see https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/WorkingwithWindowsandTabs/WorkingwithWindowsandTabs.html
                            view.location.href = object_url;
                        }
                    }
                    filesaver.readyState = filesaver.DONE;
                    dispatch_all();
                    revoke(object_url);
                }           ;           filesaver.readyState = filesaver.INIT;

            if (can_use_save_link) {
                object_url = get_URL().createObjectURL(blob);
                setTimeout(function() {
                    save_link.href = object_url;
                    save_link.download = name;
                    click(save_link);
                    dispatch_all();
                    revoke(object_url);
                    filesaver.readyState = filesaver.DONE;
                });
                return;             }

            fs_error();         }       , FS_proto = FileSaver.prototype        , saveAs = function(blob, name, no_auto_bom) {          return new FileSaver(blob, name || blob.name || "download", no_auto_bom);       }   ;   // IE 10+ (native saveAs)   if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) {       return function(blob, name, no_auto_bom) {          name = name || blob.name || "download";

            if (!no_auto_bom) {
                blob = auto_bom(blob);          }           return navigator.msSaveOrOpenBlob(blob, name);      };  }

    FS_proto.abort = function(){};  FS_proto.readyState = FS_proto.INIT = 0;    FS_proto.WRITING = 1;   FS_proto.DONE = 2;

    FS_proto.error =    FS_proto.onwritestart =     FS_proto.onprogress =   FS_proto.onwrite =  FS_proto.onabort =  FS_proto.onerror =  FS_proto.onwriteend =       null;

    return saveAs; }(
       typeof self !== "undefined" && self  || typeof window !== "undefined" && window  || this.content )); // `self` is undefined in Firefox for Android content script context // while `this` is nsIContentFrameMessageManager // with an attribute `content` that corresponds to the window

if (typeof module !== "undefined" && module.exports) {   module.exports.saveAs = saveAs; } else if ((typeof define !== "undefined" && define !== null) && (define.amd !== null)) {   define("FileSaver.js", function() {
    return saveAs;   }); }

And the demo.js

和demo.js

/*! FileSaver.js demo script
 *  2016-05-26
 *
 *  By Eli Grey, http://eligrey.com
 *  License: MIT
 *    See LICENSE.md
 */

/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/demo/demo.js */

/*jshint laxbreak: true, laxcomma: true, smarttabs: true*/
/*global saveAs, self*/

(function(view) {
"use strict";
// The canvas drawing portion of the demo is based off the demo at
// http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/
var
      document = view.document
    , $ = function(id) {
        return document.getElementById(id);
    }
    , session = view.sessionStorage
    // only get URL when necessary in case Blob.js hasn't defined it yet
    , get_blob = function() {
        return view.Blob;
    }

    , canvas = $("canvas")
    , canvas_options_form = $("canvas-options")
    , canvas_filename = $("canvas-filename")
    , canvas_clear_button = $("canvas-clear")

    , text = $("text")
    , text_options_form = $("text-options")
    , text_filename = $("text-filename")

    , html = $("html")
    , html_options_form = $("html-options")
    , html_filename = $("html-filename")

    , ctx = canvas.getContext("2d")
    , drawing = false
    , x_points = session.x_points || []
    , y_points = session.y_points || []
    , drag_points = session.drag_points || []
    , add_point = function(x, y, dragging) {
        x_points.push(x);
        y_points.push(y);
        drag_points.push(dragging);
    }
    , draw = function(){
        canvas.width = canvas.width;
        ctx.lineWidth = 6;
        ctx.lineJoin = "round";
        ctx.strokeStyle = "#000000";
        var
              i = 0
            , len = x_points.length
        ;
        for(; i < len; i++) {
            ctx.beginPath();
            if (i && drag_points[i]) {
                ctx.moveTo(x_points[i-1], y_points[i-1]);
            } else {
                ctx.moveTo(x_points[i]-1, y_points[i]);
            }
            ctx.lineTo(x_points[i], y_points[i]);
            ctx.closePath();
            ctx.stroke();
        }
    }
    , stop_drawing = function() {
        drawing = false;
    }

    // Title guesser and document creator available at https://gist.github.com/1059648
    , guess_title = function(doc) {
        var
              h = "h6 h5 h4 h3 h2 h1".split(" ")
            , i = h.length
            , headers
            , header_text
        ;
        while (i--) {
            headers = doc.getElementsByTagName(h[i]);
            for (var j = 0, len = headers.length; j < len; j++) {
                header_text = headers[j].textContent.trim();
                if (header_text) {
                    return header_text;
                }
            }
        }
    }
    , doc_impl = document.implementation
    , create_html_doc = function(html) {
        var
              dt = doc_impl.createDocumentType('html', null, null)
            , doc = doc_impl.createDocument("http://www.w3.org/1999/xhtml", "html", dt)
            , doc_el = doc.documentElement
            , head = doc_el.appendChild(doc.createElement("head"))
            , charset_meta = head.appendChild(doc.createElement("meta"))
            , title = head.appendChild(doc.createElement("title"))
            , body = doc_el.appendChild(doc.createElement("body"))
            , i = 0
            , len = html.childNodes.length
        ;
        charset_meta.setAttribute("charset", html.ownerDocument.characterSet);
        for (; i < len; i++) {
            body.appendChild(doc.importNode(html.childNodes.item(i), true));
        }
        var title_text = guess_title(doc);
        if (title_text) {
            title.appendChild(doc.createTextNode(title_text));
        }
        return doc;
    }
;
canvas.width = 500;
canvas.height = 300;

  if (typeof x_points === "string") {
    x_points = JSON.parse(x_points);
} if (typeof y_points === "string") {
    y_points = JSON.parse(y_points);
} if (typeof drag_points === "string") {
    drag_points = JSON.parse(drag_points);
} if (session.canvas_filename) {
    canvas_filename.value = session.canvas_filename;
} if (session.text) {
    text.value = session.text;
} if (session.text_filename) {
    text_filename.value = session.text_filename;
} if (session.html) {
    html.innerHTML = session.html;
} if (session.html_filename) {
    html_filename.value = session.html_filename;
}

drawing = true;
draw();
drawing = false;

canvas_clear_button.addEventListener("click", function() {
    canvas.width = canvas.width;
    x_points.length =
    y_points.length =
    drag_points.length =
        0;
}, false);
canvas.addEventListener("mousedown", function(event) {
    event.preventDefault();
    drawing = true;
    add_point(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop, false);
    draw();
}, false);
canvas.addEventListener("mousemove", function(event) {
    if (drawing) {
        add_point(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop, true);
        draw();
    }
}, false);
canvas.addEventListener("mouseup", stop_drawing, false);
canvas.addEventListener("mouseout", stop_drawing, false);

canvas_options_form.addEventListener("submit", function(event) {
    event.preventDefault();
    canvas.toBlobHD(function(blob) {
        saveAs(
              blob
            , (canvas_filename.value || canvas_filename.placeholder) + ".png"
        );
    }, "image/png");
}, false);

text_options_form.addEventListener("submit", function(event) {
    event.preventDefault();
    var BB = get_blob();
    saveAs(
          new BB(
              [text.value || text.placeholder]
            , {type: "text/plain;charset=" + document.characterSet}
        )
        , (text_filename.value || text_filename.placeholder) + ".txt"
    );
}, false);

html_options_form.addEventListener("submit", function(event) {
    event.preventDefault();
    var
          BB = get_blob()
        , xml_serializer = new XMLSerializer()
        , doc = create_html_doc(html)
    ;
    saveAs(
          new BB(
              [xml_serializer.serializeToString(doc)]
            , {type: "application/xhtml+xml;charset=" + document.characterSet}
        )
        , (html_filename.value || html_filename.placeholder) + ".xhtml"
    );
}, false);

view.addEventListener("unload", function() {
    session.x_points = JSON.stringify(x_points);
    session.y_points = JSON.stringify(y_points);
    session.drag_points = JSON.stringify(drag_points);
    session.canvas_filename = canvas_filename.value;

    session.text = text.value;
    session.text_filename = text_filename.value;

    session.html = html.innerHTML;
    session.html_filename = html_filename.value;
}, false);
}(self));

The html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US-x-Hixie">
<head>
    <meta charset="utf-8"/>
    <title>FileSaver.js demo</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/eligrey/FileSaver.js/702cd2e820b680f88a0f299e33085c196806fc52/demo/demo.css"/>
</head>
<body>
    <h1><a href="https://github.com/eligrey/FileSaver.js">FileSaver.js</a> demo</h1>
    <p>
        The following examples demonstrate how it is possible to generate and save any type of data right in the browser using the <code>saveAs()</code> FileSaver interface, without contacting any servers.
    </p>
    <section id="image-demo">
        <h2>Saving an image</h2>
        <canvas class="input" id="canvas" width="500" height="300"/>
        <form id="canvas-options">
            <label>Filename: <input type="text" class="filename" id="canvas-filename" placeholder="doodle"/>.png</label>
            <input type="submit" value="Save"/>
            <input type="button" id="canvas-clear" value="Clear"/>
        </form>
    </section>
    <section id="text-demo">
        <h2>Saving text</h2>
        <textarea class="input" id="text" placeholder="Once upon a time..."/>
        <form id="text-options">
            <label>Filename: <input type="text" class="filename" id="text-filename" placeholder="a plain document"/>.txt</label>
            <input type="submit" value="Save"/>
        </form>
    </section>
    <section id="html-demo">
        <h2>Saving rich text</h2>
        <div class="input" id="html" contenteditable="">
            <h3>Some example rich text</h3>
            <ul>
                <li><del>Plain</del> <ins>Boring</ins> text.</li>
                <li><em>Emphasized text!</em></li>
                <li><strong>Strong text!</strong></li>
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="70" height="70">
                        <circle cx="35" cy="35" r="35" fill="red"/>
                        <text x="10" y="40">image</text>
                    </svg>
                </li>
                <li><a href="https://github.com/eligrey/FileSaver.js">A link.</a></li>
            </ul>
        </div>
        <form id="html-options">
            <label>Filename: <input type="text" class="filename" id="html-filename" placeholder="a rich document"/>.xhtml</label>
            <input type="submit" value="Save"/>
        </form>
    </section>
    <script async="" src="https://cdn.rawgit.com/eligrey/Blob.js/0cef2746414269b16834878a8abc52eb9d53e6bd/Blob.js"/>
    <script async="" src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"/>
    <script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"/>
    <script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/597b6cd0207ce408a6d34890b5b2826b13450714/demo/demo.js"/>
</body>
</html>

1 个解决方案

#1


1  

Firstly, nothing in the code you've show is related to node.js - so using fileSaver.js without node.js is not an issue

首先,您显示的代码中没有任何内容与node.js相关 - 因此使用不带node.js的fileSaver.js不是问题

The simplest example I can come up with to demonstrate how to use it using a Blob and a File is as follows

我可以用来演示如何使用Blob和File来使用它的最简单的例子如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <!-- you'll need to host fileSaver.js on your own host -->
    <script src="fileSaver.js"></script>
</head>
<body>
    <div id="source">This is some text</div>
    <input id="saveFile" type="button" value="saveFile" />
    <script>
        document.getElementById('saveFile').addEventListener('click', function(e) {
            var text = document.getElementById('source').innerHTML;
            var file = new File([text], "hello world.txt", {type: "text/plain;charset=utf-8"});
            // save it
            saveAs(file);
        });
    </script>
</body>
</html>

#1


1  

Firstly, nothing in the code you've show is related to node.js - so using fileSaver.js without node.js is not an issue

首先,您显示的代码中没有任何内容与node.js相关 - 因此使用不带node.js的fileSaver.js不是问题

The simplest example I can come up with to demonstrate how to use it using a Blob and a File is as follows

我可以用来演示如何使用Blob和File来使用它的最简单的例子如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <!-- you'll need to host fileSaver.js on your own host -->
    <script src="fileSaver.js"></script>
</head>
<body>
    <div id="source">This is some text</div>
    <input id="saveFile" type="button" value="saveFile" />
    <script>
        document.getElementById('saveFile').addEventListener('click', function(e) {
            var text = document.getElementById('source').innerHTML;
            var file = new File([text], "hello world.txt", {type: "text/plain;charset=utf-8"});
            // save it
            saveAs(file);
        });
    </script>
</body>
</html>