# @uublue/vue-excel-viewer

> ```shell npm i @uublue/vue-excel-viewer ``` ## Props

Latest version **0.1.17** (published 2021-09-25) · 0 weekly downloads

## Install

```sh
npm install @uublue/vue-excel-viewer
pnpm add @uublue/vue-excel-viewer
yarn add @uublue/vue-excel-viewer
bun add @uublue/vue-excel-viewer
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.17 |
| Published | 2021-09-25 |
| First published | 2020-12-06 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 10.7 MB |
| Known vulnerabilities | 0 (+6 in 2 direct dependencies) |
| Install scripts | no |
| Author | uublue |
| Maintainers | uublue.com |
| Keywords | excel, xlsx, viewer, preview, office |

## Links

- npm: https://www.npmjs.com/package/@uublue/vue-excel-viewer
- Repository: https://github.com/zhizunyoulan/vue-excel-viewer
- Homepage: https://github.com/zhizunyoulan/vue-excel-viewer#readme
- Issues: https://github.com/zhizunyoulan/vue-excel-viewer/issues
- npm.io page: https://npm.io/package/@uublue/vue-excel-viewer

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) 2.6.10
- [xlsx](https://npm.io/package/xlsx.md) ^0.16.9
- [core-js](https://npm.io/package/core-js.md) ^3.6.5

## Recent versions

- 0.1.17 (latest) — 2021-09-25
- 0.1.16 — 2021-03-18
- 0.1.15 — 2021-03-18
- 0.1.13 — 2020-12-18
- 0.1.12 — 2020-12-16
- 0.1.11 — 2020-12-16
- 0.1.10 — 2020-12-16
- 0.1.4 — 2020-12-07
- 0.1.3 — 2020-12-07
- 0.1.2 — 2020-12-06
- 0.1.1 — 2020-12-06

## README

## Install
```shell
npm i @uublue/vue-excel-viewer
```
## Props

| name  |  type |  default | description |
| ------------ | ------------ | ------------ | ------------ | 
| height  | Number  | 500  | the height of excel viewer |
|  firstRowIndex |  Number | 1  | 第一行数据的行序号 |
| minColCounts  | Number  |  - | 列的最小显示个数 |


## Example
### 基本用法
```javascript
import VueExcelViewer from '@uublue/vue-excel-viewer'
import '@uublue/vue-excel-viewer/lib/vue-excel-viewer.css'
Vue.use(VueExcelViewer)

```

```html
<template>
  <div id="app">
    <input @change="chooseFile" type="file"/>

    <excel-viewer
      ref="excelViewer"
      :height="300"
      :first-row-num="firstRowNum"
      :min-col-counts="5"
      @on-reach-top="reachTop"
      @on-reach-bottom="reachBottom"
      @on-row-select="onRowSelect"
      @on-col-select="onColSelect"
      @on-cell-select="onCellSelect"
      @on-before-open="beforeOpen"
      @on-after-open="afterOpen"
    />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      firstRowNum: 2
    };
  },
  methods: {
    chooseFile(e){
      console.info("excel file select", e);
      //open excel file
      this.$refs.excelViewer.openExcelFile(e.target.files[0]);
    },
    beforeOpen() {//文件打开前的事件 on before open
      console.info("excel before open");
      
    },
    afterOpen() {//文件打开后的事件 on after open
      console.info("excel after open");
      this.$refs.excelViewer.setRowBackgroundColor(5,'red');
    },
    onRowSelect(rowNum, selectRowValues) {//行选择的事件 on row select
      console.info("row select", rowNum, selectRowValues);
      //设置行的背景颜色 set row background-color
      this.$refs.excelViewer.setSelectedBackgroundColor('red');
    },
    onColSelect(colNum) {//列选择事件 on column select
      console.info("col select", colNum);
    },
    onCellSelect(rowNum, colNum, value) {//单元格选择的事件 on cell select
      //设置背景颜色 set backgroundColor 
      this.$refs.excelViewer.setCellBackgroundColor(rowNum, colNum, 'red');
      //冻结窗格 freeze at cell
      this.$refs.excelViewer.freezeCellAt(rowNum, colNum);
      if (value) {
        console.info("cell select", rowNum, colNum, value);
      } else {
        console.info("cell select， value empty", rowNum, colNum);
      }
    },
    reachTop() {//滚动到顶部的事件 on reach top
      console.info("touch top");
    },
    reachBottom() {//滚动到底部的事件 on reach bottom
      console.info("touch bottom");
    }
  },
};
</script>
```

### 从文件流获取excel
```javascript
        axios
          .get(`/file`, {
            responseType: "blob",
          })
          .then((res) => {
            let blob = res.data;
            let reader = new FileReader();
            var self = this
            reader.onload = (e) => {
              self.$refs.excelView.openExcelData(e.target.result)
            };
            reader.readAsBinaryString(blob);
          })
          .catch((error) => {
            console.error("error", error);
          });
```

---
_Source: https://npm.io/package/@uublue/vue-excel-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._