精华内容
下载资源
问答
  • js导出excel插件,插件中自带导出例子,插件解决导出excel打开时候报错“扩展名不一致问题”。
  • js导出xlsx表格文件

    2019-12-11 11:50:31
    <button type="button" onclick="tableToExcel('item','data')">导出</button> <table id="item"> <tr> <th>编号</th> <th>姓名</th> <t...
    <button type="button" onclick="tableToExcel('item','data')">导出</button>
    <table id="item">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>1</td>
            <td>小明</td>
            <td>19</td>
        </tr>
        <tr>
            <td>2</td>
            <td>小芳</td>
            <td>20</td>
        </tr>
        <tr>
            <td>3</td>
            <td>大军</td>
            <td>22</td>
        </tr>
    </table>
    
     function base64 (content) {
                return window.btoa(unescape(encodeURIComponent(content)));
            }
            /*
            *@tableId: table的Id
            *@fileName: 要生成excel文件的名字(不包括后缀,可随意填写)
            */
            function tableToExcel(tableID,fileName){
                var table = document.getElementById(tableID);
                var excelContent = table.innerHTML;
                var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
                excelFile += "<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>";
                excelFile += "<meta charset='UTF-8'><body><table>";
                excelFile += excelContent;
                excelFile += "</table></body>";
                excelFile += "</html>";
                var link = "data:application/vnd.ms-excel;base64," + base64(excelFile);
                var a = document.createElement("a");
                a.download = fileName+".xls";
                a.href = link;
                a.click();
            }
    
    展开全文
  • 纯前端导出数据xlsx、excel表格,前端导出json数据,html+js导出数据,导出xlsx、excel数据,纯javaScript导出xlsx、excel表格方法一所需js1.jquery.js2.Export2Excel.js3.FileSaver.js4.Blob.js5.xlsx.core.js示例...

    纯前端导出数据xlsx、excel表格,前端导出json数据,html+js导出数据,导出xlsx、excel数据,纯javaScript导出xlsx、excel表格

    方法一

    所需js

    1.jquery.js

    2.Export2Excel.js

    点击下载

    3.FileSaver.js

    点击下载

    4.Blob.js

    点击下载

    5.xlsx.core.js

    点击下载

    示例

    HTML

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>导出数据xlsx</title>
    	</head>
    	<body>
    		<!--点击此按钮进行下载-->
    		<button id="download">点击下载</button>
    		<!--导入jquery-2.1.0.js-->
    		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
    		<!--导入Export2Excel.js-->
    		<script type="text/javascript" src="js/Export2Excel.js" ></script>
    		<!--导入FileSaver.min.js-->
    		<script type="text/javascript" src="js/FileSaver.min.js" ></script>
    		<!--导入Blob.js-->
    		<script type="text/javascript" src="js/Blob.js" ></script>
    		<!--导入xlsx.core.min.js-->
    		<script type="text/javascript" src="js/xlsx.core.min.js" ></script>
    
    
    		<script type="text/javascript">
    			//就绪函数
    			$(function(){
    				//要导出的表格头部
    				var title = [
    					{
    						title:'姓名',			//头部内容
    						dataIndex:'name'		//所对应的字段名
    					},
    					{
    						title:'年龄',			//头部内容
    						dataIndex:'age'			//所对应的字段名
    					},
    					{
    						title:'性别',			//头部内容
    						dataIndex:'gender'		//所对应的字段名
    					}
    				];
    				//要导出的数据
    				var data = [
    					{
    						'name':'哈哈',
    						'age':'12',
    						'gender':'男'
    					},
    					{
    						'name':'嘻嘻',
    						'age':'15',
    						'gender':'男'
    					},
    					{
    						'name':'呵呵',
    						'age':'20',
    						'gender':'女'
    					}
    				];
    				var name = '导出列表名';
    				//绑定点击事件
    				$("#download").click(function(){
    					/**
    					* title 表格头部
    					* data 要导出的数据
    					* name 导出后的文件名字
    					*/
    					export2Excel(title,data,name)
    				})
    			})
    			//导出方法 (固定不变)
    			function export2Excel(columns,list,fileName){
    		        let tHeader = []
    		        let filterVal = []
    		        columns.forEach(item =>{
    		            tHeader.push(item.title)
    		            filterVal.push(item.dataIndex)
    		        })
    		        const data = list.map(v => filterVal.map(j => v[j]))
    		        export_json_to_excel(tHeader, data, fileName);
    			}
    		</script>
    	</body>
    </html>
    

    下载

    在这里插入图片描述

    内容

    在这里插入图片描述

    方法二

    将table标签,包括tr、td等对json数据进行拼接,将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但文件形式上还是html,代码如下

    示例

    HTML

    <html>
    <head>
      <p style="font-size: 20px;color: red;">使用table标签方式将json导出xls文件</p>
      <button onclick='tableToExcel()'>导出</button>
    </head>
    <body>
      <script>
                
        function tableToExcel(){
          //要导出的json数据
          const jsonData = [
            {
              name:'路人甲',
              phone:'123456',
              email:'123@123456.com'
            },
            {
              name:'炮灰乙',
              phone:'123456',
              email:'123@123456.com'
            },
            {
              name:'土匪丙',
              phone:'123456',
              email:'123@123456.com'
            },
            {
              name:'流氓丁',
              phone:'123456',
              email:'123@123456.com'
            },
          ]
          //列标题
          let str = '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>';
          //循环遍历,每行加入tr标签,每个单元格加td标签
          for(let i = 0 ; i < jsonData.length ; i++ ){
            str+='<tr>';
            for(let item in jsonData[i]){
                //增加\t为了不让表格显示科学计数法或者其他格式
                str+=`<td>${ jsonData[i][item] + '\t'}</td>`;     
            }
            str+='</tr>';
          }
          //Worksheet名
          let worksheet = 'Sheet1'
          let uri = 'data:application/vnd.ms-excel;base64,';
     
          //下载的表格模板数据
          let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" 
          xmlns:x="urn:schemas-microsoft-com:office:excel" 
          xmlns="http://www.w3.org/TR/REC-html40">
          <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
            <x:Name>${worksheet}</x:Name>
            <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
            </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
            </head><body><table>${str}</table></body></html>`;
          //下载模板
          window.location.href = uri + base64(template)
        }
        //输出base64编码
        function base64 (s) { return window.btoa(unescape(encodeURIComponent(s))) }
    </script>
    </body>
    </html>
    

    下载及内容

    在这里插入图片描述

    方法三

    通过将json遍历进行字符串拼接,将字符串输出到csv文件,代码如下

    示例

    HTML

    <html>
    <head>
      <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p>
      <button onclick='tableToExcel()'>导出</button>
    </head>
    <body>
      <script>
                
        function tableToExcel(){
          //要导出的json数据
          const jsonData = [
            {
              name:'路人甲',
              phone:'123456789',
              email:'000@123456.com'
            },
            {
              name:'炮灰乙',
              phone:'123456789',
              email:'000@123456.com'
            },
            {
              name:'土匪丙',
              phone:'123456789',
              email:'000@123456.com'
            },
            {
              name:'流氓丁',
              phone:'123456789',
              email:'000@123456.com'
            },
          ]
          //列标题,逗号隔开,每一个逗号就是隔开一个单元格
          let str = `姓名,电话,邮箱\n`;
          //增加\t为了不让表格显示科学计数法或者其他格式
          for(let i = 0 ; i < jsonData.length ; i++ ){
            for(let item in jsonData[i]){
                str+=`${jsonData[i][item] + '\t'},`;     
            }
            str+='\n';
          }
          //encodeURIComponent解决中文乱码
          let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
          //通过创建a标签实现
          let link = document.createElement("a");
          link.href = uri;
          //对下载的文件命名
          link.download =  "json数据表.csv";
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
     
    </script>
    </body>
    </html>
    

    下载及内容

    在这里插入图片描述

    展开全文
  • 引入js文件下载地址:链接: https://pan.baidu.com/s/1gdOl1HnTrM5mZgPgd5qeDQ 提取码: c8js导入4个js文件'js/xlsx.extendscript.js','js/xlsx.full.min.js','js/export.js','js/jszip.js','js/xlsx-style/xlsx.full...

    引入js文件

    下载地址:链接: https://pan.baidu.com/s/1gdOl1HnTrM5mZgPgd5qeDQ 提取码: c8js

    导入4个js文件

    'js/xlsx.extendscript.js','js/xlsx.full.min.js','js/export.js','js/jszip.js','js/xlsx-style/xlsx.full.min.js'

    其中 js/xlsx-style/xlsx.full.min.js 是表格样式的js

    html部分

    导出

    js部分

    process1 是table的id

    function btn_export() {

    var table1 = document.querySelector("#process1");

    var sheet = XLSX2.utils.table_to_sheet(table1);//将一个table对象转换成一个sheet对象

    //这个就是修改格式的代码

    sheet["A1"].s = {

    font: {

    name: '宋体',

    sz: 20,

    },

    alignment: {

    horizontal: "center",

    vertical: "center",

    wrap_text: true

    }

    };

    sheet["!cols"] = [{wpx: 40},{wpx: 200},{wpx: 50},{wpx: 60},{wpx: 40},{wpx: 60},{wpx: 40},{wpx: 40},{wpx: 40},{wpx: 40},{wpx: 40},{wpx: 40},{wpx: 40},{wpx: 60},{wpx: 150},{wpx: 60},{wpx: 40},{wpx: 40},{wpx: 40},{wpx: 60},{wpx: 60},{wpx: 60},{wpx: 140},{wpx: 60},{wpx: 40},]; //单元格列宽

    openDownloadDialog(sheet2blob(sheet,'汇总表'),'工作人员情况统计.xlsx');

    }

    参考链接:https://segmentfault.com/a/1190000019700368?utm_source=tag-newest

    展开全文
  • 需要将页面上的表格内容导出...files: [vendor_path('file-saver/FileSaver.min.js'),vendor_path('js-xlsx/dist/xlsx.core.min.js'),]FileSaver、js-xlsx的github,支持的版本类型,和使用方法。js-xlsx:datenum ...

    需要将页面上的表格内容导出成excel格式。

    使用了FileSaver、js-xlsx的前端插件。

    files: [

    vendor_path('file-saver/FileSaver.min.js'),

    vendor_path('js-xlsx/dist/xlsx.core.min.js'),

    ]

    FileSaver、js-xlsx的github,支持的版本类型,和使用方法。

    js-xlsx:

    datenum = (v, date1904) ->

    if date1904

    v += 1462

    epoch = Date.parse(v)

    return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000)

    sheetFromArrayOfArrays = (data) ->

    ws =

    # 设置每一列的宽度(12个字符)

    '!cols': ({wch: 12} for i in _.range(data[0].length))

    range =

    s:

    c: 10000000

    r: 10000000

    e:

    c: 0

    r: 0

    R = 0

    while R != data.length

    C = 0

    while C != data[R].length

    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

    cell = v: data[R][C]

    if cell.v == null

    ++C

    continue

    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

    ++C

    ++R

    if range.s.c < 10000000

    ws['!ref'] = XLSX.utils.encode_range(range)

    return ws

    s2ab = (s) ->

    buf = new ArrayBuffer(s.length)

    view = new Uint8Array(buf)

    for i in _.range(s.length)

    view[i] = s.charCodeAt(i) & 0xFF

    return buf

    FileSaver:

    filename = "ge.xlsx"

    wb =

    SheetNames: []

    Sheets: {}

    ws = sheetFromArrayOfArrays(data)

    sheet_name = "ge"

    wb.SheetNames.push sheet_name

    wb.Sheets[sheet_name] = ws

    if wb.SheetNames.length == 0

    return showErr()

    wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'binary'})

    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), filename)

    展开全文
  • NOTE: This project is a fork of the original (and awesome) SheetJS/xlsx project. It is extended to enable cell formats to be read from and written to .xlsx workbooks. The intent is to provide a ...
  • 第三步:编辑导出Excel功能的代码,打开编辑器将以下代码复制到编辑器中编码完成。如下所示<导出var jsono = [{ //测试数据"保质期临期预警(天)": "adventLifecycle","商品标题": "title","建议零售价": ...
  • 记录一下近期使用js-xlsx的一些经验真正的.xls\.xlsx文件,就算是空白的其实是包含了一些内容的 所以并不能直接像写入txt一样直接搞一个file往里面把数据写入就完了现在网上查得到导出excel的一些方法:1、在IE上...
  • 1.导入功能实现下载js-xlsx到dist复制出xlsx.full.min.js引入到页面中然后通过FileReader对象读取文件利用js-xlsx转成json数据代码实现(==>示例<==)/*FileReader共有4种读取方法:1.readAsArrayBuffer(file):...
  • 前阵子跟server同学讨论一个Excel导出的需求我说JS搞不定需要server来做被server同学强行打脸。今天研究了下尼玛不光可以还很强大了总结经验是害人的尤其是在发展迅速的前端圈儿and需要保持饥渴保持对新技术的敏感度...
  • GitHub地址:https://github.com/SheetJS/sheetjs一个js插件,用于导出Excel文件。1、安装命令: npm install xlsx2、使用使用的是vue框架,可以按照自己的需求选择使用实例如下:import ...
  • 最近在做项目,前端进行处理数据,导出excel中,还是遇到不少问题,这里将其进行总结一下,博主是vue框架开发,借用file-saver和xlsx插件进行导出excel,我们来看下代码和效果。地址链接如下:...
  • GitHub地址:https://github.com/SheetJS/sheetjs一个js插件,用于导出Excel文件。1、安装命令: npm install xlsx2、使用使用的是vue框架,可以按照自己的需求选择使用实例如下:import XLSX from 'xlsx' ...
  • 使用Sheetjs 实现纯前端导入导出xlsx [SheetJS] js-xlsx模块学习指南
  • 使用js-xlsx纯前端导出excel

    万次阅读 多人点赞 2018-11-21 18:00:32
    使用js-xlsx导出excel
  • 可以直接用table标签导出,我的是 Vue + element 的项目 需求 看了很多个文档和案例写的一个...git链接下载: https://codechina.csdn.net/mirrors/SheetJS/js-xlsx?utm_source=csdn_github_accelerator. npm安装下面 n
  • SheetJS js-xlsx git地址:https://github.com/SheetJS/sheetjs#sheetjs-js-xlsx 可以查看更详细的官方文档 如何导入读取Excel文件 先在页面中写一个导入文件的地方,以功能为目的,先不要在意样式 再写个文件处理完...
  • js-xlsx 导出表格至excel

    2020-07-17 11:18:28
    引入js文件 ...'js/xlsx.extendscript.js','js/xlsx.full.min.js','js/export.js','js/jszip.js','js/xlsx-style/xlsx.full.min.js' 其中 js/xlsx-style/xlsx.full.min.js 是表格样式的js html部分 <..
  • 之前接触了一种前端导出列表的插件 tableExport.js ,但是其缺点很明显,需要将需要导出的列表通过table表格的标准形式渲染到页面中,才能够导出。当数据量大的时候,浏览器渲染大量数据到页面中,很容易出现卡顿 ...
  • 将界面上的表格数据,通过调用函数exportTableById(tableId,exportFileName),直接导出xlsx格式的excel文件 function exportTableById(tableId,exportFileName){ var tableArray = new Array(); tableArray =...
  • PHP配合SheetJS/js-xlsx导出Excel大量数据时间: January 17, 2018分类: 开发一般使用PHP导出Excel表格都会用PHPExcel,但是当遇到要导出大量数据时,就会导致超时,内存溢出等问题。因此在项目中放弃使用这种方式,...
  • 需求:要求把项目中的table表格导出Excel需求分析及解决:既然需要导出,是报表的可能性比较大,我的项目中就是这样,那既然是报表导出,可以是前端导出,也可以是后端导出(技术包括POI或者报表工具等),这篇文章...

空空如也

空空如也

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

js导出xlsx