vue3+luckyexcel+php在线编辑excel文件

开发过程中,需要开发一个在线编辑excel文档的功能,找到了这个合适的组件

Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。

可以导入文档,预览、编辑、保存、导出等功能,可以满足大部分需求

第一步:需要先安装 vue3 运行下面三个安装命令

npm install exceljs -S

npm install luckyexcel -S

npm install file-saver

第二步:前端部分index.html 加入引用代码

html 复制代码
<link rel='stylesheet' href='/luckysheet/pluginsCss.css' />
      <link rel='stylesheet' href='/luckysheet/plugins.css' />
      <link rel='stylesheet' href='/luckysheet/luckysheet.css' />
      <link rel='stylesheet' href='/luckysheet/iconfont.css' />
      <script src="/luckysheet/plugin.js"></script>
      <script src="/luckysheet/luckysheet.umd.js"></script>

组件部分test.vue

html 复制代码
<template>
  <div style="position: absolute; top: 0">
    <input id="uploadBtn" type="file" @change="loadExcel" />
    <button class="btn" @click="getExcel">后台数据</button>
    <span>Or文件:</span>

    <select v-model="selected" @change="selectExcel">
      <option disabled value="">Choose</option>
      <option v-for="option in options" :key="option.text" :value="option.value">
        {{ option.text }}
      </option>
    </select>
    <input class="inp" type="text" v-model="excelTitel">
    <button class="blueBtn" @click="editClicked">编辑</button>
    <button class="btn" @click="saveExcel">保存</button>
    <a href="javascript:void(0)" @click="downloadExcel">下载</a>
  </div>
  <div id="luckysheet"></div>
  <div v-show="isMaskShow" id="tip">Downloading</div>
</template>
复制代码
test.vue   script代码部分
javascript 复制代码
import { ref, onMounted } from 'vue'
import http from '@/assets/js/procure-http.js'
import { exportExcel } from '@/components/export'
import LuckyExcel from 'luckyexcel'

const isMaskShow = ref(false)
const selected = ref('')
const jsonData = ref({})
const excelTitel = ref('')
const congifdata = ref({
  container: 'luckysheet',
  title: "bi", // 工作簿名称
  lang: "zh", // 设定表格语言 国际化设置,允许设置表格的语言,支持中文("zh")和英文("en")
  allowCopy: false, // 是否允许拷贝
  showtoolbar: false, // 是否显示工具栏
  showinfobar: true, // 是否显示顶部信息栏
  showsheetbar: false, // 是否显示底部sheet页按钮
  showstatisticBar: false, // 是否显示底部计数栏
  sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
  allowEdit: false, // 是否允许前台编辑
  enableAddRow: false, // 允许增加行
  enableAddCol: false, // 允许增加列
  userInfo: false, // 右上角的用户信息展示样式
  showRowBar: false, // 是否显示行号区域
  showColumnBar: false, // 是否显示列号区域
  sheetFormulaBar: false, // 是否显示公式栏
  enableAddBackTop: false,//返回头部按钮
  rowHeaderWidth: 0,//纵坐标
  columnHeaderHeight: 0,//横坐标
  showstatisticBarConfig: {
    count:false,
    view:false,
    zoom:false,
  },
  showsheetbarConfig: {
    add: false, //新增sheet
    menu: false, //sheet管理菜单
    sheet: false, //sheet页显示
  },
  forceCalculation: true,//强制计算公式
})
const options = ref([
  { text: 'Money Manager.xlsx', value: 'https://xxxxxx/storage/salarytemp/20231222/20231222162622.xlsx' },
  {text: 'Activity costs tracker.xlsx', value: 'https://xxxxxx/storage/salary/20231031/0f724adf33a2d3d0b95071b0c52fb711.xlsx'}
])

const loadExcel = (evt) => {
  const files = evt.target.files
  if (files == null || files.length == 0) {
    alert('No files wait for import')
    return
  }

  let name = files[0].name
  let suffixArr = name.split('.'),
      suffix = suffixArr[suffixArr.length - 1]
  if (suffix != 'xlsx') {
    alert('Currently only supports the import of xlsx files')
    return
  }
  LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {
    if (exportJson.sheets == null || exportJson.sheets.length == 0) {
      alert('Failed to read the content of the excel file, currently does not support xls files!')
      return
    }
    console.log('exportJson', exportJson)
    jsonData.value = exportJson
    console.log(exportJson.sheets)
    window.luckysheet.destroy()
    excelTitel.value = exportJson.info.name
    congifdata.value.data = exportJson.sheets
    congifdata.value.title = exportJson.info.name
    congifdata.value.userInfo = exportJson.info.name.creator
    window.luckysheet.create(congifdata.value)
  })
}
const selectExcel = (evt) => {
  const value = selected.value
  const name = evt.target.options[evt.target.selectedIndex].innerText

  if (value == '') {
    return
  }
  isMaskShow.value = true

  LuckyExcel.transformExcelToLuckyByUrl(value, name, (exportJson, luckysheetfile) => {
    if (exportJson.sheets == null || exportJson.sheets.length == 0) {
      alert('Failed to read the content of the excel file, currently does not support xls files!')
      return
    }
    console.log('exportJson', exportJson)
    jsonData.value = exportJson

    isMaskShow.value = false
    window.luckysheet.destroy()

    window.luckysheet.create({
      container: 'luckysheet', //luckysheet is the container id
      showinfobar: false,
      data: exportJson.sheets,
      title: exportJson.info.name,
      userInfo: exportJson.info.name.creator
    })
  })
}
// 导出
const downloadExcel = () => {
  exportExcel(luckysheet.getAllSheets(), excelTitel.value)
}
// 从后台获取数据
const getExcel = () => {
  http.get('/index/index', {}, res => {
    if(res.code == 200) {
      window.luckysheet.destroy()
      console.log(JSON.parse(res.data))
      congifdata.value.data = JSON.parse(res.data)
      congifdata.value.title = '测试'
      window.luckysheet.create(congifdata.value)
    }
  })
}
// 保存excel数据
const saveExcel = () => {
  var excel = luckysheet.getAllSheets();
  //去除临时数据,减小体积
  for(var i in excel)
    excel[i].data = undefined
  // console.log(JSON.stringify(data))
  http.post('/index/update', {data:JSON.stringify(excel)}, res => {
    console.log(res)
    if(res.code == 200) {

    }
  })
}
const editClicked = () =>{
  congifdata.value.showtoolbar = true
  congifdata.value.allowEdit = true
  luckysheet.create(congifdata.value)
}
// !!! create luckysheet after mounted
onMounted(() => {
  luckysheet.create(congifdata.value)
})
</script>

<style scoped>
#luckysheet {
  margin: 0px;
  padding: 0px;
  position: absolute;
  width: 100%;
  left: 0px;
  top: 30px;
  bottom: 0px;
  height:900px;
}

#uploadBtn {
  font-size: 16px;
}

#tip {
  position: absolute;
  z-index: 1000000;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-size: 40px;
  align-items: center;
  justify-content: center;
  display: flex;
}
</style>

运行后效果如图

本地引用文件的需要下载好组件

相关推荐
Swift社区2 小时前
在 Swift 中实现字符串分割问题:以字典中的单词构造句子
开发语言·ios·swift
没头脑的ht2 小时前
Swift内存访问冲突
开发语言·ios·swift
没头脑的ht2 小时前
Swift闭包的本质
开发语言·ios·swift
wjs20242 小时前
Swift 数组
开发语言
stm 学习ing3 小时前
FPGA 第十讲 避免latch的产生
c语言·开发语言·单片机·嵌入式硬件·fpga开发·fpga
湫ccc4 小时前
《Python基础》之字符串格式化输出
开发语言·python
mqiqe5 小时前
Python MySQL通过Binlog 获取变更记录 恢复数据
开发语言·python·mysql
AttackingLin5 小时前
2024强网杯--babyheap house of apple2解法
linux·开发语言·python