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')
        }

总结

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

相关文章

  • 解决vite.config.js无法使用__dirname的问题

    解决vite.config.js无法使用__dirname的问题

    这篇文章主要介绍了解决vite.config.js无法使用__dirname的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue3的watch用法以及和vue2中watch的区别

    vue3的watch用法以及和vue2中watch的区别

    这篇文章主要介绍了vue3的watch用法以及和vue2中watch的区别,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue 文件目录结构详解

    vue 文件目录结构详解

    本篇文章主要介绍了vue 文件目录结构详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue双向数据绑定原理分析、vue2和vue3原理的不同点

    vue双向数据绑定原理分析、vue2和vue3原理的不同点

    这篇文章主要介绍了vue双向数据绑定原理分析、vue2和vue3原理的不同点,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 浅谈在vue-cli3项目中解决动态引入图片img404的问题

    浅谈在vue-cli3项目中解决动态引入图片img404的问题

    这篇文章主要介绍了浅谈在vue-cli3项目中解决动态引入图片img404的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 深入了解Vue2中的的双端diff算法

    深入了解Vue2中的的双端diff算法

    双端Diff在可以解决更多简单Diff算法处理不了的场景,且比简单Diff算法性能更好。本文主要来和大家详细讲讲Vue2中的双端diff算法的实现与使用,需要的可以参考一下
    2023-02-02
  • Vue cli 引入第三方JS和CSS的常用方法分享

    Vue cli 引入第三方JS和CSS的常用方法分享

    下面小编就为大家分享一篇Vue cli 引入第三方JS和CSS的常用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • vue实现lodop打印功能的示例

    vue实现lodop打印功能的示例

    这篇文章主要介绍了vue实现lodop打印功能的示例,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • vue项目检测依赖包是否有使用的问题

    vue项目检测依赖包是否有使用的问题

    这篇文章主要介绍了vue项目检测依赖包是否有使用的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • VUE子组件的watch不被触发问题及解决

    VUE子组件的watch不被触发问题及解决

    这篇文章主要介绍了VUE子组件的watch不被触发问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论