脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue实现在线编辑excel

vue如何实现在线编辑excel

 更新时间：2023年10月24日 08:45:29   作者：不会么么哒  
这篇文章主要介绍了vue如何实现在线编辑excel问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue实现在线编辑excel

不支持ie  支持edge  需要ie请换方法 

vue不再赘述

安装x-data-spreadsheet

npm install x-data-spreadsheet
<template>
		<div id="x-spreadsheet-demo"></div>
</template>
<script>
	import Spreadsheet from 'x-data-spreadsheet';
	import zhCN from 'x-data-spreadsheet/dist/locale/zh-cn';
  export default {
    data() {
      return {
      	options:{
  	mode: 'edit',
  showToolbar: true,
  showGrid: true,
  showContextmenu: true,
  view: {
  	/*宽高，因为我是自定义的所以-----*/
  	/*height: () => document.documentElement.clientHeight - 300,
  	width: () => document.documentElement.clientWidth - 300,*/
    height: () => document.documentElement.clientHeight - 64,
    width: () => document.documentElement.clientWidth - 150,
  },
  formats: [],
  fonts: [],
  formula: [],
  row: {
    len: 100,
    height: 25,
  },
  
  col: {
    len: 26,
    width: 100,
    indexWidth: 60,
    minWidth: 60,
  },
  /*freeze: 'C3',*/
  style: {
    bgcolor: '#ffffff',
    align: 'left',
    valign: 'middle',
    textwrap: false,
    textDecoration: 'normal',
    strikethrough: false,
    color: '#0a0a0a',
    font: {
      name: 'Helvetica',
      size: 10,
      bold: false,
      italic: false,
    },
  },
},
/*数组*/
optionss:[{
	name:'aaaa',
          /*freeze: 'C3',*/
          styles: [
            {
            	/*小框背景色*/
              bgcolor: '#f4f5f8',
              textwrap: true,
              color: '#900b09',
              border: {
                top: ['thin', '#0366d6'],
                bottom: ['thin', '#0366d6'],
                right: ['thin', '#0366d6'],
                left: ['thin', '#0366d6'],
              },
            },{
            	/*小框背景色*/
              bgcolor: '#000000',
              textwrap: true,
              color: '#000000',
              border: {
                top: ['thin', '#000000'],
                bottom: ['thin', '#000000'],
                right: ['thin', '#000000'],
                left: ['thin', '#000000'],
              },
            },
          ],
          /*合并单元格*/
          merges: [
            'C3:E4',
          ],
          rows: {
          	/*第1行*/
            1: {
              cells: {
              	/*第0列 2列*/
                0: { text: 'testingtesttestetst' },
                2: { text: 'testing' },
              },
            },
            2: {
              cells: {
                0: { text: 'render', style: 0 },
                1: { text: 'Hello' },
                2: { text: 'haha', merge: [1, 2] },
              }
            },
            8: {
              cells: {
                8: { text: 'border test', style: 0 },
              }
            }
          },
        },{
	name:'aaaa',
          /*freeze: 'C3',*/
          styles: [
            {
            	/*小框背景色*/
              bgcolor: '#f4f5f8',
              textwrap: true,
              color: '#900b09',
              border: {
                top: ['thin', '#0366d6'],
                bottom: ['thin', '#0366d6'],
                right: ['thin', '#0366d6'],
                left: ['thin', '#0366d6'],
              },
            },{
            	/*小框背景色*/
              bgcolor: '#000000',
              textwrap: true,
              color: '#000000',
              border: {
                top: ['thin', '#000000'],
                bottom: ['thin', '#000000'],
                right: ['thin', '#000000'],
                left: ['thin', '#000000'],
              },
            },
          ],
          /*合并单元格*/
          merges: [
            'C3:E4',
          ],
          rows: {
          	/*第1行*/
            1: {
              cells: {
              	/*第0列 2列*/
                0: { text: 'testingtesttestetst' },
                2: { text: 'testing' },
              },
            },
            2: {
              cells: {
                0: { text: 'render', style: 0 },
                1: { text: 'Hello' },
                2: { text: 'haha', merge: [1, 2] },
              }
            },
            8: {
              cells: {
                8: { text: 'border test', style: 0 },
              }
            }
          },
        }]
      }
    },
      methods: {
      },
    mounted:function(){
    	/*中文*/
    	Spreadsheet.locale('zh-cn', zhCN);
		new Spreadsheet('#x-spreadsheet-demo', this.options).loadData(this.optionss).change((data) => {
    console.log(data)
  });
  }
   }
</script>
 
<style>
</style>

vue导出excel模板

1、首先需要导入第三方插件xlsx（最好是指定版本，要不然容易报错）

npm install --save xlsx@0.17.0

后续可能还会用到导入导出，也需要安装第三方插件

npm install --save file-saver@2.0.5

2、哪个页面需要下载excel模板就到哪里导入

import XLSX from "xlsx"

3、给下载模板按钮绑定事件

<el-button @click="downloadExcel">嗨嗨嗨</el-button>

4、下载模板执行内容

downloadExcel() {
            let excelData = [
                [ '姓名', '电话', '生日', 'xx', "xx",  "……"]//这里是表头数据
            ]
            let ws = XLSX.utils.aoa_to_sheet(excelData)
            let wb = XLSX.utils.book_new()
            XLSX.utils.book_append_sheet(wb, ws, '工作簿名称')
            XLSX.writeFile(wb, '保存的文件名.xlsx')
        }

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue组件之间的通信方式详细讲解

    Vue组件之间的通信方式详细讲解

    对于vue来说，组件之间的消息传递是非常重要的，用vue可以是要组件复用的，而组件实例的作用域是相互独立，这意味着不同组件之间的数据无法互相引用，一般来说，组件之间可以有几种关系，下面是我对组件之间消息传递的常用方式的总结
    2022-08-08
  • VuePress 侧边栏的具体使用

    VuePress 侧边栏的具体使用

    本文主要介绍了VuePress 侧边栏的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • vue3 elementPlus 表格实现行列拖拽及列检索功能(完整代码)

    vue3 elementPlus 表格实现行列拖拽及列检索功能(完整代码)

    本文通过实例代码给大家介绍vue3 elementPlus 表格实现行列拖拽及列检索功能,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-10-10
  • Vue 实现html中根据类型显示内容

    Vue 实现html中根据类型显示内容

    今天小编大家分享一篇Vue 实现html中根据类型显示内容，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue.js入门教程之基础语法小结

    vue.js入门教程之基础语法小结

    这篇文章我们将学习vue.js的基础语法，对于大家学习vue.js具有一定的参考借鉴价值，有需要的朋友们下面来一起看看。
    2016-09-09
  • vue轮播图插件vue-awesome-swiper

    vue轮播图插件vue-awesome-swiper

    这篇文章主要为大家详细介绍了vue轮播图插件vue-awesome-swiper，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11
  • vue3中如何使用vue-types

    vue3中如何使用vue-types

    vue-types 在 Vue 3 中的使用主要适用于希望进行更细致的 prop 验证的场景,尤其是在 JavaScript 项目中,这篇文章给大家介绍vue3中如何使用vue-types,感兴趣的朋友跟随小编一起看看吧
    2024-04-04
  • vue中json格式化显示数据(vue-json-viewer)

    vue中json格式化显示数据(vue-json-viewer)

    这篇文章主要给大家介绍了关于vue中json格式化显示数据(vue-json-viewer)的相关资料,Vue-json-viewer是一个Vue组件,用于在Vue应用中显示JSON数据的可视化工具,需要的朋友可以参考下
    2024-05-05
  • vue3.x 的shallowReactive 与 shallowRef 使用场景分析

    vue3.x 的shallowReactive 与 shallowRef 使用场景分析

    在Vue3.x中,`shallowReactive`和`shallowRef`是用于创建浅层响应式数据的API,它们与`reactive`和`ref`类似,本文介绍vue3.x  shallowReactive 与 shallowRef的使用场景,感兴趣的朋友一起看看吧
    2025-02-02
  • VUE插件vue-treeselect的使用及说明

    VUE插件vue-treeselect的使用及说明

    这篇文章主要介绍了VUE插件vue-treeselect的使用及说明，具有很好的参考价值，希望对大家有所帮助。
    2023-07-07

最新评论