html和vue XLSX.utils.json_to_sheet导出excel模板

最新推荐文章于 2024-05-14 22:41:37 发布
最新推荐文章于 2024-05-14 22:41:37 发布
阅读量4k 收藏 7
点赞数 4
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/youtiantin/article/details/118896207
版权

html XLSX.utils.json_to_sheet导出excel模板，由于此处是函数自调用，所以页面加载的时候就会提示下载

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>展示 用xlsx库 导出excel，含多个sheet</title>
  </head>
  <body>
    <h1>展示 用xlsx库 导出excel，含多个sheet</h1>

    <button id="export" style="padding:20px;background: #69f;color:#fff;" @click="aaa()"> 导出excel</button>
   
    <script src="https://unpkg.com/xlsx/dist/xlsx.core.min.js"></script>
	
    <script>
      // 将workbook装化成blob对象
     function workbook2blob(workbook) {
         // 生成excel的配置项
         var wopts = {
             // 要生成的文件类型
             bookType: "xlsx",
             // // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
             bookSST: false,
             type: "binary"
         };
         var wbout = XLSX.write(workbook, wopts);
         // 将字符串转ArrayBuffer
        
         var blob = new Blob([s2ab(wbout)], {
             type: "application/octet-stream"
         });
         return blob;
     }
     function s2ab(s) {
         var buf = new ArrayBuffer(s.length);
         var view = new Uint8Array(buf);
         for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
         return buf;
     }
         // 将blob对象创建bloburl，然后用a标签实现弹出下载框
     function openDownloadDialog(blob, fileName) {
         if (typeof blob == "object" && blob instanceof Blob) {
             blob = URL.createObjectURL(blob); // 创建blob地址
         }
         var aLink = document.createElement("a");
         aLink.href = blob;
         // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效
         aLink.download = fileName || "";
         var event;
         if (window.MouseEvent) event = new MouseEvent("click");
         //   移动端
         else {
             event = document.createEvent("MouseEvents");
             event.initMouseEvent( "click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null );
         }
         aLink.dispatchEvent(event);
     }
     // 用的例子
     let sheet1data = [ { department: "行政部", count: 2 }, { department: "前端部", count: 2 } ];
     let sheet2data = [ { name: "张三", do: "整理文件" }, { name: "李四", do: "打印" } ];
     let sheet3data = [ { name: "张大人", do: "vue" }, { name: "李大人", do: "react" } ];
     var sheet1 = XLSX.utils.json_to_sheet(sheet1data);
     var sheet2 = XLSX.utils.json_to_sheet(sheet2data);
     var sheet3 = XLSX.utils.json_to_sheet(sheet3data);
     
     /* create a new blank workbook */
     var wb = XLSX.utils.book_new();
     XLSX.utils.book_append_sheet(wb, sheet1, "部门统计");
     XLSX.utils.book_append_sheet(wb, sheet2, "行政部");
     XLSX.utils.book_append_sheet(wb, sheet3, "前端部");
     const workbookBlob = workbook2blob(wb);
    openDownloadDialog(workbookBlob, `部门统计.xlsx`);

    </script>
  </body>
</html>

下面是vue，自己总结的

//找一个位置添加此按钮
<Button icon="ios-download-outline" type="primary" @click="exportData">模板导出</Button>

//此处是js
 changeData (s) {
      //如果存在ArrayBuffer对象(es6) 最好采用该对象
      if (typeof ArrayBuffer !== 'undefined') {
        //1、创建一个字节长度为s.length的内存区域
        var buf = new ArrayBuffer(s.length);
        //2、创建一个指向buf的Unit8视图，开始于字节0，直到缓冲区的末尾
        var view = new Uint8Array(buf);
        //3、返回指定位置的字符的Unicode编码
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
      } else {
        var buf2 = new Array(s.length);
        for (var k = 0; k != s.length; ++k) buf2[k] = s.charCodeAt(k) & 0xFF;
        return buf2;
      }
    },
    saveAs (obj, fileName) {//当然可以自定义简单的下载文件实现方式
      var tmpa = document.createElement("a");
      tmpa.download = fileName ? fileName + '.xlsx' : new Date().getTime() + '.xlsx';
      tmpa.href = URL.createObjectURL(obj); //绑定a标签
      tmpa.click(); //模拟点击实现下载

      setTimeout(function () { //延时释放
        URL.revokeObjectURL(obj); //用URL.revokeObjectURL()来释放这个object URL
      }, 100);

    },
    //按钮调用的方法
    exportData () {
      var wopts = {
        bookType: 'xlsx',
        bookSST: false,
        type: 'binary'
      };
      var workBook = {
        SheetNames: ['Sheet1'],
        Sheets: {},
        Props: {}
      };
	//设置excel表格的表头
      let sheet1data = [{ "销售物料代码": "", "采购物料代码": "", "下单数量": "" }]
      //1、XLSX.utils.json_to_sheet(data) 接收一个对象数组并返回一个基于对象关键字自动生成的“标题”的工作表，默认的列顺序由使用Object.keys的字段的第一次出现确定
      //2、将数据放入对象workBook的Sheets中等待输出
      workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(sheet1data)

      //3、XLSX.write() 开始编写Excel表格
      //4、changeData() 将数据处理成需要输出的格式
      this.saveAs(new Blob([this.changeData(XLSX.write(workBook, wopts))], { type: 'application/octet-stream' }))
    },
QAQalone
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
导出Excel功能插件 xlsx.full.min.js
02-21
3. **调用API**：使用XLSX库提供的API，如`XLSX.utils.json_to_sheet`将JSON转换为工作表，然后使用`XLSX.utils.book_new`创建一个新的电子表格文件，再用`XLSX.utils.book_append_sheet`将工作表添加到文件中。...
vue前端导出Excel.zip
05-22
Sheet1: XLSX.utils.json_to_sheet(data), }, }; ``` 为了生成实际的Excel文件，你可以使用`XLSX.writeFile`方法： ```javascript XLSX.writeFile(workbook, 'export.xlsx'); ``` 这段代码会在当前目录下生成一...
前端使用XLSX生成下载模板、读取excel
qq_42775791的博客
04-12 543
【代码】前端使用XLSX生成下载模板、读取excel。
vue+elementUI+XLSX.utils.sheet_to_json实现复杂表头的导入功能
weixin_31789689的博客
01-04 1816
XLSX.utils.sheet_to_json方法不带参数的调用，无法解析我们的复杂表头的excel表格，因此，我们需要通过传参数，来指定表头的真实起始位置。通过生成如上的数组，我们再进行二次处理，即可渲染出我们想要的复杂表格。
9.前端导出EXCEL-XLSX
最新发布
yujiabao702的博客
05-14 724
npm i xlsx。
XLSX.js 使用笔录
菜鸟学编程
05-20 1373
// 步骤1：建工作簿 var wb = XLSX.utils.book_new(); /** * 步骤2：建工作表 * 创建工作表 * aoa_to_sheet 二维数组 * json_to_sheet 对象数组 * table_to_sheet tableDOM（表模型） */ let ws= XLSX.utils.json_to_sheet(json); // 步骤3：把工作表添加到工作簿中 XLSX.utils....
使用XLSX.utils.sheet_to_json()解析excel，给空的单元格赋值为空字符串
聆听
06-21 917
使用XLSX.utils.sheet_to_json()解析excel，给空的单元格赋值为空字符串
基于 SheetJS 的前端合并单元格复杂表头导入
qq_43600513的博客
04-23 1685
顶部为基于 antdv 的 table 组件的复现效果。复现 Excel 表格中，合并完单元格后的效果。table 组件用到的 columns 配置，及 dataSource 数据，均由解析函数一并返回。无需要开发者二次开发及维护。底部为解析函数解析后返回的三个数据结果。分别为解析后的 antdv columns 表格列的配置项，直接传递给 table 组件的 columns 属性使用。
Vue+File saver+xlsx使用json_to_sheet导出数据为excel
yhj198927的博客
04-19 2277
json_to_sheet是将JSON数据导出为Excel格式。 1.代码如下： <template> <div> <el-button type="" @click="downloadData()">下载</el-button> </div> </template> <script> import { saveAs } from "file-saver"; import XLSX from "xls
vue导出excel并修改表头样式
10-29
const ws = XLSX.utils.json_to_sheet(data); // data是转换后的二维数组 XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); ``` 5. **修改表头样式**：在创建工作表时，可以指定单元格的样式。这包括字体、填充...
xlsx.core.min.js
05-23
console.log(XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]])); ``` 要导出数据，可以先创建工作簿，然后写入数据，最后调用`writeFile`： ```javascript var wb = XLSX.utils.book_new();...
vue el-table前端 file-saver 导出excel可导出分页数据.zip
12-11
const ws = XLSX.utils.json_to_sheet(data); const wb = { Sheets: { 'Sheet1': ws }, SheetNames: ['Sheet1'] }; const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'buffer' }); saveAs...
Vue + element-ui实现导出excel表
ji_ban的博客
09-01 675
1、安装依赖 npm install --save xlsx file-saver 2、引入插件 <-- 在要导出的页面引入，或者在main中定义全局使用。我这里是在页面中直接引入 --> importXLSXfrom"xlsx" 3、导出按钮 <-- 普通的按钮，添加点击事件（避免重复点击） --> <el-button type="warning" plain size="mini" @click.stop.pr...
vue+element 导入excel数据并转化为json存入el-table
Yoke______的博客
08-12 2235
项目开发过程中有个需求，仓库系统入库的时候需求是把填好的入库单excel表格直接导入到vue前端页面上，并展示出来，没有问题的话以表单的形式存入数据库。 将excel表格内容展示到页面中，经过不懈的学习 特意总结一下子（学习前辈经验，自我总结） 要实现的功能是，通过点击el-button按钮 上传一个xslx格式的文件 然后达到如下的效果： 效果大概就是这样，需求也已经梳理清楚 接下来就是我总结的直接可以使用的代码 vue的代码主要是这样子的（与我实际版本相比阉割） &lt...
Vue里如何实现excel转json的功能
qq_31699019的博客
03-17 2256
前言： 因为做微信小程序云开发，在云开发导入数据需要json格式的，然鹅我们市场部的小姐姐给我的文档是excel文件，导致我需要去手动录入，后来在网上搜了下。 有通过复制excel文件内容粘贴后生成的：http://www.jsonla.com/excel2json/ 有通过上传excel文件后生成的json文件下载却需要付费的：http://www.yzcopen.com/doc/exceljson 搞得那么难受不如自己写一个，效果图如下： 使用地址：https://test-mars.qtshe.c
vue将json数据导出为excel
wen_j的博客
04-02 2103
vue将json数据以表格的形式展示渲染在页面中，并提供导出功能 点击导出执行下面的方法tableToExcel //导出文件时进行编码 function base64(s) { return window.btoa(unescape(encodeURIComponent(s))); } methods:{ tableToExcel() { // 要导出的json数据 ...
纯前端 导出Excel文件(包括导出用数组数据模拟文件数据和实际后端返回的文件数据)的 方法
qq_44327851的博客
10-26 3915
在纯前端导出文件的一种常见方法是通过生成下载链接来实现，可以使用Blob对象和URL.createObjectURL()方法来实现,因为现在工作中主要运用的前端框架是Angular，这篇文章将以angular为例进行阐述。
vue2 项目导出excel表格(一个xlsx文件，多个sheet)
zerlinda0913的博客
11-03 1614
一个xlsx文件，多个sheet
vue3项目中前端导出word文档和导出excel文档
一路走一路看，一边哭一边笑
12-06 1796
vue3项目中前端导出word文档和导出excel文档
vue 导出 json_to_sheet
08-23
在Vue.js中，你可以使用`json_to_sheet`方法将JSON数据导出为Excel的Sheet。这个方法通常是在使用`xlsx`库时使用的。 首先，你需要安装`xlsx`库。可以通过以下命令使用npm进行安装： ```bash npm install xlsx ``` 然后，在你的Vue组件中，你可以按照以下方式导出JSON数据为Excel的Sheet： ```javascript import { json_to_sheet, utils } from 'xlsx'; export default { methods: { exportToExcel() { // 模拟一些JSON数据 const data = [ { name: 'John', age: 25, city: 'New York' }, { name: 'Jane', age: 30, city: 'San Francisco' }, { name: 'Bob', age: 35, city: 'Los Angeles' }, ]; // 创建一个工作簿 const wb = utils.book_new(); // 将JSON数据转换为Sheet const ws = json_to_sheet(data); // 将Sheet添加到工作簿 utils.book_append_sheet(wb, ws, 'Sheet1'); // 将工作簿保存为Excel文件 utils.writeFile(wb, 'excel_file.xlsx'); } } } ``` 在上面的例子中，我们首先导入了`json_to_sheet`和`utils`方法。然后，我们定义了一个`exportToExcel`方法，在这个方法中，我们创建了一个工作簿并将JSON数据转换为Sheet。最后，我们将工作簿保存为名为"excel_file.xlsx"的Excel文件。 你可以根据你自己的需求修改和调整这个例子。希望对你有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值