下载excel表格

package.json

@@ -12,6 +12,7 @@
     "core-js": "^3.8.3",
     "echarts": "^5.4.2",
     "element-ui": "^2.4.5",
+    "exceljs": "^4.3.0",
     "less": "^4.1.3",
     "less-loader": "^11.1.0",
     "vue": "^2.6.14",

src/components/tool/getExcel.js

@@ -0,0 +1,48 @@
+import Excel from 'exceljs'
+
+let getBuffer = function(){
+    return new Promise((resolve,reject)=>{
+        const x = new XMLHttpRequest();
+        x.open("GET", 'file/附件 5 ：学校创客专项资金使用申请表.xlsx', true);
+        x.responseType = "blob";
+        x.send()
+        x.onreadystatechange = function(){
+            if(x.readyState==4 && x.status==200){
+                let reader = new FileReader();
+                reader.readAsArrayBuffer(x.response)
+                reader.onload = function(){
+                    resolve(reader.result)
+                }
+            }
+        }
+    })
+
+}
+
+
+
+
+export default async function getExcel(data){
+    const content = await getBuffer();
+    const workbook = new Excel.Workbook();
+    await workbook.xlsx.load(content);
+    //获取第一个worksheet
+    let worksheet = workbook.getWorksheet(1);
+
+    // 在这里设置表格的内容
+    worksheet.getCell('C7').value = 100;
+
+
+
+    
+    let blob = new Blob([await workbook.xlsx.writeBuffer()], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8"});
+    let url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.style.display = 'none';
+    link.href = url;
+    link.setAttribute('download', '学校创客专项资金使用申请表.xlsx');
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+}
+

src/views/test.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 测试上传组件 -->
-  <div>
+  <div v-loading="loading">
     <div>
       <BeUpload
         @getFile="getFile"
@@ -13,11 +13,13 @@
         <img src="../assets/img/sclogo3.png" alt="" style="width:300px;height:100%"/>
       </div>
     </div>
+    <el-button @click="Excel()">Excel文件测试按钮</el-button>
   </div>
 </template>
 
 <script>
 import BeUpload from "../components/tool/beUpload.vue";
+import getExcel from "@/components/tool/getExcel";
 export default {
   components: {
     BeUpload,
@@ -25,12 +27,16 @@ export default {
   data() {
     return {
       accept: "*",
+      loading:false,
     };
   },
   methods: {
     getFile(val) {
       console.log(val);
     },
+    Excel(){
+      getExcel("数据")
+    }
   },
 };
 </script>