新人必看！手把手教你如何使用浏览器表格插件（上）

本文由葡萄城技术团队于博客园原创并首发。转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

# npm 6.x

npm create vite@latest Vue3-spread-ts --template Vue-ts

# npm 7+, extra double-dash is needed:

npm create vite@latest Vue3-spread-ts --template Vue-ts

# yarn

yarn create vite Vue3-spread-ts --template Vue-ts

# pnpm

pnpm create vite Vue3-spread-ts -- --template Vue-ts

{

  "name": "vue3-spread-ts",

  "private": true,

  "version": "0.0.0",

  "scripts": {

    "dev": "vite",

    "build": "vue-tsc --noEmit && vite build",

    "preview": "vite preview"

  },

  "dependencies": {

    "@grapecity/spread-excelio": "15.1.0",

    "@grapecity/spread-sheets": "15.1.0",

    "@grapecity/spread-sheets-barcode": "15.1.0",

    "@grapecity/spread-sheets-charts": "15.1.0",

    "@grapecity/spread-sheets-languagepackages": "15.1.0",

    "@grapecity/spread-sheets-pdf": "15.1.0",

    "@grapecity/spread-sheets-pivot-addon": "15.1.0",

    "@grapecity/spread-sheets-print": "15.1.0",

    "@grapecity/spread-sheets-resources-zh": "15.1.0",

    "@grapecity/spread-sheets-shapes": "15.1.0",

    "@grapecity/spread-sheets-tablesheet": "15.1.0",

    "@grapecity/spread-sheets-vue": "15.1.0",

    "element-plus": "^2.2.5",

    "file-saver": "^2.0.5",

    "vue": "^3.2.25"

  },

  "devDependencies": {

    "@vitejs/plugin-vue": "^2.3.3",

    "typescript": "^4.5.4",

    "vite": "^2.9.9",

    "vue-tsc": "^0.34.7"

  }

}

import {defineComponent} from 'Vue'

// SpreadJS组件运行时资源

import * as GC from "@grapecity/spread-sheets"

//引入符合自己项目主题的样式

import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"

//设置中文

import "@grapecity/spread-sheets-resources-zh"

// 引入导入导出文件相关的资源

import * as ExcelIO from "@grapecity/spread-excelio"

//引入文件导出

import {saveAs} from 'file-saver'

//引入打印相关资源

import "@grapecity/spread-sheets-print"

//引入导出pdf资源

import "@grapecity/spread-sheets-pdf"

 

//引入语言资源（支持中英文）

GC.Spread.Common.CultureManager.culture('zh-cn')

// 引入组件

components:{

        'gc-spread-sheets':GcSpreadSheets

    }

 

//div标签

<gc-spread-sheets :hostStyle="hostStyle" @workbookInitialized="initWorkbook">

  </gc-spread-sheets>

 //设置高度格式，写在setup方法中

        const hostStyle={

            height:'90vh'

        }

return{

            hostStyle

        }

       <el-upload

            class="upload-demo"

            accept=".xlsx"

            :before-upload="importFile"

            action=''>

            <el-button type="primary">上传文件</el-button>

        </el-upload>

        <el-button type="primary" @click="downloadFile">下载文件</el-button>

 //文件上传的方法

        const importFile = (file) => {

            let io = new ExcelIO.IO()

            // excelio打开文件，回调函数中的参数时SpreadJS支持的json格式

            io.open(file,(fileJSON) => {

                // fromJSON中第二个参数为导入文件的控制参数，默认均为false,根据自己的需求添加,都不要修改时可不传

                spread.fromJSON(fileJSON,{

                    ignoreFormula: false,    //导入忽略公式    

                    ignoreStyle: false,      //导入忽略样式

                    frozenColumnsAsRowHeaders: false,   //将冻结列当作行头

                    frozenRowsAsColumnHeaders: false,   //将冻结行作为列头

                    // 导入文件不立即计算. Excel文件保存时会自动计算,当文件比较大时,可以导入后不计算,提高导入效率.

                    doNotRecalculateAfterLoad: false    

                })

            })

            return false

        }


        //文件下载的方法

        const downloadFile = () => {

        //获取当前工作簿json,toJSON也可以根据需求设置参数,参考学习指南导入导出json

            let fileJson = spread.toJSON()

            //创建文件IO实例

            let io = new ExcelIO.IO()

            //保存文件

            io.save(fileJson,(blob)=>{

                // excelIO将文件转化为blob,传递给回调函数,然后执行file-saver的saveAs保存excel文件.

                saveAs(blob,'导出文件.xlsx')

            },(e) => {

                console.log(e)

            })

        }