vue集成spreadjs
先使用npm安装spreadjs插件
"@grapecity/spread-excelio": "^14.0.10", "@grapecity/spread-sheets": "^14.0.10", "@grapecity/spread-sheets-barcode": "^14.0.10", "@grapecity/spread-sheets-charts": "^14.0.10", "@grapecity/spread-sheets-designer": "^14.0.10", "@grapecity/spread-sheets-designer-resources-cn": "^14.0.10", "@grapecity/spread-sheets-designer-vue": "^14.0.10", "@grapecity/spread-sheets-languagepackages": "^14.0.10", "@grapecity/spread-sheets-pdf": "^14.0.10", "@grapecity/spread-sheets-pivot-addon": "^14.0.10", "@grapecity/spread-sheets-print": "^14.0.10", "@grapecity/spread-sheets-resources-zh": "^14.0.10", "@grapecity/spread-sheets-shapes": "^14.0.10", "@grapecity/spread-sheets-vue": "^14.0.10", 然后在页面引用
直接上代码
<template> <div style="background:#fff;position:absolute;top:0;bottom:0;left:0;right:0;"> <div id="ss" style="width:100%; height:100%;"></div> <div id="designerHost" style="width:100%; height:100%;border: 1px solid gray;"></div> </div> </template> <script> import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css' import GC from '@grapecity/spread-sheets' import '@grapecity/spread-sheets-resources-zh' import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css' import "@grapecity/spread-sheets-designer-resources-cn" import "@grapecity/spread-sheets-designer" GC.Spread.Common.CultureManager.culture("zh-cn") export default { data(){ return { } }, computed:{ }, created () { }, mounted () { // 初始化 Spread var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); //获取活动表 var sheet = spread.getSheet(0); //设置列宽 sheet.setColumnWidth(2, 100); sheet.setColumnWidth(4, 100); // 创建数据数组 var dataArray = [ ['Region', 'Subregion', 'country', 'Population'], ['Asia', 'Southern', 'India', ], [, , 'Pakistan', ], [, , 'Bangladesh', ], [, , 'Others', ], [, 'Eastern', 'China', ], [, , 'Japan', ], [, , 'Others', ], [, 'South-Eastern', , ], [, 'Western', , ], [, 'Central', , ], ['Africa', 'Eastern', , ], [, 'Western', , ], [, 'Northern', , ], [, 'Others', , ], ['Europe', , , ], ['Others', , , ] ]; // 设置数组 sheet.setArray(1, 1, dataArray); var treemapChart = sheet.charts.add('chart1',GC.Spread.Sheets.Charts.ChartType.treemap, 450, 0, 500, 500, "B2:E18"); // 初始化设计器 // var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost")) // 初始化设计器与默认配置和上面创建的扩展组件 var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), '', spread); } } </script> <style> </style> 效果图
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/232652.html原文链接：https://javaforall.net
