本人是在校大二学生一枚，最近暑期在校实习想学习一下关于前端的导入导出的功能的插件，希望大家可以推荐一些，谢谢！

有没有什么比较好用的前端导入导出Excel的浏览器插件？

3 个回答

发布于
2023-07-31 陕西

更新于
2023-07-31

您好，我们公司的SpreadJS产品您可以试一下：
https://www.grapecity.com.cn/developer/spreadjs/feature/io-excel（官网介绍）
https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/featu...（实战代码库）

无需开发工具可以直接在在线编辑代码运行的哈

。

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {calcOnDemand: true});
spread.fromJSON(jsonData);
var excelIo = new GC.Spread.Excel.IO();
document.getElementById('loadExcel').onclick = function () {
    var excelFile = document.getElementById("fileDemo").files[0];
    var password = document.getElementById('password').value;
    var incrementalEle = document.getElementById("incremental");
    var loadingStatus = document.getElementById("loadingStatus");
    
    incrementalEle.addEventListener('change', function (e) {
        document.getElementById('loading-container').style.display = incrementalEle.checked ? "block" : "none";
    });
    // here is excel IO API
    excelIo.open(excelFile, function (json) {
        var workbookObj = json;
        if (incrementalEle.checked) {
            spread.fromJSON(workbookObj, {
                incrementalLoading: {
                    loading: function (progress, args) {
                        progress = progress * 100;
                        loadingStatus.value = progress;
                        console.log("current loading sheet", args.sheet && args.sheet.name());
                    },
                    loaded: function () {
                    }
                }
            });
        } else {
            spread.fromJSON(workbookObj);
        }
    }, function (e) {
        // process error
        alert(e.errorMessage);

    }, {password: password});
};
document.getElementById('saveExcel').onclick = function () {

    var fileName = document.getElementById('exportFileName').value;
    var password = document.getElementById('password').value;
    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});

};

<!doctype html>
<html style="height:100%;font-size:14px;">

<head>

    <meta name="spreadjs culture" content="zh-cn" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
    <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
    <script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script>
    <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js" type="text/javascript"></script>
    <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
    <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script>
    <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
    <script src="$DEMOROOT$/spread/source/data/excel_data.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
    <div id="ss" class="sample-spreadsheets"></div>
    <div class="options-container">
        <div class="option-row">
            <div class="inputContainer">
                <input type="checkbox" id="incremental" checked/>
                <label for="incremental">Incremental Loading</label>
                
                <p class="summary" id="loading-container">
                    Loading progress: 
                    <input style="width: 231px;" id="loadingStatus" type="range" name="points" min="0" max="100" value="0" step="0.01"/>
                </p>
                <input type="file" id="fileDemo" class="input">
                <br>
                <input type="button" id="loadExcel" value="import" class="button">
            </div>
            <div class="inputContainer">
                <input id="exportFileName" value="export.xlsx" class="input">
                <input type="button" id="saveExcel" value="export" class="button">
            </div>
        </div>
        <div class="option-row">
            <div class="group">
                <label>Password:
                    <input type="password" id="password">
                </label>
            </div>
        </div>
    </div>
</div></body>
</html>

拉格朗日的假日

1.5k1214

发布于
2023-07-24 福建

更新于
2023-07-24

SheetJS 挺强大的：Sheet js 官网

官方没提供中文文档，但是 github 有中文翻译文档

这里有官方demo：演示页面

<!DOCTYPE html>
<html>
<head>
  <title>SheetJS Basic Operations</title>
  <!-- 导入 SheetJS -->
  <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
</head>
<body>

<button onclick="exportToExcel()">导出 Excel</button>

<script type="text/javascript">
function exportToExcel() {
  // 创建工作簿
  const workbook = XLSX.utils.book_new();
  
  // 创建工作表
  const worksheet = XLSX.utils.aoa_to_sheet([
    ['姓名', '年龄', '性别'],
    ['张三', '25', '男'],
    ['李四', '30', '男'],
    ['王五', '28', '女']
  ]);
  
  // 将工作表添加到工作簿中
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
  
  // 导出 Excel 文件
  XLSX.writeFile(workbook, "data.xlsx");
}
</script>

</body>
</html>