js-xlsx 实现Excel导出函数公式

最新推荐文章于 2024-09-06 23:52:23 发布

过了今天我就不是程序猿了

最新推荐文章于 2024-09-06 23:52:23 发布

阅读量3.9k

点赞数 2

分类专栏：插件文章标签： excel vue

本文链接：https://blog.csdn.net/qq_38828872/article/details/113943807

版权

插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该博客介绍了如何在Vue.js项目中使用js-xlsx库导出Excel文件，并设置单元格的公式。通过示例代码展示了如何创建工作表、设置公式以及导出带有计算公式的Excel文件。同时，还提到了处理Excel只读模式的问题以及如何显示单位和格式化数值。

摘要由CSDN通过智能技术生成

VUE 使用 js-xlsx 前端导出Excel的函数公式

官网地址：https://github.com/SheetJS/sheetjs

worksheet['单元格'] = { t:'n', f: "函数公式" };

例如：设置单元格R2的值为’P2*Q2

//t: 'n':格式为数字。注意P2和Q2的格式也应为'n'，否则导出的公式不好用
wb.Sheets['Sheet1']['R2'] = { t: 'n', f: 'P2*Q2'};

下面是一个完整的例子：（例子中用的前端框架是element ui）
1.安装命令（以官网为主）

npm install xlsx

我用的下面这个也好用了
在这里插入图片描述
2.vue文件中引入

import XLSX from 'xlsx';

3.使用

<template>
		<el-button
            type="primary"
            size="small"
            @click="handleDownload"
          >Excel出力
		 </el-button>
</template>
<script>
import XLSX from 'xlsx';
export default {
data() {
    return {
      wopts: {
       //出力文件类型
        bookType: 'xlsx',
        // Generate Shared String Table
        bookSST: false,
        // Output data encoding
        type: 'binary',
      },
    };
  },
  // 字符串转ArrayBuffer
    s2ab(s) {
      if (typeof ArrayBuffer !== 'undefined') {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (let i = 0; i !== s.length; ++i) {
          view[i] = s.charCodeAt(i) & 0xFF;
        }
        return buf;
      } else {
        const buf = new Array(s.length);
        for (let i = 0; i !== s.length; ++i) {
          buf[i] = s.charCodeAt(i) & 0xFF;
        }
        return buf;
      }
    },
    // 自定义简单的下载文件实现方式
    saveAs(obj, fileName) {
      var tmpa = document.createElement('a');
      tmpa.download = fileName || '下载';
      // 绑定a标签
      tmpa.href = URL.createObjectURL(obj);
      // 模拟点击实现下载
      tmpa.click();
      // 延时释放
      setTimeout(function() {
        // 用URL.revokeObjectURL()来释放这个object URL
        URL.revokeObjectURL(obj);
      }, 100);
    },
    //点击Excel出力按钮
    handleDownload() {
    //想导出的数据
    const data = [
        {
          商品名称: 'aaa',
          单价: 5,
          件数: 5,
          总价: '',
        }, {
          商品名称: 'bbb',
          单价: 3,
          件数: 5,
          总价: '',
        },
      ];
      const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {}};
      // 将JS对象数组转换为工作表
      data = XLSX.utils.json_to_sheet(data);
      wb.Sheets['Sheet1'] = data;
      //循环根据自己的需求写，注：不能再用data，data已经被转换了，可以输出看一下
      for (let i = 2; i < 4; i++){
      //总价=单价*件数
        wb.Sheets['Sheet1']['D' + i] = { t: 'n', f: 'B' + i + '*C' + i };
      }
      this.saveAs(new Blob([this.s2ab(XLSX.write(wb, this.wopts))],
        {
          type: 'application/octet-stream',
        }),
      'Excel的名字.' + this.wopts.bookType);
    }
}
</script>

4.excel导出后打开（处于保护状态），不显示总价，需要点击编辑有效才可以看见（Excel设置了“浏览器下载的文件只读”的情况下）
如果Excel没有上面的设置，仍希望导出的Excel为只读模式则：

data['!protect'] = false;

20210309补充
在这里插入图片描述
5.希望显示单位
例 Sheet1的单元格D2 显示 25元
方法1：设置后靠右

wb.Sheets['Sheet1']['D2' ] = { t: 'n', f: 'B2*C2' ,z: '0"元"'};

方法2：设置后靠左

wb.Sheets['Sheet1']['D2' ] = { t: 'n', f: 'B2*C2&"元"'};

6.希望显示一位小数，显示单位，显示千分符

wb.Sheets['Sheet1']['D2' ] = { t: 'n', f: 'B2*C2' ,z: '#,##0.0"元"'};