# the-file-preview

> ## 安装 ``` npm i the-file-preview ```

Latest version **0.2.0** (published 2023-02-14) · ISC license · 0 weekly downloads

## Install

```sh
npm install the-file-preview
pnpm add the-file-preview
yarn add the-file-preview
bun add the-file-preview
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2023-02-14 |
| First published | 2023-02-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 63.5 MB |
| Known vulnerabilities | 0 (+5 in 4 direct dependencies) |
| Install scripts | no |
| Author | MOONCOM |
| Maintainers | *moonlight* |
| Keywords | preview, js, office, pdf, word, excel |

## Links

- npm: https://www.npmjs.com/package/the-file-preview
- npm.io page: https://npm.io/package/the-file-preview

## Dependencies (10)

- [vue](https://npm.io/package/vue.md) ^2.6.14
- [xlsx](https://npm.io/package/xlsx.md) ^0.18.5
- [jszip](https://npm.io/package/jszip.md) ^3.10.1
- [core-js](https://npm.io/package/core-js.md) ^3.8.3
- [exceljs](https://npm.io/package/exceljs.md) ^4.3.0
- [pdfjs-dist](https://npm.io/package/pdfjs-dist.md) ^2.0.943
- [tinycolor2](https://npm.io/package/tinycolor2.md) ^1.6.0
- [xlsx-style](https://npm.io/package/xlsx-style.md) ^0.8.13
- [docx-preview](https://npm.io/package/docx-preview.md) ^0.1.14
- [x-data-spreadsheet](https://npm.io/package/x-data-spreadsheet.md) ^1.1.9

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.2.0 (latest) — 2023-02-14
- 0.1.1 — 2023-02-13
- 0.1.0 — 2023-02-13

## README

# preview-vue

## 安装
```
npm i the-file-preview
```

## 描述
支持vue2和vue3，实现了对线上文件和本地上传文件的预览

## 参数选项
| 参数    | 类型  | 描述 |
|-------|-----|----|
| url   | String | 线上文件的url |
| file  | File | 本地的上传文件 |

## 示例
点击查看 [线上演示](https://mooncom.github.io/the-file-preview/demo/).

## 项目地址
- [github](https://github.com/MOONCOM/the-file-preview)
- [npm](https://www.npmjs.com/package/the-file-preview)

## 使用
main.js 中注册全局组件
```
import FilePreview from 'the-file-preview';
Vue.component('FilePreview',FilePreview);
```
1. 当使用线上url预览时
```
<template>
    <filePreview :url="url"/>
</template>
```
2. 当预览本地文件时
``` 
<template>
    <div class="upload">
      要上传的文件： <input type="file" @change="uploadHandle"/>
    </div>
    <filePreview :file="file"/>
</template>

export default {
  name: 'Demo',
  data() {
    return {
      file: null,
    };
  },
  methods: {
    uploadHandle(data){
      this.file = data.target.files[0];
    },
  },
};
```

---
_Source: https://npm.io/package/the-file-preview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._