首页 > 其他分享 >vue中导出excel表格, Workbook 导出的表格的单元格格式设置为文本

vue中导出excel表格, Workbook 导出的表格的单元格格式设置为文本

时间:2024-03-25 16:58:23浏览次数:24  
标签:XLSX vue const 表格 导出 cell range ws var

<template>
  <button @click="exportExcel">导出Excel</button>
</template>
 
<script>
import XLSX from 'xlsx';
 
export default {
  methods: {
    exportExcel() {
      // 创建Workbook和工作表
      const workbook = XLSX.utils.book_new();
      const worksheet = XLSX.utils.aoa_to_sheet([
        ['姓名', '年龄', '邮箱'],
        ['Alice', 28, '[email protected]'],
        ['Bob', 22, '[email protected]']
      ]);
       // 设置姓名列的文本格式
      const nameCellRef = XLSX.utils.encode_cell({ c: 0, r: 0 }); // 第一行第一列
      worksheet[nameCellRef].z = 'm'; // 设置单元格格式为文本
worksheet[nameCellRef].z = '@'; // 设置单元格格式为文本,数字也是按照字符串处理 
      // 将工作表添加到Workbook
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
       // 生成Excel的配置
      const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' });
 
      // 创建二进制对象并创建url
      const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
      const url = URL.createObjectURL(blob);
 
      // 创建a标签模拟点击进行下载
      const a = document.createElement('a');
      if (typeof a.download === 'undefined') {
        window.location = url;
      } else {
        a.href = url;
        a.download = 'formatted_excel.xlsx';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
 
      // 清除对象URL
      setTimeout(function() { URL.revokeObjectURL(url); }, 100);
    }
  }
};
 
// 将字符串转换为ArrayBuffer
function s2ab(s) {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}
</script>

是在具体的列为文本格式

//设置第colum列为文本格式,输入的内容按照字符串显示
function sheet_from_array_of_arrays_column(data, column) { var ws = {}; var range = {s: {c: 100000, r: 100000}, e: {c: 0, r: 0}}; for (var R = 0; R != data.length; ++R) { for (var C = 0; C != data[R].length; ++C) { if (range.s.r > R) range.s.r = R; if (range.s.c > C) range.s.c = C; if (range.e.r < R) range.e.r = R; if (range.e.c < C) range.e.c = C; var cell = {v: data[R][C]}; if (C==column) { cell.z = '@'; } if (C==column && cell.v == null){ cell.v =''; } var cell_ref = XLSX.utils.encode_cell({c: C, r: R}); if (typeof cell.v === 'number') cell.t = 'n'; else if (typeof cell.v === 'boolean') cell.t = 'b'; else if (cell.v instanceof Date) { cell.t = 'n'; cell.z = XLSX.SSF._table[14]; cell.v = datenum(cell.v); } else cell.t = 's'; ws[cell_ref] = cell; } } if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range); return ws; }

生成表格

export function export_json_to_excel_column(th, jsonData, defaultTitle,column) {
    /* original data */
    var data = jsonData;
    /*方法可向数组的开头添加一个或更多元素,并返回新的长度。*/
    data.unshift(th);
    var ws_name = "SheetJS";
    var wb = new Workbook(), ws = sheet_from_array_of_arrays_column(data,column);   
   //   const nameCellRef = XLSX.utils.encode_cell({ c: 1, r: 0 }); // 第一行第一列
    //  console.log(nameCellRef);
     // ws[nameCellRef].z = '@'; // 设置单元格格式为文本
    /* add worksheet to workbook */
    wb.SheetNames.push(ws_name);
    wb.Sheets[ws_name] = ws;
    var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
    var title = defaultTitle || '列表'
    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
}

 

标签:XLSX,vue,const,表格,导出,cell,range,ws,var
From: https://www.cnblogs.com/RedOrange/p/18094768

相关文章

  • 基于vue+element ui实现下拉表格选择组件
    一:前言本文属于转载;二:正文1:示例展示单选多选index.vue<template><el-selectref="select"v-model="defaultValue":title="isNeedTitle?getTitle():null":clearable="false":multiple="multiple"......
  • 09-Vue-概述
    Vue官网:Vue.js(vuejs.org)Avue文档:Date日期|Avue(avuejs.com) 前置工作1)在使用Vue时,我们推荐在你的浏览器上 安装—Vue.js(vuejs.org),它允许你在一个更友好的界面中审查和调试Vue应用。2) 直接下载开发版本的vue.js,并用 <script> 标签引入,Vue 会被注册......
  • 前端导入导出 Excel
    前端导入导出Excel文件通常使用一些现成的库或工具来简化操作。以下是一种常见的实现方法:导出Excel1.使用现成的库可以使用像xlsx或exceljs这样的JavaScript库来生成Excel文件。这些库提供了创建Excel文件所需的各种功能和API。//使用xlsx库示例constXLSX......
  • 基于ssm+vue.js的在线购书商城系统附带文章和源代码设计说明文档ppt
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我成功案例代码参考数据库参考源码获取前言......
  • 基于ssm+vue.js的乐购游戏商城系统附带文章和源代码设计说明文档ppt
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我成功案例代码参考数据库参考源码获取前言......
  • 基于ssm+vue.js的购物网站附带文章和源代码设计说明文档ppt
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我成功案例代码参考数据库参考源码获取前言......
  • 为什么 export 导出一个字面量会报错,而使用 export default 就不会报错?
    核心其实总的来说就是export导出的是变量的句柄(或者说符号绑定、近似于C语言里面的指针,C++里面的变量别名),而exportdefault导出的是变量的值。需要注意的是:模块里面的内容只能在模块内部修改,模块外部只能使用。esModule在语法层面做了一层浅层的保护(即将import导入的变量......
  • 原生JavaScript写个表格版的日历
    如图:简单、易懂、写着玩儿的……代码如下:<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document&l......
  • Java项目:小程序公交信息在线查询系统(java+SSM+Vue+ElementUI+mysql)
    源码获取:俺的博客首页"资源"里下载! 项目介绍基于SSM+Vue的小程序公交信息在线查询系统小程序角色:管理员、用户两种角色,分为小程序端和后台管理两部分;用户:用户通过小程序登录页面可以填写用户名和密码等信息进行登录操作,登录成功后,进入首页可以查看首页、线路信息、站......
  • Java项目:小程序公交信息在线查询系统(java+SSM+Vue+ElementUI+mysql)
    源码获取:俺的博客首页"资源"里下载! 项目介绍基于SSM+Vue的小程序公交信息在线查询系统小程序角色:管理员、用户两种角色,分为小程序端和后台管理两部分;用户:用户通过小程序登录页面可以填写用户名和密码等信息进行登录操作,登录成功后,进入首页可以查看首页、线路信息、站......