> 웹 프론트엔드 > JS 튜토리얼 > FileSaver.js를 사용하여 브라우저에서 Excel 파일을 내보내는 예제에 대한 자세한 설명

FileSaver.js를 사용하여 브라우저에서 Excel 파일을 내보내는 예제에 대한 자세한 설명

巴扎黑
풀어 주다: 2017-08-18 10:00:34
원래의
2691명이 탐색했습니다.

이 글에서는 FileSaver.js 브라우저를 기반으로 js가 Excel 파일을 내보내는 예를 주로 소개합니다. 관심 있는 분들은 알아보시기 바랍니다.

이 글에서는 FileSaver.js 브라우저를 기반으로 Excel 파일을 내보내는 js를 소개합니다. 모든 사람과 공유하고 직접 메모도 작성하세요

제한 사항 1: 브라우저마다 Blob 개체에 대한 제한 사항이 다릅니다

다음 표(FileSaver.js에서)를 구체적으로 살펴보세요.

Browser 구성은 파일 이름 최대 Blob 크기 종속성
Firefox 20+ Blob 800MiB 없음
Firefox < 20데이터: URI 아니요n/aBlob.js
ChromeBlob500MiB없음
Android용 ChromeBlob 500MiB없음
EdgeBlob?없음
IE 10+Blob600MiB없음
Opera 15+Blob 500MiBNone
Opera < 15data: URINon/aBlob.js
Safari 6.1+* B롭안돼 ? None
Safari < 6data: URINon/aBlob.js

제한 사항 2: blob 객체는 다음까지 파일로 변환되지 않습니다. it is construction

이 제한은 작은 파일(수십 KB)에는 아무런 영향을 미치지 않을 수 있지만, 약간 더 큰 파일에는 큰 영향을 미칩니다. 사용자가 100MB 파일을 다운로드하려고 한다고 상상해 보십시오. 다운로드 버튼을 클릭했지만 다운로드 프롬프트가 표시되지 않으면 계속 클릭할 것입니다. 여러 번 클릭해도 여전히 다운로드 프롬프트가 표시되지 않으면 사용자는 불평할 것입니다. 우리 웹 사이트로 가서 떠났습니다.

그러나 실제로는 다운로드가 이루어지지만 Blob 개체를 구성한 다음 파일로 변환하려면 파일이 다운로드될 때까지 기다려야 합니다. 게다가 사용자가 여러 번 더 다운로드를 실행하면 리소스가 낭비될 수 있습니다.

그러므로 대용량 파일을 다운받으시려면 태그를 직접 생성하시는 걸 추천드려요~
html로 작성하시거나, 자바스크립트로 작성하셔서 동적으로 생성하시거나, 원하시는 방식으로 생성하시면 됩니다.

FileSaver.js


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

/* FileSaver.js

 * A saveAs() FileSaver implementation.

 * 1.3.2

 * 2016-06-16 18:25:19

 *

 * 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&#39;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&#39;t allow downloading of blob urls

            var reader = new FileReader();

            reader.onloadend = function() {

              var url = is_chrome_ios ? reader.result : reader.result.replace(/^data:[^;]*;/, &#39;data:attachment/file;&#39;);

              var popup = view.open(url, &#39;_blank&#39;);

              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&#39;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;

 });

}

로그인 후 복사

통화 방법


1

2

3

4

5

function expToExcel(){

     var content = $("#report").html();

     var blob = new Blob(["Hello, world!"], { type: "text/plain;charset=utf-8" });

     saveAs(blob, "hello world.txt");     

   }

로그인 후 복사

위 내용은 FileSaver.js를 사용하여 브라우저에서 Excel 파일을 내보내는 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿