This article uses VUE 3.0
¶ 1. Creating the Project
npm create vue@latest
Follow the prompts to complete project creation
Execute the following commands sequentially to ensure the project runs properly:
cd useWebSheet
npm install
npm run dev
After executing npm run dev, you should see the following prompt:
Enter
http://localhost:5173/in your browser to see VUE's classic page, indicating successful project creation
¶ 2. Loading websheet
We'll place the websheet js and css files in the public directory and load them in index.html:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/public/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/public/websheet.umd.js"></script>
<script type="module" src="/src/main.js"></script>
</body>
</html>
¶ 3. Code Adjustments
¶ 3.1 App.vue
<script setup>
import HelloWebSheet from './components/HelloWebSheet.vue'
</script>
<template>
<div>
<HelloWebSheet />
</div>
</template>
<style scoped>
</style>
¶ 3.2 HelloWebSheet.vue
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
let yourElement=document.getElementById("websheetid");
let wsheet=new websheet('ID', yourElement);
})
</script>
<template>
<div id="websheetid"></div>
</template>
<style scoped>
</style>
The websheet display utility class only requires two parameters to complete page rendering:
Parameter 1: Unique ID after HTML rendering
Parameter 2: The rendering div defined in section 1.2
¶ 3.3 Execution Results
npm run dev
Result
After loading completes, you can right-click the menu to browse local EXCEL XLSX files.
¶ 4. Asynchronously Loading Files from Web
This section requires installation on a server (e.g., NGINX, TOMCAT). The local development environment cannot run this properly.
Error message:
Access to XMLHttpRequest at ' ' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
¶ 4.1 axios Installation
npm install axios
¶ 4.2 Code Adjustments
axios.get('http://www.websheet.cn/files/1.xlsx', { responseType: 'blob' })
.then(response => {
const blob = new Blob([response.data], { type: 'application/octet-stream' });
wsheet.loadFromBlob(blob);
})
.catch(error => {
console.error('File fetch failed:', error);
});
After file loading completes, the binding method can be referenced as:
wsheet.$on("DocumentChange", function () {
activeSheet = wsheet.ActiveSheet();
activeSheet.SetCellValue(2, 1, '3435354.34');
console.log("DocumentChange:")
});
Note: You need to reacquire the activeSheet here - the originally initialized activeSheet becomes invalid.
¶ 5. Control Display Size
The default size of this control is width = 1400, height = 700. You can set the size during initialization:
let wsheet = new websheet('HTML', yourElement, 0, 0, document.documentElement.clientWidth * 0.95, 400);
You can also resize it during runtime:
wsheet.ReSetSize(1500,1500);