精华内容
下载资源
问答
  • 2019-05-07 16:36:50

    使用如下方式导出时,由于js-xlsx提供了自动加工功能,会识别数据格式,然后进行加工。

    XLSX.utils.table_to_book(document.getElementById('dataTable')),
    

    这会导致导出的Excel数据和table显示数据不完全一致。

    为了保证数据一致,我们添加如下参数即可。

    XLSX.utils.table_to_book(document.getElementById('dataTable'),{raw:true}),
    

    raw:表示导出数据是否是未加工的。

    更多相关内容
  • 1.在项目中安装file saver和xlsx库,如下: npm install --save xlsx ...3.使用table_to_book方式导出。该方式需要在导出的数据所在的table有唯一标识符,如id <template> <div> <el-button typ

    1.在项目中安装file saver和xlsx库,如下:

    npm install --save xlsx file-saver

    2.在有下载功能的组件上,加入引用

    import { saveAs } from "file-saver";
    import XLSX from "xlsx";

    3.使用table_to_book方式导出。该方式需要在导出的数据所在的table有唯一标识符,如id

    <template>
      <div>
        <el-button type="" @click="downloadData()">下载</el-button>
        <el-table :data="tableData" height="400" id="download"> //id作为唯一标识,用于下载数据
          <el-table-column
            type="selection"
            width="50"
            v-if="showColumn == true"
            :key="Math.random()"
          ></el-table-column>
          <el-table-column
            label="序号"
            prop="id"
            v-else
            :key="Math.random()"
          ></el-table-column>
          <el-table-column label="英文名" prop="value"></el-table-column>
          <el-table-column label="中文名" prop="label"></el-table-column>
        </el-table>
        <el-button plain style="width:100px" @click="showColumn = true"
          >显示</el-button
        >
        <el-button plain style="width:100px" @click="showColumn = false"
          >隐藏</el-button
        >
      </div>
    </template>

    4.js下载数据代码如下

    <script>
    import { saveAs } from "file-saver";
    import XLSX from "xlsx";
    export default {
      name: "TableColumnShowHideDemo",
      data() {
        return {
          table_interval: null,
          showColumn: false,
          tableData: [
            { id: "1", value: "right", label: "正确" },
            { id: "2", value: "wrong", label: "错误" },
            { id: "3", value: "rightorwrong", label: "正确or错误" },
            { id: "4", value: "right", label: "正确" },
            { id: "5", value: "wrong", label: "错误" },
            { id: "6", value: "rightorwrong", label: "正确or错误" },
            { id: "7", value: "right", label: "正确" },
            { id: "8", value: "wrong", label: "错误" },
            { id: "9", value: "rightorwrong", label: "正确or错误" },
            { id: "10", value: "right", label: "正确" },
            { id: "11", value: "wrong", label: "错误" },
            { id: "12", value: "rightorwrong", label: "正确or错误" },
            { id: "13", value: "right", label: "正确" },
            { id: "14", value: "wrong", label: "错误" },
            { id: "15", value: "rightorwrong", label: "正确or错误" }
          ]
        };
      },
      methods: {
        downloadData: function() {
          this.exportExcel("download", "测试");
        },
        exportExcel: function(id, fileName) {
          var wb = XLSX.utils.table_to_book(document.querySelector("#" + id));
          var wt = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array"
          });
          try {
            saveAs(
              new Blob([wt], { type: "application/octet-stream" }),
              fileName + ".xlsx"
            );
          } catch (e) {
            if (typeof console !== "undefined") console.log(e, wt);
          }
        }
      }
    };
    </script>

    5.页面如下图所示:

    6.下载Excel数据如下:

     

     

    展开全文
  • 最近有个需求将一个web页面上多个table显示的数据导入到一个excel的sheet页面上面...后来想了个这种办法,利用xlsx里的方法,现将table转换成worksheet,然后利用sheet_to_json方法,将其转换成json对象。之后再讲多个j

    最近有个需求将一个web页面上多个table显示的数据导入到一个excel的sheet页面上面。

    发现目前给的demo都是直接将table导出到sheet上。

    扒拉了一下xlsx的源码,发现也没提供类似功能。只有table_to_sheet和table_add_dom方法,两个方法如果多次指定table,都会被后一个覆盖前一个,无法达成目的。

    后来想了个这种办法,利用xlsx里的方法,现将table转换成worksheet,然后利用sheet_to_json方法,将其转换成json对象。之后再讲多个json对象连接,然后用json_to_sheet转换成sheet对象,就能达成目的了。代码如下:

    var xlsxParam = {
                raw: true
            }; //转换成excel时,使用原始的格式,这样导出的时候数字过长不会变成科学计数法
            let workbook = XLSX.utils.book_new();
            
    
            let ws1 = XLSX.utils.table_to_sheet(document.querySelector('#resultTable1'), xlsxParam);
            let ws2 = XLSX.utils.table_to_sheet(document.querySelector('#resultTable2'), xlsxParam);
            let ws3 = XLSX.utils.table_to_sheet(document.querySelector('#resultTable3'), xlsxParam);
            let ws4 = XLSX.utils.table_to_sheet(document.querySelector('#resultTable4'), xlsxParam);
    
            let a = XLSX.utils.sheet_to_json(ws1, { header: 1 })
            let b = XLSX.utils.sheet_to_json(ws2, { header: 1 })
            let c = XLSX.utils.sheet_to_json(ws3, { header: 1 })
            let d = XLSX.utils.sheet_to_json(ws4, { header: 1 })
    
            a = a.concat(['']).concat(b).concat(['']).concat(c).concat(['']).concat(d)
            let worksheet = XLSX.utils.json_to_sheet(a, { skipHeader: true })
            XLSX.utils.book_append_sheet(workbook, worksheet, '汇总统计');   
            let wbout = XLSX.write(workbook, {
                bookType: 'xlsx',
                bookSST: true,
                type: 'array'
            });
            try {
                FileSaver.saveAs(
                new Blob([wbout], {
                    type: 'application/octet-stream;charset=utf-8"'
                }), '汇总统计表.xlsx');
            } catch (e) {
                if (typeof console !== 'undefined') console.log(e, wbOut);
            }
            return wbout;

    展开全文
  • 在使用elementui做管理平台时遇到导出表格的需求,网上有很多解决方案,最多的就是使用xlsx + FileSaver 将页面上的表格转换成excel book。 // 安装xlsx filesaver $ npm install --save xlsx file-saver 复制代码//...

    在使用elementui做管理平台时遇到导出表格的需求,网上有很多解决方案,最多的就是使用xlsx + FileSaver 将页面上的表格转换成excel book。

    // 安装xlsx filesaver
    $ npm install --save xlsx file-saver
    复制代码
    // js 代码
    import FileSaver from 'file-saver';
    import XLSX from 'xlsx';
    
    // id为要导出的table节点id(父节点也可以),title是导出的表格文件名
    export const exportTb = (id, title) => {
      /* generate workbook object from table */
      var wb = XLSX.utils.table_to_book(document.querySelector(id));
      /* get binary string as output */
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], {
            type: 'application/octet-stream'
          }),
          title
        );
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout);
      }
      return wbout;
    };
    复制代码

    以上 是不是很简单!表格就导出了!但是!!!

    我竟然在导出一份表格的时候发现 !一样的数据导了两遍??

    把所有的数据全部都查了一遍发现,我的数据没有重复,展示的table也无重复,再查看element table生成的代码发现:

    罪魁祸首是: 我使用了el-table的fixed属性来让某一列固定,但elementui的实现方式是:创建了两个tabledom,通过一个隐藏一个显示来实现交互效果。当我导出整个el-table 就会将两个div内的table都导出,导致数据重复。

    所以我针对这种情况又做了以下处理:

    export const exportTb = (id, title) => {
      /* generate workbook object from table */
      // 判断要导出的节点中是否有fixed的表格,如果有,转换excel时先将该dom移除,然后append回去,
      var fix = document.querySelector('.el-table__fixed');
      var wb;
      if (fix) {
        wb = XLSX.utils.table_to_book(document.querySelector(id).removeChild(fix));
        document.querySelector(id).appendChild(fix);
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector(id));
      }
      /* get binary string as output */
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], {
            type: 'application/octet-stream'
          }),
          title
        );
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout);
      }
      return wbout;
    };
    复制代码

    上述操作用户没有感知,只是在转换时先移除,下一步append,其实直接导出fixed的table也可以,但是不能够兼容其他页面没有使用fixed的表格。所以最终解决方案就是这样。有更好的解决方案欢迎提供~

    注意:本文出自 www.inmwang.com,如果要转载本文章,请与作者联系!

    并注明来源: www.inmwang.com/detail/5

    转载于:https://juejin.im/post/5c3407a0f265da6170074bd6

    展开全文
  • json_to_sheet是将JSON数据导出为Excel格式。 1.代码如下: <template> <div> <el-button type="" @click="downloadData()">下载</el-button> </div> </template> <...
  • worksheet:可以理解为XLSX对 excel 中sheet的描述的一个对象,可通过 XLSX.utils.aoa_to_sheet 、 XLSX.utils.json_to_sheet 、XLSX.utils.table_to_sheet 等方法创建,下面会具体讲每个方法的使用。 cellAddress: ...
  • html XLSX.utils.json_to_sheet导出excel模板 若使用vue,设置按钮,调用函数,自己比葫画瓢,慢慢摸索把 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta ...
  • 第一种导出表格的功能:yarn add xlsx script-loader file-saver xlsx-style效果展示 xlsx-style的bug修复:node_module/xlsx-style/dist/cpexcel.js的807行的var cpt = require('./cpt' + 'able')改为var cpt = ...
  • 普通方式下包npm i -S file-saver xlsx在util文件夹新建类建立to_xlsx.jsimport ...class ToXlsx {// id指的是绑定数据的table的id,// title指的是导出表格的名称,记得后缀xlsx,例如:title=‘重复导.xlsx‘;co...
  • 众所周知,一般表格生成都是后端的事情,但如果数据不是很多的表格其实前端生成并导出更简便,而前端生成并导出表格也只需要一个xlsx插件即可,并且导出的表格列宽等都可以通过几行代码调整,很简洁,调整样式并不...
  • importXLSXfrom'xlsx'importFileSaverfrom'file-saver'importxlsxStylefrom'xlsx-style';importXSUfrom'./xlsxStyle.utils';//XLSX 、FileSaver 、xlsxStyle 都可以直接npm下载(引入1、2、3可npm下载)引入1...
  • XLSX实现导出带样式的Excel表格的坑

    千次阅读 2020-07-21 15:27:29
    XLSX导出带样式的Excel表格失败导入XLSXxlsx-style的使用 项目的要求,需要导出一个结果到Excel表格中,因为所以,没有用Java的方式去实现,而选择了Vue前端直接导出的方式来实现。 开头总结: 使用xlsx-style的XLSX...
  • 以前利用exceljs 做过 导出自定义样式的Excel文件,然而现在有需要表格的表头是多级的。这样会非常麻烦。要把没级表头重新拆开以最小表头为层级的数,还要去处理行与列的情况。这样工作量忒大了,直接裂开。所以这里...
  • 最近在做项目的一个表格内容导出功能,因为不想在后端写导出,所以使用XLSX.utils.table_to_book这个方法导出页面表格内容,但是导出的内容有一列时间格式为年月日时分,导出到表格里只有年月日,时分不显示。...
  • elementUi—table组件+xlsx插件实现导出——sheetJs——前端实现表格的导出功能
  • 安装 npminstall--savexlsxfile-saver 在组件里面引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' ...第一种 其中#outTable是在el-table上定义的id ... var wb = XLSX.utils.table_to_book...
  • 前端导出表格之XLSX使用

    千次阅读 2020-08-09 10:45:40
    H5 table 导出表格 在页面创建table <table border="" id="table"> <tbody> <tr> <td rowspan='2'>表头1</td> <td colspan="2">表头2</td> </tr> ...
  • vue 使用 xlsx 导出excel

    2020-03-13 20:19:33
    安装 npm i xlsx 引用 import XLSX from 'xlsx' 导出 传入table节点: let xlsxParam = { raw: true } let wb = XLSX.utils.table_to_book(document.querySelector('#id'), xlsxParam) let wbout...
  • 使用js-xlsx插件和FileSaver插件可以很容易的实现前端导出表格到Excel功能 GitHub地址 https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js   开发中遇见一个问题,使用js-xlsx插件...
  • npm install --save xlsx-style(修改表格样式要下载) 或者 cnpm install --save xlsx file-saver npm install --save xlsx-style(修改表格样式要下载) 我上面的失败了 于是用了下面的这种 (如果安装了npm install -...
  • JavaScript:在vue里使用xlsx-style插件创建带样式的excel文件_粉末的沉淀的博客-CSDN博客 <template> <div style="width: 400px; margin:100px auto;display: flex;justify-content: space-around;" >...
  • 在Vue中,将数据导出成excel,合并单元格

    千次阅读 热门讨论 2020-01-20 17:01:50
    前段时间接到一个做报表的项目,需要将数据导出成...由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls、xlsx、ods(一种OpenOffice专有表格文件格...
  • 没什么难度,只是一个记录一个用例,同时以后在需要前端导出表格时,可以直接粘贴代码使用。代码如下: import XLSX, { utils } from 'xlsx' exportTable () { let workSheet = null const workBook = utils....
  • 前端将页面table或数据导出为Excel(.xlsx) 导出.xlsx
  • 安装 npm install file-saver xlsx --save-dev 引入依赖 import FileSaver from 'file-saver'; import XLSX from 'xlsx';... let vb = XLSX.utils.table_to_book(document.getElementById('outTable'...
  • 安装依赖 npm install --save xlsx file-saver 引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' ...情况一:table中没有使用fixed属性 ... var wb = XLSX.utils.table_to_book( d.
  • 第二步:更改export2Excel.js里面的源码,本文示例为3级表头,可以根据需求,自行更改//此处源码已被修改,autoWidt和bookType参数,先默认,(可以通过传参修改)exportfunctionexport_json_to_excel(excelData,...
  • 文章目录问题描述解决方法1.先上代码2.解决思路 问题描述 参考文章 我参考这篇文章,可以进行表格的导出,但是我发现,...import XLSX from "xlsx"; /** * * @param {String} id 表格id,类名为.class id为#id * @para
  • table导出选中项 我项目是 vue+ts,我看到需要额外的引入两个文件,这两个文件里面我看var还在用,还有各种类型报错,肯定要大改,我是个懒人。。。。 进而找到了这个方法:表格数据导出Excel 思路很新奇:把选中的...
  • SheetJS将table转为Excel

    2021-07-22 06:09:47
    看看我 table_to_booktable_to_sheet工具函数...var workbook = XLSX.utils.table_to_book(document.getElementById('tableau')); /* DO SOMETHING WITH workbook HERE */ 一个网页里面的多张表可以被转换成单...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,420
精华内容 568
关键字:

table_to_book xlsx 导出带样式