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 PostCSS的使用介绍
postcss一种对css编译的工具，类似babel对js的处理，postcss只是一个工具，本身不会对css一顿操作，它通过插件实现功能，autoprefixer就是其一
2023-02-02
vue实现顶部左右滑动导航
这篇文章主要为大家详细介绍了vue实现顶部左右滑动导航，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩）
最近小编接到这样的需求：弹出框（或Popover）在 show 后，点击空白处可以将其 hide。针对这个需求，小编整理了三种实现方式，如果大家对vue 点击空白隐藏节点问题感兴趣的朋友跟随小编一起看看吧
2019-10-10
图片预览插件vue-photo-preview的使用示例详解
这篇文章主要介绍了图片预览插件vue-photo-preview的使用,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-08-08
vue+webpack模拟后台数据的示例代码
这篇文章主要介绍了vue+webpack模拟后台数据的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Vue.js的模板语法详解
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。这篇文章重点给大家介绍Vue.js的模板语法，感兴趣的朋友跟随小编一起看看吧
2020-02-02
lottie实现vue自定义loading指令及常用指令封装详解
这篇文章主要为大家介绍了lottie实现vue自定义loading指令及常用指令封装，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
vue项目在webpack2实现移动端字体自适配功能
这篇文章主要介绍了vue项目在webpack2实现移动端字体自适配的相关知识，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-06-06
vue代理模式解决跨域详解
这篇文章主要介绍了vue代理模式解决跨域详解的相关资料,需要的朋友可以参考下
2022-09-09
vue中配置后端接口服务信息详解
这篇文章主要介绍了vue中配置后端接口服务信息详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03