前端直接导出excel

最新推荐文章于 2024-08-10 13:02:01 发布

来到三边坡，努力就发财

最新推荐文章于 2024-08-10 13:02:01 发布

阅读量226

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45580774/article/details/109472122

版权

一、插件导出

1.安装插件

	yarn add xlsx 
	yarn add file-saver

2.引入插件

	import FileSaver from "file-saver"
	import XLSX from "xlsx"

2.在导出的事件中

	exportExcel(){
		let et = XLSX.utils.table_to_book(
		//获取table的DOM
	        document.getElementById("table-contents")
	      );
	      let etout = XLSX.write(et, {
	        bookType: "xlsx",
	        bookSST: true,
	        type: "array"
	      });
	
	      try {
	        FileSaver.saveAs(
	          new Blob([etout], {
	            type: "application/octet-stream"
	          }),
	          "XXX.xls"
	        );
	      } catch (e) {
	        //console.log(e, etout)
	      }
	      console.log(etout);
	      return etout;
	}

二、直接导出

1.首先页面上要有table表格

	<table border="1" cellspacing="0" id="table-parent" >
           <thead>
               <tr>
                 <th ></th>
               </tr>
           </thead>
           <tbody>
               <tr  >
                  <td></td>
               </tr>
           </tbody>     
    </table>

2.在JS中添加函数


var tableToExcel = (function() {
    var uri = 'data:application/vnd.ms-excel;base64,',
    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>{table}</table></body></html>',
        base64 = function(s) {
            return window.btoa(unescape(encodeURIComponent(s)))
        },
        format = function(s, c) {
            return s.replace(/{(\w+)}/g, function(m, p) {
                return c[p];
            })
        }
    return function(table, name) {
        if (!table.nodeType) table = document.getElementById(table);
        var ctx = {
            worksheet: name || 'Worksheet',
            table: table.innerHTML
        };
        window.location.href = uri + base64(format(template, ctx));
    }
})();

3.调用

	tableToExcel(document.getElementById("table-parent"), "导出表格");

来到三边坡，努力就发财

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫