在前端实现excel导入，在线编辑，导出，打印等功能

后台实现excel的导入导出很简单，在线编辑通过使用第三方平台集成也不复杂，那怎么在前端实现exel导入导出、打印、在线编辑功能呢？

在此，我们需要知道几个第三方库：luckySheet，luckyExcel，vue-print-nb，exceljs

luckySheet：luckySheet是当前比较火的excel在线编辑开源的前端第三方插件，暂时不支持导入、导出、打印

luckyExcel：luckyExcel是和luckySheet同一家开发的用于将excel文件导入luckySheet的插件

vue-print-nb：vue-print-nb的开源的封装好的打印插件，底层实现便是我们常见的window.print方法

exceljs：exceljs是用于自定义生成excel文件的开源插件

具体实现：

一、引入依赖

1、引入luckyExcel、vue-print-nb、exceljs插件

cnpm i vue-print-nb --save
cnpm i exceljs --save
cnpm i luckyexcel --save

2、引入luckySheet依赖

使用cdn引入：

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>

本地引入（具体资源文件在项目中）：

<link rel='stylesheet' href='./luckysheet/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./luckysheet/plugins/plugins.css' />
<link rel='stylesheet' href='./luckysheet/css/luckysheet.css' />
<link rel='stylesheet' href='./luckysheet/assets/iconfont/iconfont.css' />
<script src="./luckysheet/plugins/js/plugin.js"></script>
<script src="./luckysheet/luckysheet.umd.js"></script>

二、使用(基于Vue）

1、集成luckySheet

①定义标签的id：

<div id="editSheet" class="container" />

②在mounted生命周期函数中绑定

mounted() {
  this.initExcel();
},
methods:{
    initExcel(exportJson = {}) {
      // eslint-disable-next-line no-undef
      luckysheet.create({
        container: 'editSheet', // luckysheet为容器id
        lang: 'zn',   //默认语言
        showtoolbar: true,  //显示工具栏
        showtoolbarConfig: {
          print: false // 隐藏插件内部打印按钮
        },
        showinfobar: false, // 显示头部返回标题栏
        data: exportJson.sheets //导入excel数据
      });
    },
}

2、luckyexcel导入excel

①通过input标签或者el-upload组件导入一个excel

<el-upload ref="upload" name="file" action="" :limit="1" :before-upload="beforeUpload" :show-file-list="false">
  <el-button slot="trigger" type="primary" class="tool" plain>导入excel</el-button>
</el-upload>

②将excel导入luckysheet

    beforeUpload(file) {
      const suffix = file.name.split('.');
      if (suffix[suffix.length - 1] !== 'xlsx') {
        this.$message.error('文件格式只能是.xlsx');
        return false;
      }
      // eslint-disable-next-line no-undef
      luckysheet.destroy();
      // eslint-disable-next-line no-undef
      LuckyExcel.transformExcelToLucky(file, exportJson => {
        if (!exportJson.sheets || exportJson.sheets.length === 0) {
          this.$message.warning('读取excel文件内容失败');
          return;
        }
        this.initExcel(exportJson);
      });
    }

3、使用exceljs提供生成excel功能

①导出成file对象

    /**
     * @description: 获取在线excel数据后编辑成excel文件导出
     * @author: flyer
     */    
    async exportExcel() {
      // eslint-disable-next-line no-undef
      const data = luckysheet.getluckysheetfile(); //获取luckysheet中的excel所有数据
      const exportData = await exportExcel(data);
      const blob = new Blob([exportData]);
      const file = new File([blob], this.file?.name || '文档.xlsx', { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      return file;
    },

exportExcel方法比较长，并且会根据需要持续添加或优化功能，有需要的小伙伴自行去项目中查看

②下载到本地

    /**
     * @description: 浏览器导出excel
     * @author: flyer
     * @param {Object} blob excel数据，也可以是file对象
     */
    async download() {
      const file = await this.exportExcel();
      if (window.navigator && window.navigator.msSaveBlob) {
        window.navigator.msSaveBlob(file, file.name);
      } else {
        const a = document.createElement('a');
        a.download = file.name;
        a.href = URL.createObjectURL(file);
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    },

4、使用vue-print-nb提供打印功能

①在main.js引入vue-print-nb功能

import Print from 'vue-print-nb';
Vue.use(Print);

②按钮绑定一个不显示的标签

<el-button v-print="print_html" type="primary" class="tool" plain @click="printFn(false)">打印</el-button>
<div id="print_html" style="text-align:center" />

③实现导出功能

    /**
     * @description: 打印默认区域
     * @author: flyer
     * @param {Boolean} flag 是否默认打印
     */
    printFn(flag) {
      // eslint-disable-next-line no-undef
      const src = flag ? luckysheet.getScreenshot() : luckysheet.getScreenshot({ range: 'A1:J50' });
      const $img = `<img src=${src} style="max-width: 90%;" />`;
      this.$nextTick(() => {
        document.querySelector(`#print_html`).innerHTML = $img;
      });
    },

demo地址：https://gitee.com/flyerking/xf-excel
demo演示：

演示excel操作