前端直接导出excel文件

文章目录

• 前言
• 一、插件方式
• • 1.插件安装
  • 2.引入
  • 3.导出
  • 二、本地直接导出
  • • 1.页面规则
    • 2.在JS中添加函数
    • 3.调用

      ---

      前言

      开发中可能会有这样的需求，本地自己生成了一个表格，此时表格并没有上传到后台服务器上，所以无法通过接口进行下载，此时就需要前端自行处理了。

      ---

      一、插件方式

      1.插件安装

       npm i xlsx
       npm i file-saver
      

      2.引入

      // index.vue文件
       import FileSaver from "file-saver"
       import XLSX from "xlsx"
      

      3.导出

               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表格

        2.在JS中添加函数

        var tableToExcel = (function() {
            var uri = 'data:application/vnd.ms-excel;base64,',
            template = '{table}',
                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"), "导出表格");