# zxst-file-preview

**Repository Path**: lhywork/zxst-file-preview

## Basic Information

- **Project Name**: zxst-file-preview
- **Description**: vue 文件在线预览展示功能，支持文件（PDF，PNG，JPEG，JPG，GIF，DOC，DOCX，PPT，PPTX，ELXS，ELX）
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2024-07-29
- **Last Updated**: 2025-08-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Gxd-vue-file-preview

#### 介绍
```text
vue 文件在线预览展示功能，支持文件（PDF，PNG，JPEG，JPG，GIF，DOC，DOCX，PPT，PPTX，ELXS，ELX）
```

#### 预览
```markdown
![demo](.\20240729151013.png "demo")
```


#### 安装
```bash

npm i zxst-file-preview --save --registry  https://registry.npm.taobao.org
```

#### 插件全局引用
``` javascript

import vueFilePreview from 'zxst-file-preview';

//初始化自定义插件，（pdf.js,worker.js文件建议放在本地服务器),cdn有可能不稳定
Vue.use(vueFilePreview,{
    pdf: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/build/pdf.min.js', //pdf插件
    worker:'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/build/pdf.worker.min.js',//pdf.work插件
});

```


#### 插件使用
```vue
<template>
  <div id="app"></div>
</template>

<script>
  export default {
    name: 'app',
    components: {},
    data(){
      return {}
    },
    created() {
      setTimeout(()=>{
        this.$preview({
          url:'http://static.shanhuxueyuan.com/test.pdf',
          fid: 'test'
        })
      }, 2000);

    },
    methods:{

    }
  }
</script>

<style>
</style>
```

```vue
<template>
    <div id="app">
        <h1>列表展示</h1>
        <file-list-preview :list="list" @remove="handleRemoveClick"></file-list-preview>
        <hr>
        <h1>文件预览模式</h1>
        <a @click="handleClick" style="color: #4285f4">9958ff80d202f91b347b14b5c56f14e811</a>
    </div>
</template>

<script>
  export default {
    name: 'app',
    components: {},
    data() {
      return {
        list: [
          {url: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'},
          {url: 'http://static.shanhuxueyuan.com/test6.docx'},
          {url: 'http://static.shanhuxueyuan.com/test6.docx', name: '1aaaa'},
          {
            url: 'http://static.shanhuxueyuan.com/test.pdf',
            name: 'aaaa',
            fid: 'aadadads'
          },
        ]
      }
    },
    created() {
    },
    methods: {
      /**
       * @description 删除图片事件
       * @param item {Object} 当前被删除的文件对象
       * @param done {function} 删除文件完成回调函数
       */
      handleRemoveClick(item, done) {
        setTimeout(() => {
          console.log('handleRemoveClick', item);
          done()
        }, 2000);
      },

      /**
       * @description 点击查看预览功能
       */
      handleClick() {
        this.$preview({
          url: 'http://static.shanhuxueyuan.com/demo/excel.xlsx',
          fid: 'aadadads'
        })
      },
    }
  }
</script>

<style>
</style>
```