spreadjs excel表格无法显示的问题

lin666 · lin666

本帖最后由 lin666 于 2018-3-8 10:11 编辑

上面那个问题暂时算了  这个部署到服务器上  我使用上面的代码也把excel文件放到相应的目录下了  为什么不能读取文件
我把导入服务器文件的代码写在了导入本地文件的button里面。
<!doctype html>
<html style="height:100%;font-size:14px;">

<head>

<meta charset="utf-8" />



<link rel="stylesheet" href="Content/gc.spread.sheets.excel2013white.11.0.0.css" />

<script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="Scripts/gc.spread.sheets.all.11.0.0.min.js" type="text/javascript"></script>
<script src="Scripts/FileSaver.js" type="text/javascript"></script>
<script src="Scripts/gc.spread.excelio.11.0.0.min.js" type="text/javascript"></script>
<script src="Scripts/gc.spread.sheets.charts.11.0.0.min.js" type="text/javascript"></script>
<script src="Scripts/gc.spread.sheets.resources.zh.11.0.0.min.js" type="text/javascript"></script>
<script src="Scripts/excel_data.js" type="text/javascript"></script>

<style type="text/css">
      .inputContainer {
         width: 390px;
         height: auto;
         border: 1px solid gray;
         padding: 6px 12px;
         margin: 10px;
         float: left;
      }

      .input {
         font-size: 14px;
         width: 300px;
         height: 20px;
         border: 0px;
         outline: none;
      }

      .button {
         font-size: 16px;
         height: 30px;
         padding: 6px 12px;
         width: 80px;
      }

      .top-options {
         height: 70px;
      }
</style>

</head>

<body style='font-size:14px;'>
<div class="demo-options">
      <div class="top-options">
         <div class="inputContainer">
            <input type="file" id="fileDemo" class="input">
            <input type="button" id="loadExcel" value="导入文件" class="button">
         </div>
         <div class="inputContainer">
            <input type="text" id="exportFileName" value="export.xlsx" class="input" style="font-size: 16px">
            <input type="button" id="saveExcel" value="导出文件" class="button">
         </div>
      </div>
</div>
<div class="sample-turtorial">
      <div id="ss" style="width:100%; height:700px;border: 1px solid gray"></div>
      <div class="demo-options">
         <div class="option-row">

         </div>
      </div>
</div>

<script type="text/javascript">

      $(document).ready(function () {
         var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
         spread.fromJSON(jsonData);
         var excelIo = new GC.Spread.Excel.IO();
         var sheet = spread.getActiveSheet();

         spread.options.scrollbarMaxAlign = true;
         spread.options.scrollbarShowMax = true;
         //sheet.options.isProtected = true;
         //sheet.getCell(1, 1).locked(true);

         $("#loadExcel").click(function () {
            var excelIo = new GC.Spread.Excel.IO();

            var excelFilePath = 'resources/Excel/demo.xlsx';

            var xhr = new XMLHttpRequest();

            xhr.open('GET', excelFilePath, true);

            xhr.responseType = 'blob';

            xhr.onload = function (e) {
            if (this.status == 200) {

            // get binary data as a response

            var blob = this.response;

            // convert Excel to JSON

            excelIo.open(blob, function (json) {
                     var workbookObj = json;

                     spread.fromJSON(workbookObj);
                     }, function (e) {

                     // process error

                     alert(e.errorMessage);
                     }, {});
                  }
            };


            xhr.send();

         });

         $("#saveExcel").click(function () {

            var fileName = $("#exportFileName").val();
            var password = $("#password").val();
            if (fileName.substr(-5, 5) !== '.xlsx') {
                  fileName += '.xlsx';
            }

            var json = spread.toJSON();

            // here is excel IO API
            excelIo.save(json, function (blob) {
                  saveAs(blob, fileName);
            }, function (e) {
                  // process error
                  console.log(e);
            }, { password: password });

         });

      });

</script>
</body>

</html>

Clark.Pan · Clark.Pan

您的请求，成功发送到后端了吗，您.net后端是如何接收请求的。

lin666 · lin666

ClarkPan 发表于 2018-3-7 09:56
您的请求，成功发送到后端了吗，您.net后端是如何接收请求的。

后端代码没写啊。。不会我直接把html文件扔到phpwamp服务器的根目录下然后把excel文件放到相应的目录下。。后端该如何写

Clark.Pan · Clark.Pan

那肯定不行啊，这个是web开发最基础的问题，不是产品本身的问题，您在网上找一下相关资料学习了解一下吧，不然后面还会有更多一系列的问题。

lin666 · lin666

ClarkPan 发表于 2018-3-7 10:34
那肯定不行啊，这个是web开发最基础的问题，不是产品本身的问题，您在网上找一下相关资料学习了解一下吧， ...

那能不能这个问题先简单处理一下

Clark.Pan · Clark.Pan

问题是这不是简单就能处理好的，您看一下给参考的JAVA的后台，这根本不是一个demo两个demo就能做好的。

Clark.Pan · Clark.Pan

这个资料您可以参考一下，应该对您学习ASP.NET有些帮助
https://jingyan.baidu.com/article/f25ef254487486482c1b82e1.html

lin666 · lin666

本帖最后由 lin666 于 2018-3-8 10:18 编辑

我试了用本地服务器只需要demo上的那些代码就能做到从服务器导入文件了，但是把文件保存到服务器出了问题这个如何处理             代码如下：
<!doctype html>
<html style="height:100%;font-size:14px;">

<head>

<meta charset="utf-8" />



<link rel="stylesheet" href="Content/gc.spread.sheets.excel2013white.11.0.0.css" />

<script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="Scripts/gc.spread.sheets.all.11.0.0.min.js" type="text/javascript"></script>
<script src="Scripts/FileSaver.js" type="text/javascript"></script>
<script src="Scripts/gc.spread.excelio.11.0.0.min.js" type="text/javascript"></script>
<script src="Scripts/gc.spread.sheets.charts.11.0.0.min.js" type="text/javascript"></script>
<script src="Scripts/gc.spread.sheets.resources.zh.11.0.0.min.js" type="text/javascript"></script>
<script src="Scripts/excel_data.js" type="text/javascript"></script>

<style type="text/css">
      .inputContainer {
         width: 390px;
         height: auto;
         border: 1px solid gray;
         padding: 6px 12px;
         margin: 10px;
         float: left;
      }

      .input {
         font-size: 14px;
         width: 300px;
         height: 20px;
         border: 0px;
         outline: none;
      }

      .button {
         font-size: 16px;
         height: 30px;
         padding: 6px 12px;
         width: 80px;
      }

      .top-options {
         height: 70px;
      }
</style>

</head>

<body style='font-size:14px;'>
<div class="demo-options">
      <div class="top-options">
         <div class="inputContainer">
            <input type="file" id="fileDemo" class="input">
            <input type="button" id="loadExcel" value="导入文件" class="button">
         </div>
         <div class="inputContainer">
            <input type="text" id="exportFileName" value="export.xlsx" class="input" style="font-size: 16px">
            <input type="button" id="saveExcel" value="导出文件" class="button">
         </div>
      </div>
</div>
<div class="sample-turtorial">
      <div id="ss" style="width:100%; height:850px;border: 1px solid gray"></div>
      <div class="demo-options">
         <div class="option-row">

         </div>
      </div>
</div>

      <form name="myform" id="myform" enctype="multipart/form-data" method="post"></form>
<script type="text/javascript">

      $(document).ready(function () {
         var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
         spread.fromJSON(jsonData);
         var excelIo = new GC.Spread.Excel.IO();
         var sheet = spread.getActiveSheet();

         spread.options.scrollbarMaxAlign = true;
         spread.options.scrollbarShowMax = true;
         //sheet.options.isProtected = true;
         //sheet.getCell(1, 1).locked(true);

         $("#loadExcel").click(function () {
            var excelIo = new GC.Spread.Excel.IO();

            var excelFilePath = 'resources/Excel/检验表.xlsx';

            var xhr = new XMLHttpRequest();

            xhr.open('GET', excelFilePath, true);

            xhr.responseType = 'blob';

            xhr.onload = function (e) {
            if (this.status == 200) {

            // get binary data as a response

            var blob = this.response;

            // convert Excel to JSON

            excelIo.open(blob, function (json) {
                     var workbookObj = json;

                     spread.fromJSON(workbookObj);
                     }, function (e) {

                     // process error

                     alert(e.errorMessage);
                     }, {});
                  }
            };


            xhr.send();

         });

         $("#saveExcel").click(function () {

            //var fileName = $("#exportFileName").val();
            //var password = $("#password").val();
            //if (fileName.substr(-5, 5) !== '.xlsx') {
               //  fileName += '.xlsx';
            //}

            //  var json = spread.toJSON();

            // here is excel IO API
            //  excelIo.save(json, function (blob) {
            // saveAs(blob, fileName);
            //}, function (e) {
                  // process error
               //  console.log(e);
            //}, { password: password });
            var fd = new FormData(document.forms.namedItem("myform"));

         });

      });

</script>
</body>

</html>

lin666 · lin666

本帖最后由 lin666 于 2018-3-7 17:28 编辑

ClarkPan 发表于 2018-3-7 15:32
这个资料您可以参考一下，应该对您学习ASP.NET有些帮助
https://jingyan.baidu.com/article/f25ef25448748 ...

我把截图上的两行代码一行加在body 一行加在导出文件里面没有反应是不是还要写其他的代码比如放导出文件放在哪个目录下面？？？

Clark.Pan · Clark.Pan

这个是保存的前端写法，给您的demo中附件里就有：

function exportData(){
var selectedTableName = $("#table_name").find("option:selected").text();
var fileName = "export_"+selectedTableName+".xlsx";
var json = spread.toJSON({includeBindingSource: true});
var excelIo = new GC.Spread.Excel.IO();
// here is excel IO API
excelIo.save(json, function (blob) {
var fd = new FormData(document.forms.namedItem("myform"));
fd.append("test.xlsx",blob);
$.ajax({
url: "saveExport",
type:"POST",
contentType:false,
processData: false,
data:fd,
success: function (data) {
if(data.isSuccess == 1){
alert("上传成功！");
}else{
alert(data.errorMessage);
}
},
error: function (ex) {
alert("上传失败："+ex);
}
});
}, function (e) {
alert(e);
});
}

复制代码

后端根据平台的不同有不同的写法
至于后端如何将Excel保存到服务器端，说白了这个并不是spreadjs本身的问题，因为spreadjs是纯前端控件，对保存至服务器的方式没有任何限制，所以这块的问题就是如何将上传的文件保存至服务器端的问题，这个是WEB开发通用的，根据后端平台的不同方法也不尽相同。您可以在网上找一下相关的资料来学习一下。

		自动登录	找回密码
密码			立即注册

[已处理] spreadjs excel表格无法显示的问题

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄