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

您所在的位置：网站首页 › 怎么把excel转化为在线编辑版本 › 在前端实现excel导入，在线编辑，导出，打印等功能

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

2023-10-03 11:21| 来源: 网络整理| 查看: 265

后台实现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引入：

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

二、使用(基于Vue） 1、集成luckySheet

①定义标签的id：

②在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

导入excel

②将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);

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

打印

③实现导出功能

/** * @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 = ``; this.$nextTick(() => { document.querySelector(`#print_html`).innerHTML = $img; }); },

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

演示excel操作

【本文地址】

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

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

今日新闻

推荐新闻