vue下載下傳excel檔案亂碼 mock.js_豪橫！3 分鐘快速建構一個 Vue 工程，附詳細代碼

SpreadJS是一款基于 HTML5 的純前端表格控件，相容 450 種以上的 Excel 公式，具備“高性能、跨平台、與 Excel 高度相容”的産品特性 可為使用者帶來親切、易用的使用體驗，并滿足 Web Excel元件開發、表格文檔協同編輯、 資料填報、 類Excel報表設計等業務場景，可極大降低企業研發成本和項目傳遞風險。趕快點選文末“了解更多”下載下傳SpreadJS立即體驗吧>>

SpreadJS 純前端表格控件 V11.2(SP2)版本已經全面支援了 Vue 拓展，下面我們看下如何配合 VUE CLI，隻需 3 分鐘快速建構一個 SpreadJS Vue 工程。

1. 安裝vue-cli(耗時30 S)

通過指令:npm install -g @vue/cli 安裝(https://cli.vuejs.org/)

2. 建立 vue-spreadjs 工程(耗時 1 Min)

請根據項目需求配置工程選項：

3. 通過npm install 或者在package.json中添加引用的方式安裝spread.sheets(耗時20S)

"@grapecity/spread-excelio": "^11.2.3",      "@grapecity/spread-sheets": "^11.2.3",      "@grapecity/spread-sheets-print": "^11.2.3",      "@grapecity/spread-sheets-resources-zh": "^11.2.3",      "@grapecity/spread-sheets-vue": "^11.2.3",  
           

4. 修改 router/index.js 為 spreadJS 頁面添加 router(耗時 30 S)

routes: [      {        path: '/',        name: 'HelloWorld',        component: HelloWorld      },      {        path: '/spreadjs',        name: 'spreadJS',        component: SpreadJS      }    ]  
           

5. 建立 SpreadJS Component(耗時 30 S)

請在 components 下添加 SpreadJS.vue 檔案

template 内容：

Spread.Sheets

導入 導出 列印

Style内容：

Script内容：

workbookInitialized 是 spread 初始化完成後的回調事件，我們可以在事件中得到初始化好的 workbook 對象。

部署授權需要同時給 Sheets 和 ExcelIO 同時添加，部署授權可以在全局 config 中配置。

6. 運作項目(耗時 10 S)

建立 npm install 依賴後，即可通過npm start啟動項目

浏覽器通路 http://localhost:8081/#/spreadjs 檢視效果。

隻需 3 分鐘，一個 SpreadJS 的 Vue 項目就建立完成了，當然純前端表格控件 SpreadJS 的強大不僅于此，去實際試用感受一下吧

今天的内容就是這些了，點選下方“了解更多”擷取限時免費體驗資格！