个人中心
gpt4 book ai didi

javascript - 无法在 IE11 中使用 SheetJS 在 AngularJS UI Grid 中上传 excel

转载 作者：行者123 更新时间：2023-11-28 04:23:11 25 4
gpt4 key购买 nike

我正在尝试使用 SheetJS 在 AngularJS UI 网格的客户端上传一个 excel 文件。该代码在 Chrome 和 Firefox 中运行良好，但在 IE 上出现以下错误 Object doesn't support property or method 'readAsBinaryString'

我尝试了各种关于堆栈溢出的解决方案，例如使用 readAsBinaryArray 或 readAsText 而不是使用 readAsBinaryString 但我无法解决我的问题。

我在下面分享我的代码，它由 3 个文件组成:index.html、app.js 和 main.css

index.html 的代码如下

  <!DOCTYPE html>
    <html ng-app="app">

  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=11" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="Sat, 01 Dec 2001 00:00:00 GMT">
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
    <script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/xlsx.full.min.js"></script>
    <script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/ods.js"></script>
    <script src="https://github.com/SheetJS/js-xlsx/blob/master/shim.js"></script>
    <script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.js"></script>
    <link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.css" />
    <link rel="stylesheet" href="css/main.css" type="text/css" />
  </head>

  <body>
    <div ng-controller="MainCtrl as vm">

      <div id="grid1" ui-grid="vm.gridOptions" class="grid">
        <div class="grid-msg-overlay" ng-show="!vm.gridOptions.data.length">
          <div class="msg">
            <div class="center">
              <span class="muted">Select Excel File</span>
              <br />
              <input ng-attr-type="{{'file'}}" accept=".xls,.xlsx,.csv" fileread="" opts="vm.gridOptions" multiple="false" />
            </div>
          </div>
        </div>
      </div>
          <br />
          <br />
          <button type="button" class="btn btn-success" ng-    click="vm.reset()">Reset Grid</button>
          <span>  </span>

         <button type="button" class="btn btn-success" ng-click="">Save</button>

    </div>
    <script src="js/app.js"></script>
  </body>

   </html>

app.js 代码如下

 (function (angular) {
    "use strict";

    angular.module('app', ['ui.grid']).controller('MainCtrl', ['$scope',          function ($scope) {
     var vm = this;
     vm.gridOptions = {};

     vm.reset = reset;

    function reset() {
      vm.gridOptions.data = [];
      vm.gridOptions.columnDefs = [];
     }   
    }])


    .directive("fileread", [function () {
    return {
    scope: {
      opts: '='
    },
      link: function ($scope, $elm, $attrs) {
      $elm.on('change', function (changeEvent) {
        var reader = new FileReader();

        reader.onload = function (evt) {
          $scope.$apply(function () {
            var data = evt.target.result;

            var workbook = XLSX.read(data, {type: 'binary'});

            var headerNames = XLSX.utils.sheet_to_json(   workbook.Sheets[workbook.SheetNames[0]], { header: 1 })[0];

            var data = XLSX.utils.sheet_to_json( workbook.Sheets[workbook.SheetNames[0]]);

            $scope.opts.columnDefs = [];
            headerNames.forEach(function (h) {
              $scope.opts.columnDefs.push({ field: h });
            });

            $scope.opts.data = data;

            $elm.val(null);
          });
        };

        reader.readAsBinaryString(changeEvent.target.files[0]);
      });
     }
    }
    }]);

main.css 代码

body { 
 padding: 20px;
 }

 .grid {
 width: 100%;
 height: 250px;
 }

 .grid-msg-overlay {
 position: absolute;
 top: 0;
 bottom: 0;
 width: 100%;
 background: rgba(0, 0, 0, 0.4);
 }

 .grid-msg-overlay .msg {
 opacity: 1;
 position: absolute;
 top: 20%;
 left: 20%;
 width: 60%;
 height: 50%;
 background-color: #eee;
 border-radius: 4px;
 border: 1px solid #555;
 text-align: center;
 font-size: 24px;
 display: table;
 }

 .grid-msg-overlay .msg > .center {
 display: table-cell;
 vertical-align: middle;
 }

.grid input[type="file"] {
font-size: 14px;
display: inline-block;
}

有人可以帮助我了解如何解决这个问题

最佳答案

IE 没有实现 FileReader readAsBinaryString() 方法。但是，根据 SheetJS 文档，您可以测试支持，然后回退到 readAsArrayBuffer()。 

var readAsBinary = "readAsBinaryString" in FileReader;
if (readAsBinary) {
  reader.readAsBinaryString(changeEvent.target.files[0]);
} else {
  reader.readAsArrayBuffer(changeEvent.target.files[0]);
}

然后在卸载方法中你必须按如下方式处理结果:

var workbook;
if (readAsBinary) {
  workbook = XLSX.read(data, {type: 'binary'});
} else {
  function fixdata(data) {
    var o = "", l = 0, w = 10240;
    for(; l<data.byteLength/w; ++l) o+=String.fromCharCode.apply(null,new Uint8Array(data.slice(l*w,l*w+w)));
    o+=String.fromCharCode.apply(null, new Uint8Array(data.slice(l*w)));
    return o;
  }
  workbook = XLSX.read(btoa(fixdata(data)), {type: 'base64'});
}

关于javascript - 无法在 IE11 中使用 SheetJS 在 AngularJS UI Grid 中上传 excel，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42098509/

25 4 0
文章推荐： javascript - 为什么 HTML5 样板文件将 modernizer 放在 head 标签中？
文章推荐： javascript - 如何检测图像是否具有透明背景和白色文本
文章推荐： javascript - 当父元素包含类 ="true"时，将子元素设置为 aria-expanded ="active"
文章推荐： javascript - 仅在 Y 中具有固定标题的 HTML 表格(在 X 中可滚动)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com